CartThrob Multipage Checkout Example Templates?

Question

I'm looking to create a checkout process with CartThrob over multiple pages. Checkout process will use a number of gateways, Paypal, Offline Payments as well as posting directly to an offsite gateway.

Page 1 will collect Billing and Shipping info. Then in the case that we need to take credit card details to post to the gateway, this will be done on page 2.

Wondering if anyone has some example code that may help me here. I'm still looking into the correct way of implementing this but some examples would help loads as the documentation only briefly mentions this in relation to the save_customer_info_form tag, but is not giving me any clues on how to implement it.

Answer 1

If you use the example installation for CartThrob, the default templates have an example of a multi-page checkout:

Assuming you do have that installed, you can go to:

cartthrob settings > installation > template variables and set the checkout page to "shipping" and a shipping page will show up as the first step in the checkout. There's a lot going on in those templates though, and frankly I prefer to start from scratch myself.

So to sum up the process:

1. You can use save_customer_info_form (but I never do) I just use update_cart_form which will do the same thing, but will also allow you to update products if you need to.

2. Add whatever fields you want to capture. (you can find a list of all default acceptable fields here: http://cartthrob.com/docs/tags_detail/save_customer_info_form/) You can also add custom fields using the following syntax:

3. put a return parameter to take you to whatever next page you need or want in the flow. That could be a final checkout page, or a second page in the flow. Whatever you want. The return parameter is what you need.

4. For the payment page, you will need to make sure you've captured all of the required fields. Each gateway lists the required fields on its settings page. I've noted that in the comments below.

Here's a bare-bones example of a 3 page checkout

Billing (page 1) 
{exp:cartthrob:update_cart_form return="store/shipping"}

         First Name: <input type="text" name="first_name"   value="{customer_first_name}" /> 

        Last Name: <input type="text" name="last_name"  value="{customer_last_name}" /><br />

        <input type="submit" name="Submit" /> 
{/exp:cartthrob:update_cart_form}

Shipping (page 2)

{exp:cartthrob:update_cart_form return="store/checkout"}

         Shipping First Name: <input type="text" name="shipping_first_name"  value="{customer_shipping_first_name}" /> 

        Shipping Last Name: <input type="text" name="shipping_last_name"  value="{customer_shipping_last_name}" /><br />

        <input type="submit" name="Submit" /> 
{/exp:cartthrob:update_cart_form}


Checkout (page 3) 

{exp:cartthrob:checkout_form return="" }

<!-- you'll need to get the remaining required fields from the settings for your specific gateway 
go to cartthrob settings > payments > select a gateway to edit / view its settings. If there are any required fields, they will be listed right above: Sample HTML of all fields accepted for this payment processor
--> 
<!-- you won't need the automated gateway_fields output since you're capturing data as you go {gateway_fields} -->


<!-- example fields ... you may not need these… just depends on the gateway --> 
Credit Card Number Number<input type="text" value="" name="credit_card_number" /> 
expiration year {exp:cartthrob:year_select name="expiration_year"  selected="{customer_expiration_year}"}
expiration month {exp:cartthrob:month_select name="expiration_month" selected="{customer_expiration_month}"}
<input type="submit" value="Checkout" />

{/exp:cartthrob:checkout_form}