ポピー-payment-element-prefill

[cosmic coral]

Hey there! Payment Element doesn't support prefilling currently, no. What's the use case?

[vagrant plinth]

I want to allow users to not have to manually enter their credit card information every time they make a purchase.
The target audience will most likely not have their credit card information stored in something like 1password or Apple's Keychains.
However, I would also like to have Google Analytics events so that I can track where the users are exiting.

[cosmic coral]

Got it. Generally you'd use the Payment Element to capture payment details for that initial payment, and then save them with Stripe for future usage: https://stripe.com/docs/payments/save-during-payment

Then you can present a UI with a list of saved cards to your customers for them to select for future purchases: https://stripe.com/docs/payments/save-during-payment?platform=web#charge-saved-payment-method

Alternatively, you can integrate some analytical tracking with Checkout: https://stripe.com/docs/payments/checkout/analyze-conversion-funnel

[vagrant plinth]

Thank you. I've already followed the documentation on "Saving Payment Details for Future Use," with little success.

This might be a dumb question, but whenever I make a payment intent, does it mean that I have to create a customer (or fetch an existing one) somehow?

[cosmic coral]

Was there a particular part you struggled with? Happy to talk it through

[cosmic coral]

You don't need to provide the customer parameter, no. But you would do if you were re-using a saved Payment Method

[vagrant plinth]

I have a function that handles payment intents that look something like this

createPaymentIntent(amount: number) {
  return this.stripe.paymentIntents.create({
    amount,
    currency: CURRENCY,
    payment_method_types: ['card'],
    payment_method_options: {
      card: {
        setup_future_usage: 'off_session',
      }
    }
  })
}

A new payment intent is created whenever a user enters the checkout page. That payment intent is later then updated when the user presses the "Checkout" button in the frontend.

I recon I'm missing something for the "saving card details for later" to work

[cosmic coral]

Yep, you need a pre-existing Customer object and to pass the customer parameter when creating the PI

const paymentIntent = await stripe.paymentIntents.create({
  customer: customer.id,
  setup_future_usage: 'off_session',
  amount: 1099,
  currency: 'eur',
  automatic_payment_methods: {
    enabled: true,
  },
});

[vagrant plinth]

I see. I'll include some logic to handle customer object creation before the payment intent starts, and pass the customer.id as you mentioned.

Is this the only thing missing from autofill-like functionality?

[woven vine]

not sure how to how answer that exactly

to be clear, the PaymentElement doesn't support autofilling, passing a customer with existing saved cards won't result in those being prefilled or shown in the UI

[vagrant plinth]

Gotcha. No card details autofill in Payment Elements like in Payment Sessions.
What does the "saving payment details" stuff do if it doesn't do anything to the UI?

Is there a way to provide the user, something like a list of cards that have been saved in Stripe, or something like that?
My goal is to make it so that a user won't have to worry about filling in credit card information after the first payment.

[woven vine]

it saves the details to a Customer object so you can list them , use them for subscriptions, charge the saved cards, build your own UI to list the saved cards and let the user pick one like ynnoj described, etc

[woven vine]

yes, you call our API to list their saved cards(https://stripe.com/docs/api/payment_methods/customer_list), build a UI to show that info, and when the customer picks one, you can call functions like https://stripe.com/docs/js/payment_intents/confirm_card_payment#stripe_confirm_card_payment-existing to attempt payment with the ID of the card they chose

[vagrant plinth]

Thanks, I have a much clearer understanding on this.