Oracle-react

[vapid viper]

There isn't a way to prefill the card information with Stripe's card element (I believe this is partly for PCI reasons). If you want a customer to use their saved credit card details I'd just not display the card element at all, since I assume you'd want to use an existing Payment Method that is already saved to the customer

[idle willow]

But for example sites such as Uber Eats or amazon, they save your credit card details, so do alot of small business ecommerce sites

[vapid viper]

I don't know the specifics of how Uber Eats or amazon implement this, but if they are using Stripe I imagine they're not filling out a card element on the customer's behalf - they likely have a dropdown/some kind of selection form where the user can choose from their saved cards

[idle willow]

Oh, how might I do that?

Do most people have saved cards on their browser to choose from?

I feel that many wouldnt have that. I imagine the average consumer expects to simply fill in card details, and expects it to be saved when they return to purchase again

[vapid viper]

You can grab the full list of a customer's payment methods here (https://stripe.com/docs/api/payment_methods/list)

"I feel that many wouldnt have that. I imagine the average consumer expects to simply fill in card details, and expects it to be saved when they return to purchase again"
That's really up to you and depends on what your integration needs - I can imagine some customers may want the option of using an existing card or adding a new saved card, and so they can end up with multiple saved cards that they may need to choose from

If you want to limit your customers to only have one saved card that would be fine! In that case, you wouldn't need to have them do any selection and you could just have them confirm that they want to make payment with their saved card

[idle willow]

So using "list a customers PaymentMethod"

A user is asked to fill in their credit card details once, and then the next time its saved?
Im not exactly sure how it works

especially because it seems so simple by just changing the params: ```

const paymentMethods = await stripe.paymentMethods.list({
customer: 'cus_8epDebVEl8Bs2V',
type: 'card',
});

[vapid viper]

Are you currently saving a customer's payment methods?

[idle willow]

No, currently I simply ask for their credit card information, and stripe takes care of the rest. Nothing is saved. The next time they come to the site, they have to input payment details again. Which is what I now would like to avoid

Using React element

[vapid viper]

Gotcha - so you'll want to slightly change integration to do this: https://stripe.com/docs/payments/save-during-payment

Basically, you're setting setup_future_usage: off_session (see https://stripe.com/docs/api/payment_intents/object#payment_intent_object-setup_future_usage) on the Payment Intent so that it gets attached and optimized to be used for payments later on

[idle willow]

I have had alot of trouble with Stripe payments.

I am currently using:

import {
  Elements,
  CardElement,
  useStripe,
  useElements,
} from "@stripe/react-stripe-js";
``` for the frontend to collect payment information

and using this controller in the backend:

exports.pay = async (req, res) => {
const { id, amount } = req.body;

try {
const payment = await stripe.paymentIntents.create({
amount,
currency: "CAD",
description: "Payment processing",
payment_method: id,
confirm: true,
});

console.log(payment);
console.log("Payment sent successfully.....");
return res.status(200).json({
  confirm: "abc123",
});

} catch (error) {
console.log(error);

return res.status(400).json({
  message: error.message,
});

}
};

How should I convert this, to save a card during payment as you described?

[vapid viper]

What does your frontend code look like?

[idle willow]

The doc looks far more complicated than my implementation....

one second

My frontend code, written with React, is as follows:

'handleSubmit' will then make an action call to the backend when the card details are submitted

[vapid viper]

Can you show me the handleSubmit function?

[idle willow]

sure thing

And this is where the post request leads to

Do you know what I should add to make it save the payment details @vapid viper ?

[vapid viper]

I would suggest changing your integration to not use the createPaymentMethod call client-side and instead call confirmCardPayment using the card element + the payment intent secret.

What you have won't work if a payment needs additional actions (like auth) to complete.

[idle willow]

so you want me to replace the exports.pay function above with this?

its that simple?

[vapid viper]

Let me back up for a minute

So there are a couple of different paths you can go down:

• Change a lot of your integration to use confirmCardPayment client-side. This wouldn't be as simple as replacing your exports.pay function (and exports.pay is server-side anyways, while confirmCardPayment is client-side). This change would require a larger restructuring of your code flow, where you create the Payment Intent first (removing confirm: true) and then use that clientSecret in the call to confirmCardPayment client-side with the information from the card element. We walk through this whole flow here (https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements). Once you've got that set up, it would fairly easy to modify that integration to easily save payment methods by passing in setup_future_usage with the Payment Intent
• Alternatively, you could change your PaymentIntent creation request to pass in setup_future_usage: off_session (or on_session depending on your use case) as well as a customer. You would then need to check the status of the PaymetnIntent after it's creation and add in logic to properly handle when additional actions (like authentication) are required (the status of the intent will be requires_action