Stripe no-code portal and Pricing table
How to setup and implement the Stripe no-code portal and Pricing table in a Bubble app
Stripe has a new no-code customer portal from where customers can manage everything related to their connected Stripe account: payment details, invoices, and subscriptions in one place.
This customer portal can also be set up for Stripe Connect.
From Stripe:
To let your customers manage their accounts on their own, use Stripe’s hosted solutions, like the customer portal and hosted recovery flows. You can set up and use these experiences without writing any code.
We also have the possibility to embed a pricing table in our application. This subscription table is hosted by Stripe and directly connected to our client Stripe account.
The Pricing table embedded in a Bubble app:
We'll use these assets: when we want to shorten the development time and when everything related to payments, invoices and subscriptions is standard.
The goal of this article is to provide information and examples on the features and services of Stripe no-code assets, along with steps on how to set up the service and implement it in a Bubble application.
- 1.First you need to create an Stripe account where you can set up an account or you need access as developer in your client's Stripe account, to do that, the account admin have to invite you to the account.
- 2.The Pricing table is easily set up from the Stripe dashboard:
- 1.
- 2.
- 3.
- 1.Activate a customer portal link
- 2.Configure the portal
- 3.Get your portal login link
- 1.Embed the pricing table in a HTML element in your Bubble app.
- 2.Remember to pass your user's unique id as the stripe parameter client-reference-id if you are allowing payments only to logged in users so you can match your stripe customer with your Bubble user
- 3.Create a webhook to capture the checkout.session.completed event. You can then:
- 1.If your users have to be logged in when subscribing: use the client_reference_id your passed with the Pricing Table to match the Stripe customer with your Bubble user
- 2.If you want to create the user at the same time they are subscribing for the first time: search users by the received customer id and:
- 1.Create a new user if there isn't one with that customer id
- 2.Update the existing one in case the user already exists
- 4.You can see on the sample app a simple workflow to create or update a user. It is not the purpose of this article to describe here all the workflows required from this point on.
- 1.Add an API Call to the API Connector to open a portal session if you already have your stripe customer id. This call will generate a session URL that will log the user in the customer portal directly:
The API call
Workflow: API Call + open Stripe session
2. You can redirect your users to the customer portal using their emails or your general login link:
Using your login link
Using your login link + providing user's email
Note that in order to open the portal, you need your customer email or stripe customer id. And your user has to be already your stripe customer.
Last modified 8mo ago