How can I pay Stripe with saved credit card? - stripe-payments

Question

I'm using Intent API(currency, amount only) and confirmCardPayment and Stripe rendered HTML input to checkout.
Now I want to implement saved credit cards, I can save it, but I don't know how to use it to pass to confirmCardPayment.
My currently working confirmCardPayment code is this
Stripe.confirmCardPayment(intent.client_secret, {
payment_method: {
/**
* I'm using Vue here
* If I'm using a saved card, what should I pass here?
**/
card: this.$refs.stripeCardRef.cardNumberElement,
},
setup_future_usage: "off_session",
});
If I'm using a saved card, what should I pass to confirmCardPayment, and also Intent API(I'm using currency, amount only right now)?
So I can use stripe.paymentMethods.list to get a customer's all saved credit cards, and return it to the front-end like this:
// Server
export async function listPaymentMethods(userId: string) {
const customer = await getOrCreateCustomer(userId);
return stripe.paymentMethods.list({
customer: customer.id,
type: "card",
});
}
Then, my front-end get the response like this
{
"object": "list",
"data": [
{
"id": "pm_1GuBTiICxYQTNr22LwKB6rfy",
"object": "payment_method",
"billing_details": {
"address": {
"city": null,
"country": null,
"line1": null,
"line2": null,
"postal_code": null,
"state": null
},
"email": null,
"name": null,
"phone": null
},
"card": {
"brand": "visa",
"checks": {
"address_line1_check": null,
"address_postal_code_check": null,
"cvc_check": "pass"
},
"country": "US",
"exp_month": 1,
"exp_year": 2023,
"fingerprint": "riI755UKjfafxa3C",
"funding": "credit",
"generated_from": null,
"last4": "4242",
"networks": {
"available": ["visa"],
"preferred": null
},
"three_d_secure_usage": {
"supported": true
},
"wallet": null
},
"created": 1592201250,
"customer": "cus_HPOXLjeqF24rBn",
"livemode": false,
"metadata": [],
"type": "card"
}
],
"has_more": false,
"url": "/v1/payment_methods"
}
How can I use this response data to confirmCardPayment?
Should my intent API need to be changed also?

Answer 1

This flow is covered in Stripe's documentation here: https://stripe.com/docs/payments/save-and-reuse#web-create-payment-intent-off-session
The idea is that you pass the existing PaymentMethod id pm_12345 client-side when you confirm the PaymentIntent like this:
stripe.confirmCardPayment(
intent.client_secret,
{
payment_method: intent.last_payment_error.payment_method.id
}
).then(function(result) {
if (result.error) {
// Show error to your customer
console.log(result.error.message);
} else {
if (result.paymentIntent.status === 'succeeded') {
// The payment is complete!
}
}
});