How to use Stripe Payment Element with subscription?

Question

I have seen examples of how to use the Card Component alongside the Stripe API to create a customer and attach a subscription, but I do not understand how to do this with the Payment Element.

I have a React app that essentially one page has the full sign-up and payment flow. I have:

• An overview of the "Subscription" chosen
• 1 input to collect name
• 1 input to collect email
• Stripe Payment Element (Not Card Element, because I want Apple/Google Pay as well) *When the user gets to this page, I konw nothing about them. The only thing I know is that chose to sign up and subscribe to to a certain plan.

My basic understanding is that Payment Element needs a Payment Intent, and I don't understant how I can create one related to a subscription plan, and essentially without the customer details. Is there a way to use Payment Element, then get some sort of token and then create the customer and add the subscription? (I know you can do this with the Card Element, but I want to do this with the Payment Element ideally)

Answer 1

You can take a look at how to use the Payment Element for Subscriptions on this page: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements

A high level overview of the steps are:

1. Create a customer
2. Create a subscription with payment_behavior=default_incomplete and you would expand either latest_invoice.payment_intent or pending_setup_intent
3. Use the returned PaymentIntent / SetupIntent to initialize the Payment Element