Ecommerce for Statamic

Checkout form

Outputs a form to perform a transaction.


URL to redirect to after submission.
URL to redirect to if there are errors. If you leave this blank it will return to the current page.
URL to redirect to if the cart is empty.
Allows you to set any number of HTML attributes on the <form> tag. Attribute and value should be separated by a colon : and you can specify multiple attributes by pipe | delimiting them.
eg. attr="class:my-form|data-this:that"
A pipe | delimited list of required fields.
If you’d like to perform a quick checkout, specify the URL to a product here. You won’t need to add the product to your cart manually.
If you specify a product, you can also allow the user to specify the price by setting this to yes and using a price field.
If you are specifying a product, you can specify the price yourself.
If you are specifying a product, you can add extra data here. Pipe delimited, colon separated values, eg. size:small|color:red
If you are using multiple gateways and want to specify one, enter the short name here. Note that if you use this parameter, you can’t use the gateway formĀ field.


You can submit any of the following fields in your checkout form. The payment fields may need to be renamed to gateway specific names when using gateways such as Stripe.

  • first_name
  • last_name
  • email
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_state
  • billing_zip
  • billing_country
  • shipping_first_name
  • shipping_last_name
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_state
  • shipping_zip
  • shipping_country
  • number
  • cvc
  • expiry_month
  • expiry_year
  • gateway Not available when using the gateway parameter
  • custom_data[my_field]

To capture custom fields (anything that isn’t listed here), use the custom_data field.

<input type="text" name="custom_data[phone]" value="{{ custom_data:phone }}" />


If your cart is empty, this will return true.
Customer data
If you are using a multi-page checkout or your customer has previously saved their details to session, you can output their details within this tag pair using any of the fields mentioned above, surrounded by double curly braces. eg. {{ first_name }}
If there are no details saved to session, it’ll try to find data saved to the member’s profile. No need to use {{ member:profile }} tags.
Outputs any saved custom data fields.


{{ bison:checkout_form return="/order-complete" }}
  {{ if no_results }}
    <p>You can't checkout with an empty cart</p>
  {{ else }}
    <label>Card Number</label>
    <input type="text" name="number" />
    <input type="text" name="cvc" />
    <label>Expiration Date</label>
    <input type="text" name="expiry_month" />
    <input type="text" name="expiry_year" />
    <input type="submit" value="Submit Payment" />
  {{ endif }}
{{ /bison:checkout_form }}

Problem with this page? Edit it on Github.