Stripe customer portal provides you an interface for your users to manage their billing history, payment methods, update subscriptions, etc. It saves a lot of development time for any application that requires payments or subscriptions, and also provides a great UX.
In this use case, we will talk about how to build a passwordless authentication flow, using magic links to allow users to access their customer portal, and how to easily integrate subscription plans in your forms using Arengu. It will only take a few minutes.
Go to your Stripe account settings, and click on Customer portal, under the Billing section. There you will find the options to determine the actions you want your users to take when using their customer portal:
For this use case, we don't need any specific configuration, but you will be required to provide some basic options, like privacy policy and terms of service links. You can also customize the appearance of your customer portal using the Branding settings.
You can find more information about the available options on Stripe documentation site.
If you have not already done it, go to the 'Products' section and create a subscription product. You can also create different pricing models for your subscription: billing period, currency, free trial, etc. Customize it according to your needs.
To configure the subscription plan in Arengu, you just need to copy the pricing API ID that starts with price_xxx and paste it in the proper field of the form edition.
Create a form with at least two fields: email address, which we will also use to create a customer in Stripe, and payment field, where we will configure the subscription. Remember to mark both as required.
To configure the payment field you will need:
Now your form is ready to enroll users to a subscription plan.
Bonus tip. If you want to offer coupon codes you can add a field and reference it in your payment field settings and if an user provides a coupon code, it will be verified with your Stripe account if it's valid or not.
Stripe provides you an endpoint to create a portal access for our current users but, to secure this access, we will need to authenticate users first. In this use case, we are going to build a simple passwordless authentication flow composed by:
This form just need one field, the email address, but make sure to use a friendly field ID like email because we will need it to reference this field value in our flow.
Arengu allows you to link logic flows in different stages of your form: between form steps, before submission and after submission. In this case, we will link a before submission flow to retrieve the customer ID from Stripe. So when the user clicks on the button, it will execute the logic: if the user doesn't exist, we will display a custom error message and, if the user exists, we will generate the access link and send it via email.
Bonus tip. Instead of using a passwordless flow with magic link, you can also build a one-time password flow.
As we need the Stripe customer ID to generate the access to the portal, we are going to use the Stripe API to list a customer by an email address.
For this, we will use the HTTP Request action with the following settings:
If the user exists, this request will return the customer ID that we will use in the next flow action:
If the user doesn't exists, it will return and empty array:
Now, let's add an If/then condition filling {{length(getCustomer.body.data)}} as first operand, choosing is greater than as operator and finally adding 0 as second operand:
Now we have two possible branches based on if the user exists or not.
If the user exists, we have the Stripe customer ID, so we are going to use the API to create a session to access the customer portal.
For this HTTP Request you need to specify the following settings:
This request will return the URL to access the customer portal for that user:
Now that we have the URL to access the customer portal, you will need to add a send email action, for this example, we will use our SendGrid native integration but you can use the one you want.This is a native integration, so you just need to fill out some variables like the API Key of your SendGrid account, recipient email, subject, etc.
You just need to include your access link using {{getSession.body.url}} in your email content, here is an example:
Bonus tip. You can always use services like mjml.io to easily build an email template and view the HTML content to paste it in the email action. Just remember to include the access link variable.
To finish this flow, just add a Submit form action including a custom success message.
Go to the Embed tab, and get the snippet code to embed your forms anywhere:
And that's all! Now you have a payment form to enroll users to a subscription plan and another form to allow your customers to access in a secure way to their Stripe Customer Portal to easily manage their subscription.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.