Ошибка Stripe.js — недопустимое значение для createPaymentMethod: карта была элементом «оплата», который нельзя использо ⇐ Javascript

[Гость]

Я получаю эту ошибку в консоли JS, когда нажимаю кнопку отправки в форме, в которой используется платежный элемент Stripe:

Код: Выделить всё

[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)

Ошибка не сопровождается никакими трассировками стека и возникает только в консоли, без ошибок в серверном терминале.
Вот файл с ошибкой checkout2.js:

Код: Выделить всё

// 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!');
}
}
});

Вот мой файл server.js, который работает под управлением Node:

Код: Выделить всё

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.');
});

Наконец, мой файл index.html:

Код: Выделить всё

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

Для тех, кому интересно: это работает на сервере Node.js.
Ошибка возникает в моей консоли JS, когда я нажимаю «Отправить» моя HTML-страница. Из-за возникновения этой ошибки форма полностью терпит неудачу. В Stripe вообще не отправляется POST-запрос, и ошибка будет продолжать возникать, когда вы снова и снова нажимаете кнопку «Отправить».

Подробнее здесь: https://stackoverflow.com/questions/793 ... yment-elem