在单页结账时使用 Stripe Payment 元素改变客户详细信息

Question

I'm migrating an application from Stripe's 'card' element to the newer 'payment' element.

If I understand correctly, the client secret from the PaymentIntent is now required to create and mount the payment element. In order to create the PaymentIntent, we need the customer to have been created and the amount.

From the docs:

Previously:

const stripe = Stripe('pk_test_qblFNYngBkEdjEZ16jxxoWSM');
const elements = stripe.elements();

Now:

const stripe = Stripe('pk_test_qblFNYngBkEdjEZ16jxxoWSM');
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
};
const elements = stripe.elements(options);

My question - the application is a single page on which customers enter details, select quantities (tickets) and enter card details. I'm assuming that this is not feasible with the new payment element, since the customer would not be able to modify their details or change quantity after the payment element has been created.

Am I wrong?

Thank you so much.

Image of existing form for context:

Answer 1

Correct, in this flow you should collect the card details last once the customer is ready to finalize their payment. This would be the recommended approach where you don't let them change the quantity at that point and charge their card as you collect the card details

Otherwise, the best option is to stay on the Card Element so that you collect their card details upfront and only confirm at the next step once they are ready to finalize.

Answer 2

Just wondering if you ever found a solution? I am in the same boat, and this thread is the only thing I found on google for this scenario.

Is it maybe possible to fake a paymentIntent on page load and then create new one/update with info from the form?