Using this block, you can enable your users to manage their subscriptions and purchases on your Softr app. So, let's see what the steps are involved in the setup.
The block is supposed to work with Stripe and get all the purchase and subscription info from there, so, first of all, you need to integrate a Stripe checkout with your Softr app.
<aside> 💡 In our example we are going to use the Pricing block along with Stripe Checkout integration, which will link your users to a separate Stripe checkout page.
However, you can also use the Simple Checkout Form instead (with or without the Pricing block). All the subscription and purchase info of your users processed through the Simple Checkout Form will be available via the Simple Billing Form.
</aside>
As soon as you're done with Stripe integration, you can proceed with setting up a Pricing block, where you offer your Stripe products/subscriptions to your users.
Below, you can see a product that we've set up on Stripe (available in the Products section of your Stripe dashboard).
A product page on Stripe
Now, we are going to add this product on our Pricing block in Softr. Below, you can see how it's configured.
Product added in Pricing block
As you can see, we've set the Button action to Stripe checkout and enabled Recurring payments, as the product we've added is a subscription. Moreover, we've copied the Monthly and Yearly price IDs from the product page on Stripe as well as added Success and Cancel URLs, which are mandatory. You can find more info on configuring the Pricing block here.
Other subscription plans or products on your Pricing block can be configured the same way. You might also need to provide your users with coupon codes. So, let's review that part as well.
Coupons can be created under Products => Coupons. Further on, you need to add a Promotional Code for your coupon, and the Name of your Promotional Code is what you should give to your users to use on checkout. Below you can see how that's set up.
Setting up a Coupon and Promotional Code
We'll use this code ("test1234") later on in this guide when demonstrating the checkout and billing management process from your users' standpoint.
So, now, let's proceed to setting up the Simple Billing Form.
We are just going to add the Simple Billing Form block on a separate page and configure it. Let's quickly go through the block settings.
Simple Billing Form overview