🎉 Simple Commerce v3.0 is out! Includes new features & some big quality of life improvements.

Simple Commerce Logo

Checkout

This tag allows you to checkout the cart. Inside the tag, you can use any of the data from your cart. The redirect parameter is recommended so you can redirect the customer to a success page when they're order has been confirmed.

Like with the update cart tag, you can also pass information to the customer entry. Don't forget the email field though as it's required.

1{{ sc:checkout redirect="/thanks" }}
2 {{ if is_paid }}
3 <p>Checkout complete!</p>
4 {{ else }}
5 <input type="text" name="customer[name]" placeholder="Full Name">
6 <input type="email" name="customer[email]" placeholder="Email">
7 
8 <input type="text" name="gift_note" placeholder="Gift Note">
9 
10 <select name="gateway">
11 {{ sc:gateways }}
12 <option value="{{ class }}">{{ name }}</option>
13 {{ /sc:gateways }}
14 </select>
15 
16 <!-- deal with your gateway stuff -->
17 
18 <button type="submit">Checkout</button>
19 {{ /if }}
20{{ /sc:checkout }}

If you're using an off-site gateway, like Mollie, you can learn about the checkout process, over here.

Hot Tip: I'd highly recommend disabling the button after the user submits the form to prevent them from submitting it multiple times.

Using a single gateway

If you're only needing to use a single gateway, instead of giving the user an option between gateways, you can force the user to use a specific gateway.

You simply need to specify the handle in the {{ sc:gateways }} tag.

1{{ sc:checkout redirect="/thanks" }}
2 {{ if is_paid }}
3 <p>Checkout complete!</p>
4 {{ else }}
5 <input type="text" name="customer[name]" placeholder="Full Name">
6 <input type="email" name="customer[email]" placeholder="Email">
7 
8 <input type="text" name="gift_note" placeholder="Gift Note">
9 
10 {{ sc:gateways:stripe }}
11 <!-- deal with your gateway stuff -->
12 {{ /sc:gateways:stripe }}
13 
14 <button type="submit">Checkout</button>
15 {{ /if }}
16{{ /sc:checkout }}

Successful Redirect

If you specify a redirect parameter on your Checkout form, Simple Commerce will retain the previous cart (eg. the one just checked out) when you use the {{ sc:cart }} tag.

This means, in the Checkout Success/Thanks page, you can use the cart tags like normal.

1<h2>Thanks!</h2>
2<p>Thanks for your order - {{ sc:cart:title }}.</p>

It's worth noting this same behavior works for off-site gateways as well.

Note: The cart information will only be available for 30 minutes after checking out. After which time, the page will start to use a fresh cart.