Shopify Gateway

About

Installing the latest version of Reach for Shopify is the first step to accessing Vanity Pricing, Fixed Currency Pricing, as well as our Duty and Tax calculator.

📘

If you have already installed the Reach Shopify v1.3 Localize.js you will only need to update the javascript and css src parameters and data-env parameter as described below.

Merchant Prep List

1. Validate that your store:
   a. is a Shopify Plus store with an upgraded checkout (https://{your-shop-name}.myshopify.com/admin/settings/checkout/checkout_upgrade)
   b. has checkout.liquid template file been enabled and activated for editing
2. Install the Reach Localize app, by following link to install the app: https://shopify.rch.io/signup?shop=<store_domain>
   a. <store_domain> should look like: reach-demo.myshopify.com
3. If Reach is performing the install, create a staff account for Reach with these Read/Write access to edit the theme source code.
4. Modify your theme following the instructions below, then activate theme.
   a. If you choose to use a production theme, do the upgrade during a slow transaction time to minimize impact on your customers while you do the upgrade.
5. Have the account owner Install the Reach payment gateway
   a. Production: https://www.shopify.com/login?redirect=%2Fadmin%2Fauthorize_gateway%2F1052696
   b. Sandbox: https://www.shopify.com/login?redirect=%2Fadmin%2Fauthorize_gateway%2F1051671
   

🚧

There is some preparation required in Reach's system before you can go live, please reach out to us when you're ready to install or upgrade.

Code & Setting Changes

1. Change store currency formatting in your admin settings:
   a.

b. To be safe, ensure the use of quotes or other symbols '<${" etc. doesn't affect the current theme by making this change then checking a preview of your theme for any console errors.

2. Double check that all money value are rendered with the '| money' filter:
   a.

<span>{{ product.price | money }}</span>
 
 
This will be the rendered result:
<span><span class="money">$12.34</span></span>

b. This is a general rule that ensures that all of the prices are formatted properly according to the currency's formatting rules.
c. If the price is formatted already use: <span class="money">{{ price }}</span>

3. Add an additional checkout script:
   a.

<script>
    // Required for Reach Gateway
    var gip_order_id = '{{ checkout.order_id }}';
</script>

4. Update theme.liquid and checkout.liquid file
   a.

<!-- Reach Localize Script -->
<script
    id="gointerpay_localize"
    src="https://assets.rch.io/{Merchant Id}/localize.js"
    data-merchant_id="{Merchant Id}"
    data-store_currency="CAD">
</script>

b.

<!-- Reach Localize Script -->
<link
    rel="stylesheet"
    href="https://assets.rch.io/{Merchant Id}/localize.css">
<script
    id="gointerpay_localize"
    src="https://assets.rch.io/{Merchant Id}/localize.js"
    data-merchant_id="{Merchant Id}"
    data-store_currency="CAD">
</script>

c. Script Attribute Options:

More information on environments

Gateway Codes:

Optional Currency Selector

<select class="gip_currency_select">
<option value="GBP">British Pounds</option>
<option value="CAD">Canadian Dollars</option>
<option value="USD">US Dollars</option>
<option value="EUR">Euro</option>
<option value="-1" class="gip_currency_select_local">(local)</option>
</select>

• Each option should contain the Reach currency code as the value, but the text can be anything.
• There must be an option for the store base currency.
• There must also be an option with a value of '-1' which will be used for the automatically detected currency if it is not already on the list. If custom text is required for this option, the id="gip_currency_select_local" can be removed to achieve this.

If you are utilizing your own currency selector there are some optional classes that may help you.

• You may add the class 'gip-currency-select-text' to any element that should display the current currency code.
• You may add the class 'gip-currency-class' to any element that you would like to style according to the currency selected. The script will automatically add an additional 'gip-currency-class-{current currency}' class to that element.
  • For example, if the selected currency is "USD" then the added class will be 'gip-currency-code-usd'.

Javascript Helper Methods

How to use GIP.getLocalizeData()

GIP.getLocalizeData().then(function (data) {
    if (data) {
        console.log(data);
    } else {
        console.log('No rate offer available.');
    }
});

Rollback Procedure

1. De-activate payment gateway v1.3 (requires account owner)
2. Disable DHL FLC app (or uninstall)
3. Un-publish modified theme
4. Test