Stripe.js-Fehler – Ungültiger Wert für createPaymentMethod: Karte war „Zahlungs“-Element, das nicht zum Erstellen von Ka ⇐ JavaScript

[Guest]

Ich erhalte diesen Fehler in meiner JS-Konsole, wenn ich in meinem Formular, das ein Stripe-Zahlungselement verwendet, auf die Schaltfläche „Senden“ klicke:

Code: Select all

[Error] Unhandled Promise Rejection: IntegrationError: Invalid value for createPaymentMethod: card was 'payment' Element, which cannot be used to create card PaymentMethods. (anonymous function) (checkout2.js:44)

Der Fehler wird nicht von Stacktraces begleitet und der Fehler tritt nur in der Konsole auf, ohne Fehler im Serverterminal.
Hier ist die Datei mit dem Fehler, checkout2.js:

Code: Select all

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('publishable key goes here (removed for the sake of the StackOverflow question)');

const appearance = {
theme: 'night',

variables: {
colorPrimary: 'rgb(75, 67, 188)',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
borderRadius: '5px',
}
};

const options = {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
};
let clientSecret; // declare clientSecret outside the fetch callback
let elements; // declare elements outside the fetch callback

fetch('/secret')
.then(response => response.json())
.then(data => {
clientSecret = data.client_secret;
elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
});

// Handle form submission
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (!clientSecret || !elements) {
console.error('Client secret or elements not loaded yet');
return;
}
// Get the payment element
const paymentElement = elements.getElement('payment');
// Create a PaymentMethod
const { paymentMethod, error } = await stripe.createPaymentMethod({
type: 'card',
card: paymentElement,
});
if (error) {
// Handle error
console.log(error);
} else {
const result = await stripe.confirmCardPayment(clientSecret, {
payment_method: paymentMethod.id,
});
if (result.error) {
// Handle error
document.getElementById('error-message').innerText = result.error.message;
} else {
// Handle successful payment
console.log('Payment successful!');
}
}
});

Hier ist meine server.js-Datei, die von Node ausgeführt wird:

Code: Select all

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const express = require('express');
const app = express();

const stripe = require('stripe')('secret key would be here, but removed for StackOverflow');

app.use(express.static('public'));

app.get('/secret', async (req, res) => {
const paymentIntent = await stripe.paymentIntents.create({
amount: 1099,
currency: 'usd',
automatic_payment_methods: {
enabled: true,
},
});
res.json({ client_secret: paymentIntent.client_secret });
});

app.listen(3000, () => {
console.log('Server started on port 3000.  Open http://localhost:3000 in your browser to view the public directory.');
});

Endlich meine index.html-Datei:

Code: Select all

Stripe Payment


body {
background-color: #000000;
}

#payment-form {
margin-left: 100px;
margin-right: 100px;
}

#submit {
margin-top: 30px;
height: 40px;
width: 175px;
font-size: 20px;
background-color: rgb(55, 48, 163);
color: #ffffff;
border: 0px;
border-radius: 5px;
cursor: pointer;
}

#submit:hover {
background-color: rgb(75, 67, 188);
}







Submit

Für diejenigen, die sich fragen: Dies läuft auf einem Node.js-Server.
Der Fehler tritt in meiner JS-Konsole auf, wenn ich auf „Senden“ klicke meine HTML-Seite. Da dieser Fehler auftritt, führt er dazu, dass das Formular vollständig fehlschlägt. Es wird überhaupt keine POST-Anfrage an Stripe gesendet und der Fehler tritt weiterhin auf, wenn Sie immer wieder auf die Schaltfläche „Senden“ klicken.