How to charge a Saved Card in Stripe using React?

Question

I am currently integrating the Stripe payment gateway into the Meteor application. The application needs customer cards to be saved for later use. I am able to create the customer object and then to Payment intent. I was able to create the charge for the first time. Now I wanted to reload the saved card, I have passed the customer Id to the paymentIntent but getting an error. Below are my Client and Server codes.

Client Side

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

// 

Error

**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

Not sure how to proceed further. Help needed.

Answer 1

The Client Secret comes from the Payment Intent, which you have to create first on the server side, using both the Customer ID, and their attached Payment Method ID.

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