Steps to Switching Payment Gateway

Step 1 - Create a Payment Form

Create a Form in the Siteglide Admin and turn on the setting to use it as a payment form. (Basic Payment Form and Checkout will be supported as both support at least 2 payment gateways.)

Step 2 - Create a Custom Form Layout

🧞You can use SiteBuilder to quickly create a custom Form Layout

In Code Editor or CLI, make a copy of the default form layout, ready to customise it.

In any Page, output your form and select the custom layout with the layout parameter. E.g. if your form ID is 1, your layout should be at marketplace_builder/views/partials/layouts/forms/form_1/my-custom-layout.liquid

{%- include 'ecommerce/checkout', form_id: '1', layout: 'my-custom-layout' -%}

For Basic Payment forms:

{% include 'form', id: '2', layout: 'my-custom-layout' %}

Step 3

For Checkout Forms, use the ecommerce/checkout_standard include to output multiple payment gateways inside your checkout form Liquid layout file.

{%- include 'ecommerce/checkout_standard'
  id: '123',
  default: 'true'
-%}
{%- include 'ecommerce/checkout_standard'
  id: '456',
  default: 'false'
-%}

For Basic Payment Forms:

{%- include 'ecommerce/basic_payment'
  id: '123',
  default: 'true'
-%}
{%- include 'ecommerce/basic_payment'
  id: '456',
  default: 'false'
-%}

Step 4

Once you have multiple options, you'll need a way to tell the system which to use.

The following JS function will do that for you:

s_e_set_payment_gateway('Stripe');

s_e_set_payment_gateway('PayPal');

Pass in the name of the Payment Gateway you wish to switch to as the only argument.

This can be applied as a callback to any JS event you like, such as clicking a radio button, or opening an accordion. e.g.

Liquid

  <div>
    <input id="paymentGateway1" type="radio" name="paymentGateway" value="123"></option>
    <label for="paymentGateway1">Payment Gateway 1</label>
  </div>
  <div>
    <input id="paymentGateway2" type="radio" name="paymentGateway" value="456"></option>
    <label for="paymentGateway2">Payment Gateway 2</label>
  </div>

JavaScript

const paymentGatewayCheckboxes = document.querySelectorAll('[name="paymentGateway"]');
paymentGatewayCheckboxes.forEach(function(item) {
  item.addEventListener('change', function(e) {
    const radio = e.currentTarget;
    if(radio.checked) {
      s_e_set_payment_gateway(radio.value);
    }
  });
})

If the JS function is not called, the default payment gateway from the multiple available gteways will be used.