Reach Knowledge Database

Welcome to our Knowledge Database. This is your one-stop shop for documentation, FAQs, and contact information.

Have a question, but don't see the answer?

You can always email us at support@withreach.com

Get Started    

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.

  1. 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>

  1. Add an additional checkout script:
    a.
<script>
    // Required for Reach Gateway
    var gip_order_id = '{{ checkout.order_id }}';
</script>
  1. 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:

Attribute
Required
Value

id

Yes

'gointerpay_localize'

src

Yes

Localize.js/Localize.css script source

data-merchant_id

Yes

Your Reach Merchant ID

data-store_currency

No

The store currency. Defaults to 'USD' if omitted. Set to the 3-char currency code for all other currencies.

data-process_store_currency

No

If Reach will be processing transactions in the store's base currency, set this to 'true'.

If true, Reach payment methods will be shown for all currencies and other payment gateways will always be hidden unless the 'data-whitelisted_store_currency_gateways' flag is used.

data-whitelisted_gateways

No

A comma separated list of Shopify gateway codes. Each gateway included will be enabled for localized orders. See Gateway Codes below for the full list of gateway code values.

data-whitelisted_store_currency_gateways

No

If 'data-process_store_currency' is set to true each gateway in this list will be enabled for base store currency orders. This is a comma separated list of Shopify gateway codes. See Gateway Codes below for the full list of gateway code values.

data-env

No

Script environment. Defaults to 'production' if omitted, which will use production APIs. Set to 'sandbox' or 'development' when using the corresponding MIDs/API.

More information on environments...

data-flc_only

No

Set to 'true' if and only if Fully Landed Cost (FLC) functionality is required. If 'true', price conversions and payment processing functions will be disabled.

More information on environments

Gateway Codes:

Gateway Code
Gateway

all

Show all gateways, this will override the specific gateway behavior

shopify

Shopify Payments

sezzle

Sezzle

paypal

PayPal

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

Function
Notes

GIP.forceUpdate()

Reconvert prices as soon as possible. Can be used when any custom scripts update prices and you want to minimize the time to reconvert, since normally prices convert on an interval basis.

GIP.resetCalculatedCartTotals()

Hides any unconverted cart prices. Can be used when any custom scripts update prices and you want to minimize the price flicker of unconverted prices. This can be used in conjunction with GIP.forceUpdate() by calling GIP.resetCalculatedCartTotals() before.

GIP.selectCurrency()

Changes the conversion currency. Can be used when the merchant wants a custom currency switcher rather than using the currency selector dropdown that's built in.

GIP.currencyFormats()

Helper function that outputs all the currency formats in the console.

GIP.getLocalizeData()

Returns a promise which will be resolved with localize data when a rate offer is retrieved. If no rate offer is available, it will resolve to false.

How to use GIP.getLocalizeData()

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