Allow the customer to select a gateway

You may want to offer your customer several gateway choices. 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 (which you can review by checking the HTML listed on the settings page for each gateway), you may even want to consider using ajax to change the HTML of the checkout form on the fly based on the customer's choice. Examples of each are listed below.

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 (using ajax) may be a better option.

The following example uses a tag called gateway_select to output a list of available gateways that the customer can select from.

{exp:cartthrob:checkout_form}

Pay By: {exp:cartthrob:gateway_select id="payment_method" name="gateway" add_blank="yes" }

{gateway_fields}
....

Gateway Selection Using Ajax to With Dynamic Input Replacement

This solution requires several templates to work.

  1. The main checkout page,
  2. and a checkout form that works similar to the first option listed above. This form will be added to the page dynamically. \

Main template.

Note, there is no checkout_form tag on this template. The checkout form is loaded from another template. Each time the customer changes the gateway selection, the checkout form template will be reloaded. 

<html>
<head>
    <title>Ajax Add to Cart Example</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        // bind to the change event of the payment select in the checkout form
        $('#payment_method').change(function(){
            // display a message indicating that we're updating the content
            $('#checkout_form_content').html( 'Updating…' );
            // load content from a template that contains a checkout form.
            $("#checkout_form_content").load("http://example.com/index.php/your_template_group/your_template_with_selected_gateway_fields_tag/", {gateway: $(this).val()}, function(response, status, xhr){});
         });
    });
    </script>
</head>
<body>
    <h1>Dynamic Payment Method</h1>

    {exp:cartthrob:checkout_form }
        {!-- this outputs a gateway select box (with the gateway names encrypted) --}
        Pay By: {exp:cartthrob:gateway_select id="payment_method" name="gateway" add_blank="yes" }
        <div id="checkout_form_content">
            {!-- the default gateways fields will be shown here initially
                the javascript above will replace these fields with fields output by the template containing the new gateway fields. 
                    --}
            {gateway_fields}
        </div>
    {/exp:cartthrob:checkout_form}
</body>
</html>

ajax_examples/include_dynamic_checkout template

This template is referenced in the "load" action of the javascript. This will be loaded into the main page when the selected gateway is changed. CartThrob's selected_gateway_fields tag can use a parameter to change the gateway fields it outputs, AND it can also use a POSTed gateway name. In our example above we're POSTing the selected gateway when the select box changes to our template containing the following. Based on that POSTed gateway name, it will output the appropriate gateway fields. 

{exp:cartthrob:selected_gateway_fields}

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.

Buy Now

Top