How to Create a Stripe Subscription Form

Step 1

If you already have 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.

Step 2

Now we head to FormCrafts. From our dashboard we will create a new 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.

We will now add some fields. 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.

Stripe subscription form

We now have to add our Stripe plans to our checkbox field. The options in a checkbox field use this format:

Value==Text

In this case, the value for each option would be the price ID and 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

Step 3

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.

Our form is ready. Click on Preview on the 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.