Ecommerce for Statamic

Checkout form

Outputs a form to perform a transaction.

Parameters

return
URL to redirect to after submission.
error_return
URL to redirect to if there are errors. If you leave this blank it will return to the current page.
empty_cart_redirect
URL to redirect to if the cart is empty.
attr
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"
required
A pipe | delimited list of required fields.
product
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.
allow_user_price
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.
price
If you are specifying a product, you can specify the price yourself.
extra
If you are specifying a product, you can add extra data here. Pipe delimited, colon separated values, eg. size:small|color:red
gateway
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.

Fields

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 }}" />

Variables

no_results
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.
custom_data:my_field
Outputs any saved custom data fields.

Example

{{ 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" />
    <label>CVC</label>
    <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.