时间戳

首页 > 解决方案 > 如何使用 React 在 Stripe 中对已保存的卡进行收费？

reactjs - 如何使用 React 在 Stripe 中对已保存的卡进行收费？

问题描述

我目前正在将 Stripe 支付网关集成到 Meteor 应用程序中。该应用程序需要保存客户卡以供以后使用。我能够创建客户对象，然后创建付款意图。我第一次能够创建费用。现在我想重新加载保存的卡，我已将客户 ID 传递给 paymentIntent 但出现错误。以下是我的客户端和服务器代码。

客户端

// code to retrieve customerObj

customerId = getCustomerDetails() // 

// Generate Paymentintent with this customer id.

let paymentIntent = generatePaymentIntent(cusomterId) ; // calls server functions and generates payment intent 
      try {
        const someAsync = await new Promise((resolve, reject) =>
          Meteor.call(
            "v1/handleGetPaymentIntent",
            { customerId },
            (err, res) => {
              if (err) return reject(err);
              resolve(res);
            }
          )
        );

        clientSecret = someAsync.result.client_secret;

        const rs = await stripe.confirmCardPayment(clientSecret);
        // OPTION 1: I have tried this without payment_method option(Since I am trying to load a saved card) but I am getting an error. 

    // OPTION 2 : I have even tried the below 
    const rs = await stripe.confirmCardPayment(clientSecret, {
          payment_method: {
            card: card,
            billing_details: {
              name: "Jenny Rosen",
            },
          },
        });


        if (rs.error) {
          // Show error to your customer (e.g., insufficient funds)
          console.log("final message from ", rs.error.message);
        } else {
          // The payment has been processed!
          if (rs.paymentIntent.status === "succeeded") {
            console.log("success");
             
          }
        }

//

错误

**OPTION1 ERROR:** a final message from  A payment method of type card was expected to be present, but this PaymentIntent does not have a payment method and none was provided. Try again providing either the payment_method or payment_method_data parameters.


**OPTION2 ERROR**
IntegrationError: Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: null.
    at new o (https://js.stripe.com/v3:1:2923)
    at y (https://js.stripe.com/v3:1:25332)
    at https://js.stripe.com/v3:1:146495
    at Y (https://js.stripe.com/v3:1:29214)
    at https://js.stripe.com/v3:1:149075
    at Y (https://js.stripe.com/v3:1:29214)
    at Z (https://js.stripe.com/v3:1:30560)
    at ui (https://js.stripe.com/v3:1:153621)
    at https://js.stripe.com/v3:1:167556
    at https://js.stripe.com/v3:1:15358

不知道如何进一步进行。需要帮助。

标签： reactjsmeteorstripe-payments

解决方案

Client Secret 来自 Payment Intent，您必须首先在服务器端使用 Customer ID 及其附加的 Payment Method ID 创建它。

https://stripe.com/docs/payments/save-and-reuse#web-create-payment-intent-off-session

推荐阅读