3

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:

  • 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)

johnnyshrewd
  • 1,038
  • 2
  • 12
  • 29

1 Answers1

2

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
alex
  • 1,923
  • 11
  • 9
  • I tried this but on your step 2 it seems to not let me create the subscription without a payment method. I get `This customer has no attached payment source or default payment method. Please consider adding a default payment method` – johnnyshrewd Dec 05 '22 at 11:19
  • I manage to get this to work, but in step 2 I had to set the payment_behavior to default_incomplete, then I expanded the latest_invoice.payment_intent. I hope this is the correct way. – johnnyshrewd Dec 05 '22 at 12:05
  • 1
    the documentation mentions that you need to use `payment_behavior=default_incomplete` but will add it to the reply for completeness – alex Dec 06 '22 at 03:04
  • @johnnyshrewd how did you handle this issue exactly. did you find the best practice for the payment element use? – tiakham Aug 25 '23 at 20:09