使用Stripe Payment Element调用createPaymentMethod时触发IntegrationError的问题求助

大家好，我现在遇到了一个Stripe支付集成的问题，希望能得到帮助。

当我点击使用Stripe Payment Element的表单提交按钮时，浏览器的JS控制台里出现了这个错误：

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)

这个错误没有附带堆栈追踪，而且服务器终端里完全看不到任何错误信息。现在的情况是，因为这个错误，表单直接失效了——根本不会向Stripe发送任何POST请求，每次点提交都会弹出同样的错误。

我用的是Node.js服务器，下面是相关的代码文件：

首先是出现错误的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!');
    }
  }
});

然后是Node.js的server.js：

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：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stripe Payment</title>
  <script src="https://js.stripe.com/v3/"></script>
  <style>
    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);
    }
  </style>
</head>
<body>
  <form id="payment-form">
    <div id="payment-element">
      <!-- Elements will create form elements here -->
    </div>
    <button id="submit">Submit</button>
    <div id="error-message">
      <!-- Display error message to your customers here -->
    </div>
  </form>
  <script src="../js/checkout2.js"></script>
</body>
</html>

麻烦大家帮我看看问题出在哪，怎么解决这个错误，让支付流程正常跑起来？

备注：内容来源于stack exchange，提问作者cody