phillip9345

[wicked monolith]

Do you follow this guide to collect payment method for Subscription? https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements

You shouldn't need to create a separate Payment Intent

For subscription with trial, pending_setup_intent will be returned

You can expand the pending_setup_intent and follow this guide (from Step 5 onwards) to collect the payment method, which the customer will be charged to this saved payment method after trial ends: https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements#collect-payment-details

[fluid kernel]

@wicked monolith thanks for the fast reply. So you mean this isn't necessary?

 const params: Stripe.PaymentIntentCreateParams = {
    payment_method_types: ['card'],
    amount: 1999,
    currency: "eur",
};

const paymentIntent = await stripe.paymentIntents.create(params);

... ^but this returns a client_secret which I need to mount the elements right?

elements.value = stripe.value!.elements({ clientSecret: client_secret })
addressElement = elements.value.create('address', { mode: 'billing' });
paymentElement = elements.value.create('payment')
addressElement.mount('#address-element')
paymentElement.mount('#payment-element')

[wicked monolith]

Yup! You shouldn't need to create a separate Payment Intent for this.

When you create the Subscription with trials, the steps will be:

1. Create subscription and expand pending_setup_intent in the request
2. Get the Setup Intent client secret from the pending_setup_intent and return it to client for Payment Element to render
3. Follow this guide to continue collecting the payment method: https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements#collect-payment-details

[fluid kernel]

Awesome I'll give it a go! Sorry it's my first time using Stripe – lots of information. Is it possible to keep this thread open in case I have more questions regarding this?

[wicked monolith]

No problem! We are happy to help 🙂

Threads in this channel will usually be closed if it's been idled for a while (~45 mins to an hour). If this happens, you can always come back to this channel for any follow up question

[fluid kernel]

got it. thanks, I appreciate it

@wicked monolith To create a subscription and get the subscription.pending_setup_intent.client_secret to render the elements (address and payment element) I will need to pass a customer (customerId) to the subscriptions.create API; to create a customer, I would like to add his name and address. However, to retrieve this data I would need the address element first...

Is this what I need to do?

1. get customer ID: create a customer by only passing his email as information
2. create a subscription and retrieve the subscription.pending_setup_intent.client_secret
3. use the subscription.pending_setup_intent.client_secret to render the Address and Payment element
4. Now, I can get the name and address of the customer... Should I now call some "updateCustomer" API to update his name and address?
5. follow the guide you mentioned (https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements#collect-payment-details) from step 5 - 8

Is this what I need to do?

[wicked monolith]

Yes, this flow looks right to me

[fluid kernel]

@wicked monolith For the 2nd step (create a subscription and retrieve the subscription.pending_setup_intent.client_secret):

Will the customer already receive an invoice after that and get signed up for the trial? Or will that happen after I call stripe.confirmSetup?

[wicked monolith]

It'll be the former case that the customer will receive an invoice aftre signing up the trial regardless whether stripe.confirmSetup has been made

[fluid kernel]

Ah that's unfortunate... This is the form that I want to accomplish (just with Stripe UI elements)... I only want to subscribe the user after he filled in his details and pressed the button. Is this possible? The problem is, that I will need the client_secret (which I get only after I created a subscription) to render the form elements (address and payment form)...

Is there a solution?

[wicked monolith]

Ah I see! This is possible. The steps will be:

1. Use Setup Intent to collect the payment method from Step 1 of the guide: ~~https://stripe.com/docs/payments/save-during-payment?platform=web~~ https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements
2. Create the subscription and set default_payment_method to payment method in created in Step 1

This will ensure that payment method is always collected before creating a subscription.

[fluid kernel]

Thanks! on the page only paymentIntent is mentioned. Setup intent = payment intent?

Because I have already done that to get the client secret?

const params: Stripe.PaymentIntentCreateParams = {
    payment_method_types: ['card'],
    amount: 1999,
    currency: "eur",
};

const paymentIntent = await stripe.paymentIntents.create(params);

return paymentIntent;

[wicked monolith]

I'm so sorry! I shared the wrong link

This should be the one: https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements

Setup Intent is to collect the payment method without charging any amount

Setup Intent (without amount) and Payment Intent (with amount) are different.

[fluid kernel]

Got it. I don't want to charge the customer right away, I just want to collect his payment details and charge him automatically after the free trial ends. Which I assume should happen automatically after that? If Stripe has the payment details linked

[wicked monolith]

Yes, you're right! If the payment method is collected is saved via Setup Intent and set it as default_payment_method of the Subscription, customer will be charged automatically after the trial ends

[fluid kernel]

thanks! I'll give it a try. Hopefully I can get it working

[wicked monolith]

You may use test clock to advance the time in test mode to give it a try: https://stripe.com/docs/billing/testing/test-clocks

[fluid kernel]

@wicked monolith 1. Use Setup Intent to collect the payment method from Step 1 of the guide:
Like this?

const params: Stripe.SetupIntentCreateParams = {
    payment_method_types: ['card'],
};

const setupIntent = await stripe.setupIntents.create(params);

2. Create the subscription and set default_payment_method to payment method in created in Step 1
   How?

const subscription = await stripe.subscriptions.create({
    customer: customerId,
    items: [
        {
            price: price,
        },
    ],
    trial_period_days: 14,
    // use payment method just as in setup intent?
    default_payment_method: 'card'
});

[wicked monolith]

Completing the full flow in https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements will be required, i.e. return the client secret to frontend to render Payment Element to collect the payment method details first. Only when payment method is collected successfully, then payment method ID (pm_xxx) will be available in Setup Intent, which can further pass to the default_payment_method of the Subscription