Zonos Checkout for BigCommerce

Learn about the Zonos Checkout plugin for BigCommerce. 

This powerful cross-border solution enhances your international customers' shopping experience while removing the common pains encountered by ecommerce retailers when selling cross-border.

Features

Click here to view Zonos Checkout in the BigCommerce Apps marketplace.

• Duty and tax quotes
• Fraud protection
• Denied party screening
• Language translation
• Custom messaging
• Duty and tax separate from shipping quote
• Currency conversion
• Zonos Hello included
• Abandoned cart emails
• International label creation
• Zonos order management

Getting started

1. Contact a Zonos Sales rep - Please reach out to us for information on how to get started. Once we get an agreement, you can begin the installation process.
2. Installation - Install Checkout for BigCommerce if you haven’t already.
3. Landed Cost setup - Adjust how your landed cost is calculated.
4. Shipment rating setup - Connect carriers, modify service levels, and customize calculated rates.

Installation

It’s quick and easy to install Checkout for BigCommerce.

1. Begin by simply logging in to your BigCommerce store.
2. Go to https://www.bigcommerce.com/apps/zonos-checkout/.
3. Click on GET THIS APP to install.
4. Next, go to https://www.bigcommerce.com/apps/zonos-hello/.
5. Click on GET THIS APP to install.

Once you’ve installed both apps, see below to learn how to configure your settings.

Configure Checkout

Store ID / Store Secret: Please contact inquire@zonos.com for your store credentials.

If you have a completed agreement prior to installation, these credentials will auto-populate.

Zonos Checkout: Select the radio button to either enable or disable the Zonos Checkout. You will need your Store ID and Store Secret to enable this. You can find your credentials in Dashboard at https://dashboard.zonos.com/settings/integrate

Test Mode: Select the radio button to either have test mode enabled or disabled. When this mode is enabled, you must append ?zonos=true to the URL to enable Zonos functionality.

Make sure to hit Update Settings when you’re finished with configuration.

Additional notes

• If you have not yet completed an agreement with Zonos, please contact inquire@zonos.com or call 801-869-8107 so we can help you get setup.
• Once you have your login to the Zonos Dashboard, you can navigate to the Integrate section for your Zonos credentials.
• After you complete store setup in the Dashboard and update your credentials, you are ready to go live!

Advanced store setup

Stencil setup

If Storefront > Footer Scripts is an option, your store is using a Stencil theme.

Checkout buttons not redirecting

If the Zonos Checkout is in test mode or set to live (and the checkout buttons are not redirecting to Zonos), it may be the checkout button selectors. Our Zonos Checkout app uses a set list of default checkout button selectors. If an international user is not being redirected, those selectors may need to be adjusted.\

To fix this issue, follow the steps below:

1. Go to BigCommerce Admin Panel > Storefront > Script Manager > Create Script.

2. Create a new custom script for Zonos by using the following:

   1. Name: Zonos Custom - [script relevant name]
   2. Description: [What this script does]
   3. Location in page: Footer
   4. Select pages where script will be added: All pages
   5. Script contents: Copy the following and paste into the script contents.

<script>
  window.onload = () => {
    selectors = {
      '.previewCartCheckout .button--primary': 'checkout',
      '.cart-actions .button--primary': 'Check out',
      '.previewCartAction-checkout': 'Check out now',
      '.ProceedToCheckout .btn': 'Proceed To Checkout',
      '.CheckoutLink': 'Checkout',
      '.button--primary': 'Checkout',
      '.button-checkout': 'Checkout',
      '.btn': 'Proceed To Checkout',
      '.CheckoutButton': 'Proceed To Checkout',
    };
    for (let key in selectors) {
      let button = contains(key, selectors[key]);
      for (i = 0; i < button.length; i++) {
        button[i].addEventListener('click', function (e) {
          zonosCheckout(e);
        });
      }
    }
  };
</script>

1. Once you have the above code in the script contents, you will need to either adjust one of the selectors to match your current checkout buttons or you can add a new selector to the list.
2. Make sure to save this new script and test the site.

Hiding domestic elements

If you have elements you need to hide for international users only, e.g. USA-only payment providers, shipping estimators, banners with USA-only messaging, etc., then use the next steps to hide them when the Zonos Hello country is international. To fix this, go to BigCommerce Admin Panel > Storefront > Script Manager > Create Script.\

To hide the domestic elements, follow the steps below:

1. Go to *BigCommerce Admin Panel > Storefront > Script Manager > Create Script.
2. Create a new custom script for Zonos by using the following:

• Name: Zonos Custom - [script relevant name]
• Description: [What this script does]
• Location in page: Footer
• Select pages where script will be added: All pages
• Script contents: Copy the following and paste it into the script contents.

<script>
  var domesticElements = ['.hide-me'];

  let cssElement = document.createElement('style'),
    sheet;
  document.head.appendChild(cssElement);
  sheet = cssElement.sheet;
  let count = 0;
  for (let domesticHide of domesticElements) {
    sheet.insertRule(`.z-intl ${domesticHide} { display:none; }`, count);
    count++;
  }
</script>

3. In the above script, edit the selectors in var domesticElements = by doing the following:

• Find the element selectors you want to hide for international users on your current BigCommerce site.
• Once you have those selectors, add them in where it says .hide-me.
• Make sure to surround each selector by speech marks and broken by a commar see the following example: [".hide-1", ".hide-2", ".hide-3", ".hide-4"]
• Once the script is ready and saved, test by going to the page where the elements were hidden on and toggle the Zonos Hello country from USA to international, and back to USA. Those elements should be hidden when an international country is selected.

Blueprint setup

If Storefront > Mobile Theme is an option, your store is using a Blueprint theme.

If you are set up on the Blueprint version of BigCommerce, you will need to add any additional scripts or code snippets to the bottom of: Advanced Settings > Web Analytics > Google Analytics > Tracking Code.

You can use the scripts included in the Stencil instructions as shown above, but make sure to copy and paste them to the Tracking Code section.