Allow the customer to select a gateway

You may want to offer your customer several gateway choices. For example, you may want to provide standard credit card payment through Authorize.net, as well as PayPal. You can create completely different pages, one to handle each type of checkout, or you can change the checkout on the fly using ajax.

The basic option is to pass a segment variable into your checkout form using the gateway parameter. If you’d like to offer the customer the ability to choose the gateway on the fly, you can also use a select box in the checkout_form itself. If your gateways have radically different gateway fields, you may even want to consider using ajax. Examples of each are listed below.

{examples_channel_configuration}

{/examples_channel_configuration}

Setting the Gateway Using a Segment Variable

In this example the short name of the gateway (found in each gateway settings page) is passed in to the gateway parameter.

{exp:cartthrob:checkout_form gateway="{segment_3}" }
{gateway_fields}
....

Basic Gateway Selection

In this example gateways are chosen in a select box within the gateway. For this to work, you will need to use gateways that contain the same required input fields & data in the {gateway_fields} variable, or you will have to supply your own form inputs to satisfy both gateways. If this is impossible, the final solution below may be a better option.

{exp:cartthrob:checkout_form}
Pay By: <select name="gateway">
	<option value="authorize_net">Credit Cards
	<option value="paypal_standard">Paypal
</select>
{gateway_fields}
....

Gateway Selection Using Ajax to With Dynamic Input Replacement

This solution requires several templates to work. The main checkout page, and a checkout form that works similar to the first option listed above that will be added to the page dynamically.
Main template. Note, there is no checkout_form tag shown anywhere on this page.

<html>
<head>
	<title>Ajax Add to Cart Example</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function($){
	    // bind to the change event of the state select in the checkout form
	    $('#payment_method').change(function(){
	        // display a message indicating that we're updating the tax cost
	        $('#checkout_form_content').html( 'Updating…' );
	        $('#checkout_form_content').load('http://cartthrob.com/ajax_examples/include_dynamic_checkout'+$(this).val());
	    });
	});
	</script>
</head>
<body>
	<h1>Dynamic Payment Method</h1>

	<select id="payment_method" name="payment_method">
		<option value="authorize_net" selected>Authorize.net</option>
		<option value="dev_template">Developer Template</option> 
		<option value="paypal_standard">Paypal Standard</option>
	</select>
	<div id="checkout_form_content">
		{embed="ajax_examples/include_dynamic_checkout/"}
	</div>
</body>
</html>

The ajax_examples/include_dynamic_checkout template refrerenced in the “load” action above. This will be loaded into the main page when the selected gateway is changed.

{exp:cartthrob:checkout_form gateway="{segment_3}"}
{gateway_fields}
{/exp:cartthrob:checkout_form}

You can select or set the gateway in a variety of ways. From setting it in the backend, to a customer selectable option, to a parameter driven option. Build your system to suit your purposes.

Top of Page