CODEWITHSUNDEEP
node.jsreactjsstripe-payments
oderfla
oderfla

Reputation: 1797

How to update credit card payment in stripe

I have a flow using nodejs and reactjs to let users subscribe to my site. So when user logs in he can see a few packages. When the user selects a package and enters card details, I do the following:

1 - Create a new customer, based on user details (name, email etc, fetched since user logged in)

2 - Create a subscription for the newly create customer according to price_id selected

3 - Collect in the frontend the card number/cvc/expire date with:

const cardElement = elements.getElement(CardElement);

4 - Make a call to stripe from frontend with:

const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
        card: cardElement,
        billing_details: {
            name: name,
        }
    }
});

Im not sure if this was the best flow. However, it is working. I also managed updating subscription and canceling it. However, Im having an hard time in changing credit card details. What I understood from docs I should use the same call as I did when I create the card payment. So I collect again the credit card number and call again the same function:

const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
        card: cardElement,
        billing_details: {
            name: name,
        }
    }
});

However, the call is done to:

https://api.stripe.com/v1/payment_intents/pi_XXXX/confirm

and returns a 400 with this info:

type: "invalid_request_error", code: "payment_intent_unexpected_state", doc_url: "https://stripe.com/docs/error-codes/payment-intent-unexpected-state"

Should I use something else to update credit card info? Or am I calling it in the wrong way?

Upvotes: 2

Views: 2962

Answers (1)

hmunoz
hmunoz

Reputation: 3361

Your initial flow of calling confirmCardPayment() is correct, that is what is recommended in Stripe's docs too: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements.

hard time in changing credit card details. What I understood from docs I should use the same call as I did when I create the card payment.

To just collect card details and create a PaymentMethod, you should call createPaymentMethod() [0] from Stripe.js. That will convert a customer's card into a PaymentMethod like pm_123.

You will then send that PaymentMethod to your backend server, where (using your server-side Stripe API library like stripe-node) you'll attach it to a Stripe Customer [1] and also update as the Customer's default PaymentMethod for recurring payments [2].

[0] https://stripe.com/docs/js/payment_methods/create_payment_method

[1] https://stripe.com/docs/api/payment_methods/attach

[2] https://stripe.com/docs/api/customers/update#update_customer-invoice_settings-default_payment_method

Upvotes: 3

Related Questions