Zonos for BigCommerce Checkout

Installation

It’s quick and easy to install the BigCommerce Zonos Checkout app.

Once you have installed both apps, see below for information on configuring your settings.


Settings

bigcommerce checkout settings

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

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.

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.


Store setup

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

If you have not completed that agreement, please contact inquire@zonos.com or call 801-869-8107, and we will help get you set up. Once you have your login to the Zonos app, you can navigate to the Plugins section in the Zonos app and find your credentials there.

Once your store setup in the Zonos app is complete and your credentials are updated, you are ready to go live!

NOTE: Be sure to save any changes by clicking the “Update Settings” button.


Zonos recommends

Install the app on a staging site for testing before pushing live. View the Go Live Checklist before turning the site live (some items may not be applicable). Ensure you ship items DDP (Delivered Duty Paid) if taxes were paid in advance. Otherwise, your customer will be billed at checkout and upon delivery as well. Note that orders may be delayed on import if they are in a fraud review (validating) state to make sure fraudulent orders are not shipped out.


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:
    • 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 into the script contents.
        <script>
        window.onload = function(){
       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>
      
  3. 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 in the list.
  4. 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 into the script contents.
        <script>
       var css = `.z-intl .element-to-hide{
                 display: none;
                 }`;  //use string templates for cleaner css code - ES6 String templates
       head = document.head || document.getElementsByTagName('head')[0],
       style = document.createElement('style');
       style.type = 'text/css';
       if (style.styleSheet){
       style.styleSheet.cssText = css;
       } else {
       style.appendChild(document.createTextNode(css));
       }
       head.appendChild(style);
        </script>
      
  3. In the above script, edit the selectors in var css = 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 .element-to-hide.
    • Make sure to include .z-intl in front of every selector you add. You can add multiple selectors with the following layout: .z-intl .element-to-hide, .z-intl .class-to-hide, .z-intl #id-to-hide{
    • 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.