Stripe /v1/payment_intents/:id/confirm 返回 HTTP 400 “Received unknown parameters”（Stripe Elements 和 React）答案

【问题标题】：Stripe /v1/payment_intents/:id/confirm returns HTTP 400 “Received unknown parameters” (Stripe Elements and React)Stripe /v1/payment_intents/:id/confirm 返回 HTTP 400 “Received unknown parameters”（Stripe Elements 和 React）
【发布时间】：2021-10-13 12:25:01
【问题描述】：

我在我的项目中使用@stripe/react-stripe-js 和@stripe/stripe-js 来处理信用卡支付。

我已经设置了一个 webhook API 和一个支付意图 API。这些作品很棒！当我调用stripe.confirmCardPayment()时出现问题

当我尝试提交付款时，我从 Stripe 端点 POST /v1/payment_intents/:id/confirm 收到 HTTP 400 错误。 (https://api.stripe.com/v1/payment_intents/pi_abc/confirm)

我的代码基于 Stripe 示例代码，见下文：

const handleSubmit = async event => {
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const payload = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(CardNumberElement)
    });
    console.log("[PaymentMethod]", payload);
    const paymentIntentURI = 'https://api.mydomain.com/v1/create_payment_intent'
    const data = {items:'product_123'}

    const response = await fetch(paymentIntentURI,{
      method: 'POST', 
      mode: 'cors', 
      cache: 'no-cache', 
      credentials: 'same-origin', 
      headers: { 'Content-Type': 'application/json' },
      redirect: 'follow', 
      referrerPolicy: 'no-referrer', 
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    });
    const responseJSON = await response.json();
    const clientSecret = responseJSON?.clientSecret ?? '';
    payWithCard({stripe, card:payload.paymentMethod.card, clientSecret})
  };

  const payWithCard = ({stripe, card, clientSecret}) => {
    //loading(true);
    stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: card
      }
    }) 
    .then(function(result) {
      if (result.error) {
        // Show error to your customer
        console.error(result.error.message) //<--- THIS LINE LOGS THE ERROR MESSAGE
        showError(result.error.message);
      } else {
        // The payment succeeded!
        orderComplete(result.paymentIntent.id);
      }
    });
  };

日志显示错误：

Received unknown parameters: brand, country, funding, networks, three_d_secure_usage

package.json

"@stripe/react-stripe-js": "^1.4.1",
"@stripe/stripe-js": "^1.16.0",

直到stripe.confirmCardPayment()，Stripe 仪表板中的一切似乎都是正确的。

POST /v1/payment_intents/:id/confirm 拒绝负载中的某些键值对。

我做错了什么？亲切的问候/K

【问题讨论】：

标签： javascript reactjs stripe-payments

【解决方案1】：

我应该不从stripe.createPaymentMethod() (payload.paymentMethod.card) 的结果中取出卡片 - 这样做我似乎拿到了错误的卡片对象。

从elements.getElement(CardNumberElement) 获取卡片似乎获取了正确的卡片对象！

这实际上大大简化了代码：D

const payWithCard = () => {
    const card = elements.getElement(CardNumberElement)
    console.log('payWithCard', card)
    stripe.confirmCardPayment(clientSecret, {
      receipt_email: email,
      payment_method: {
        card: card,
        ...

【讨论】：