reactjsstripe-paymentsstripesstripe-payment-intentstripe-payments-js

How to use Stripe Payment Element with subscription?


enter image description here 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:

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)


Solution

  • 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