Discuss

Stripe Subscriptions

On this page

Intro

With Stripe you can setup subscriptions and checkout pages, where your users can subscribe for your services or products.

Subscriptions and Prices

The first step is to setup your subscription(s) in Stripe Dashboard. Go to: https://dashboard.stripe.com/ and click Products:

Screenshot_1|690x430

Then click the Add Product button:

Screenshot_2|690x430

Add a name for your subscription. It will be displayed on the checkout page:

Screenshot_3|690x430

Then add an optional Description:

Screenshot_4|690x430

Optionally you can add an image to be displayed on the checkout page. We don't want to add an image now.

Scroll down to the pricing section. Set the pricing model to Standard:

Screenshot_5|690x430

Select Recurring Payment:

Screenshot_6|690x430

And then select your currency:

Screenshot_7|690x430

Enter the amount your customers should be charged for the selected billing periond:

Screenshot_8|690x430

And select a billing period:

Screenshot_9|690x430

You can add another pricing (in different currency) if needed:

Screenshot_10|690x430

Then click the Save Product button:

Screenshot_11|690x430

You will need the price id for the checkout, so copy it:

Screenshot_12|690x430

Client-side Flow

You can use the client-side only flow for your subscriptions. This allows you to integrate Stripe Checkout on your site, without using any server-side code.

Make sure the Client-Only Integration is enabled in your Stripe account: https://community.wappler.io/t/getting-started-with-stripe-integration-in-wappler/31295#enabling-client-only-integration

On our page we added a simple Subscribe Now button, which will be used by our users to subscribe for our services/products:

Screenshot_14|690x430

Click the Add New component button in App Structure:

Screenshot_15|690x430

Open the Stripe Category and select Stripe:

Screenshot_16|690x430

Enter your Publishable API key. It can be found on https://dashboard.stripe.com/apikeys

Screenshot_17|690x430

Select Client Side Only in the Flow Type menu:

Screenshot_18|690x430

Open the Mode menu:

Screenshot_19|690x430

And select Subscription:

Screenshot_20|690x430

Enter the success and cancel URLs. These are the URLs where the users will be redirected after a successful payment or if they cancel the order during the checkout:

Screenshot_21|690x430

In the Line Items, paste the Subscription Price ID which you copied earlier from the Stripe Dashboard:

Screenshot_22|690x430

Now, let's setup the Subscribe Now button. Click the button:

Screenshot_23|690x430

Add new dynamic event:

Screenshot_24|690x430

Select Mouse > Click:

Screenshot_25|690x430

And select an action:

Screenshot_26|690x430

Select and add Checkout under the Stripe Component:

Screenshot_27|690x430

Click Select:

Screenshot_28|690x430

And you are done. Clicking the Subscribe button takes your users to the checkout page, where they can pay:

subscription_static|690x405

Server-side Flow

You can also create a server-side checkout it gives more flexibility and options than the client-side integration. In our example we will show you how to work with logged users and get their details for the checkout. In our example we will get the logged in user's details - such as user email, from a database query.

Getting User's Details

We already created a login server action as usual (you already know how to do this) and added a global Identify step in Globals. We will use the Identify value to filter a query in the server-side checkout flow:

Screenshot_1|690x430

Create a new API Action:

Screenshot_2|690x430

We call it - stripe_subscription. Right click Steps:

Screenshot_3|690x430

Add a Single Database Query:

Screenshot_4|690x430

Open the Query Builder:

Screenshot_5|690x430

Add your users table and add the columns you need:

Screenshot_6|690x430

We select the user id and email:

Screenshot_7|690x430

Open the Conditions tab, and select a column to filter by:

Screenshot_8|690x430

This is the id column. Select a dynamic value for the filter value:

Screenshot_9|690x430

And pick the Global Identify step:

Screenshot_10|690x430

Click OK:

Screenshot_11|690x430

Now Right Click the database query step:

Screenshot_12|690x430

Open Stripe > Customers and select List Customers:

Screenshot_13|690x430

This will return a list of our Stripe Customers. We want to filter it using the logged user email, returned by the query step. Select the dynamic data picker for the Email:

Screenshot_14|690x430

And select the email value returned by the query step:

Screenshot_15|690x430

If our user exists in Stripe, then its details will be available for steps after that. If the user does not exist it will be created.

Checkout Session

The next step is to create the checkout session. Right click the List Customers step:

Screenshot_16|690x430

Open Stripe > Checkout and Create Checkout Session:

Screenshot_17|690x430

Here, we need to add the Customer info which we retrieve using the List Customers step. Click the dynamic data picker for the Customer option:

Screenshot_18|690x430

Under List Customers > data select id:

Screenshot_19|690x430

Then open the Items Type menu and select Prices ID List:

Screenshot_21|690x430

Using this option allows you to enter the Subscription Price Id here directly. Useful when we only have one subscription plan only (as it is in our example). If you have more subscription plans you can pass them dynamically from the front end Stripe component.

Click the add new list item button:

Screenshot_22|690x430

And paste your subscription price id here:

Screenshot_23|690x430

Then open the Mode menu:

Screenshot_24|690x430

And select Subscription:

Screenshot_25|690x430

Don't forget to fill your success and cancel URLs in the appropriate UI fields.

Then right click the Create Checkout Session step:

Screenshot_39|690x430

And add a Set Value step:

Screenshot_40|690x430

Its name should be id:

Screenshot_41|690x430

Select a dynamic value for it:

Screenshot_42|690x430

And under the Checkout Session step select id:

Screenshot_43|690x430

Enable Output for the Set Value step and save your API Action:

Screenshot_44|690x430

Close the Server Connect panel. Add a new component in App Structure:

Screenshot_27|690x430

Open Stripe and select the Stripe Component:

Screenshot_28|690x430

Enter your Publishable API key. It can be found on https://dashboard.stripe.com/apikeys

Screenshot_29|690x430

Set the Flow Type to Server Side:

Screenshot_30|690x430

And pick your Session url:

Screenshot_31|690x430

This is the stripe_subscription API Action which we just created:

Screenshot_32|690x430

Then select your button:

Screenshot_33|690x430

Add new Dynamic Event:

Screenshot_34|690x430

Select Checkout under the Stripe Component and add it:

Screenshot_35|690x430

And click Select:

Screenshot_36|690x430

And you are done. Clicking the Subscribe button takes your users to the checkout page, where they can pay. If the customer exists in Stripe, the email will be filled in:

subscription_server|690x405