How to Build a Stripe Order Form

  1.  Go to Add-Ons -> Stripe. You will see 4 api key fields here. To find your Stripe api keys, login to Stripe dashboard, go to Account Settings -> API Keys. Enter the keys.
    stripe-keys
    Here, you will also find the option to choose between Live Mode and Test Mode. Test Mode allows you to use Stripe’s demo data to simulate transactions (read more).
  2. Now, let us make a form to order sandwiches online. First, we add a Dropdown field which allows users to select the sandwich they want.
    In the Options box of our field, we enter our menu in this format:
    10==Smoked Mushroom Spinach
    Here, the part to the left of == is the value assigned to the item, and the part to the right of == is what the user sees.
    stripe-dropdown
    Also note the field ID of this field. In this case, it is field28
  3. Next, we add a simple One Line Input field, which allows users to enter the quantity they wish to order. Nothing fancy here. Note the field ID: field29
    stripe-one
  4. Now, we add a Checkbox field, which allows users to select Extras. This field also has an Options column, which works similar to what we saw in Step #1. We are not greedy, so we price all are extras at $2 each. Note the field ID: field30
    stripe-extras
  5. Lastly, we add the Stripe field. Go to Add Field -> Payments -> Stripe. So, how do we decide the final price? We add the sandwich price and the price of extras, and then multiple it by the quantity:
    [ ( Sandwich Price + Extras ) * Quantity ]
    Substituting the field IDs here, we get:
    [ ( field28 + field30 ) * field29 ]
    This is what we enter in the Amount column of our Stripe field:
    stripe-final
  6. That’s it. Our form is ready:
    final-form