Allow the customer to select a gateway

CartThrob can present more than one enabled storefront gateway. A gateway must be enabled, included in the selectable-gateway settings, and rendered by the checkout template; enabling it alone does not display it to customers.

Gateway fields can include provider scripts, hidden state, hosted controls, and event handlers. When the customer changes gateway, render a complete new checkout page. Do not replace only the {gateway_fields} HTML with AJAX.

Separate checkout URLs

For a small fixed list, link to a checkout URL containing the gateway and pass the trusted segment to the form:

{exp:cartthrob:checkout_form
    gateway="{segment_3}"
    price_change_handling="review"
    return="store/order_info"}
    {gateway_fields}
    <button type="submit">Continue to payment</button>
{/exp:cartthrob:checkout_form}

CartThrob still limits the value to the configured selectable gateways.

Recommended selector with a full reload

Create a small store/set_gateway template:

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

On the checkout page, submit the selection to that template. The redirect renders checkout_form and {gateway_fields} together for the newly selected gateway.

{exp:cartthrob:customer_info}
<form method="post" action="{path='store/set_gateway'}" id="gateway_selector">
    <label for="gateway">Payment method</label>
    {exp:cartthrob:gateway_select
        id="gateway"
        name="gateway"
        selected="{gateway}"}
    <button type="submit">Change payment method</button>
</form>
{/exp:cartthrob:customer_info}

{exp:cartthrob:checkout_form
    price_change_handling="review"
    return="store/order_info"}
    <dl>
        <dt>Subtotal</dt><dd>{checkout_subtotal}</dd>
        <dt>Discount</dt><dd>-{checkout_discount}</dd>
        <dt>Shipping</dt><dd>{checkout_shipping}</dd>
        <dt>Tax</dt><dd>{checkout_tax}</dd>
        <dt>Total</dt><dd>{checkout_total}</dd>
    </dl>
    {gateway_fields}
    <button type="submit">Continue to payment</button>
{/exp:cartthrob:checkout_form}

JavaScript may submit gateway_selector when the selection changes, but allow the normal navigation and full checkout render to complete:

<script>
document.getElementById('gateway').addEventListener('change', function () {
    document.getElementById('gateway_selector').submit();
});
</script>

This pattern preserves provider initialization and CartThrob’s protected gateway context. Test every selectable gateway, switching in both directions, validation errors, browser back/forward behavior, and a refreshed checkout page.

One shared checkout form

A selector can remain inside checkout_form only when every choice uses compatible server-rendered fields and does not require the page to replace hosted controls dynamically:

{exp:cartthrob:checkout_form return="store/order_info"}
    {exp:cartthrob:gateway_select name="gateway" add_blank="yes"}
    {gateway_fields}
    <button type="submit">Continue to payment</button>
{/exp:cartthrob:checkout_form}

If the gateways need different hosted controls, use the full-reload pattern instead.