How to create a checkout form

Build a checkout form from choice blocks, a calculated field and a payment block: price the options, add shipping, apply a discount, and charge the total through Stripe.

A checkout form lists what you sell, works out a price from what the visitor picked, adds shipping or tax, applies a discount code, collects the buyer's details and takes the payment, all on one shareable page.

Tinyform builds it from pieces you already know. A multiple choice, checkbox or dropdown block lists the products; a calculated field holds the running price; conditional logic adds to it when an option is chosen; and a Payment block pointed at that field charges whatever it works out to.

1. List the products

   Insert a Multiple choice, Checkboxes or Dropdown question and name one option per product or variant. Checkboxes let a buyer pick several; multiple choice or a dropdown picks one.

2. Add a calculated field for the price

   Insert a Calculated fields block and add a field called Price, of type number, starting at 0. If everything you sell shares a base price, start it there instead.

3. Price the options

   Insert a Conditional logic block, or press Add conditional logic in the product question's settings, and add one rule per option: when the product question Contains (or Is) that option, Calculate Price Add its amount. A buyer who picks two products triggers two rules and the field holds the sum.

4. Add shipping or tax

   A flat fee is one more rule with the same shape; make its condition Price > 0 so an empty basket is never charged shipping. A percentage is a Multiply action, so 20% tax is Price Multiply 1.2, and it should sit last so it applies to the whole total.

5. Take a discount code

   Add a Short answer question for the code and leave it optional, so a buyer without one is never blocked. One rule per code: when the answer Is that code, Multiply Price by 0.9 for ten percent off, or Subtract a fixed amount.

6. Collect the buyer's details

   Add the name, email, phone and address questions you need for fulfilment, then a New page block so the checkout sits on its own page and the total is settled before anyone reaches it.

7. Add the payment block

   Type /payment. Press the chevron on the right of the price and choose the Price calculated field, pick the currency, and press Connect with Stripe if this workspace has not connected before.

   Tinyform

   

   The published page shows the buyer the amount their choices came to, and that is what their card is charged when they press Submit.

8. Confirm the order

   Finish with a Thank you page. It can mention the products and the Price field, so the confirmation repeats what was bought and what was paid.

Share the finished form from the Share tab, or embed it on your own site. Each paid order appears in Submissions with its amount and a Stripe mark that opens the charge, and the form's row on your dashboard keeps a running total of what it has collected.