How to Create a Stripe Order Form

Step 1

We will start with a blank form and add some basic information fields, like

  1. one-line-text field labelled name
  2. email field labelled email
  3. one-line-text field labelled address
  4. one-line-text field labelled zip code
  5. dropdown field labelled country
  6. checkbox field labelled choose cupcakes with these options:
    2.5==Surprise Me
  7. checkbox field labelled cupcake quantity with these options:
  8. checkbox field labelled express with one option
    10==Include Express Delivery ($10)
  9. lastly we add a Stripe field, via Add Fields → Payments → Stripe.

Our form should look like this:

Step 2

We have the fields but we need to tell Stripe how much to charge. We use FormCrafts' math formulas for that. When you edit the Stripe field you will see a Charge Amount column. In our case the charge amount is the product of cupcakes selected, and quantity, plus the express delivery.

( Choose cupcakes * Cupcake quantity ) + Express Delivery

However, we have to use field IDs. We note the respective field IDs for each of those fields, and put them in square brackets to arrive at our math formula:

[ (field21*field22) + field26 ]
Using math formulas to set charge amount
Using math formulas to set charge amount

We can click on Preview on the top-right corner to preview our form in action.

Step 3

Lastly, you need to connect FormCrafts to your Stripe account.

On the form edit page, go to Addons on the top-left corner → Payments and click Enable next to Stripe.

Enable stripe form
Enable stripe addon

Enable Test Mode for the time being.

Remember the personal info fields we added - like name, email etc? FormCrafts will store those fields but it is also a good idea to store that information against the charge in Stripe.

Click on Charge Details. Here you can map Stripe columns to their respective form fields, by using the field label, enclosed in square brackets.

Map form fields to Stripe charge info
Map form fields to Stripe charge info

If you want to create customers in Stripe you would edit the Stripe field, and check the option Save Customer Info in Stripe. Next go back to Addons → Payments → Stripe and click on Customer Details to map form fields to Stripe customer columns.

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

Using Stripe test card

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.