How to Create a Stripe Subscription Form
In this tutorial, we will learn how to create a hosted form to accept recurring payments via Stripe.
Our Stripe recurring payments form can be shared with a direct link:
We can also embed the form on any website inline or as a popup form.
1. Create products in Stripe
If you already have products and plans set up in your Stripe account, you can skip this step.
Otherwise, head over to your Stripe dashboard and go to Products, and add products and prices for them. Say you want to subscribe people to monthly coffee / tea delivery. Your two products would be Coffee and Tea. For each product you can create Prices, say a price item Sencha for Tea, with a monthly price of $20.
You can learn more here.
2. Create a new form and enable Stripe
Create a free account on FormCrafts, if you don't have one. On your dashboard click on New form → Blank form.
Before we add fields, we will enable the Stripe addon, via Addons → Payments → Stripe.
Enable Test mode for now. Note that products and prices created in test mode in Stripe are only available in test mode, and vice versa.
3. Add fields to the form
We will now add some fields to our Stripe form.
Go to Add Fields, and add one-line-text fields and label them: Your Name, Address, Postal Code, and City. Add an email field, a checkbox field, and a submit field.
Lastly, add a Stripe field via Add Fields → Payments → Stripe.
4. Allow plan selection in the form
Now we have to configure the checkbox field to work with our Stripe plans. The options in a checkbox field use this format:
In this case, the value for each option would be the Price ID and the text would be how we want to describe the plan to the front-end user.
We can skip manually entering the options, by using the Autofill → Stripe → Subscription Plans option in our checkbox field.
Note the field ID of our checkbox field - say field21. Now edit the Stripe field, go to the Subscription tab and enter the field ID in square brackets under Plan ID.
5. Configure customer info
Remember the personal info fields we added initially? Those are saved in FormCrafts but we also want them to be saved in Stripe against that customer.
Go to Addons → Payments → Stripe, and click on Customer Details. Here we can map our form fields to Stripe columns, using field labels.
6. Test the form
Our form is ready. Click on Preview (top-right corner). Since the Stripe addon is in test mode we can simulate a payment using a test card number: 4242 4242 4242 4242
You can learn more about card testing here.
Once you are ready to go live, head back to the form edit page, go to Addons → Payments → Stripe and uncheck Enable Test Mode.
7. Stripe form templates
There is so much more you can do with payment forms. View our template gallery for inspiration on Stripe payment forms.