DOCS

Bigcommerce

/

Checkout for BigCommerce

Integrate the Checkout plugin for BigCommerce.

Before integrating Checkout, ensure it will work as you expect. When you use Checkout:

  • Zonos Hello will automatically identify international shoppers based on their IP address location. When international customers proceed to checkout, they will be redirected to Zonos Checkout to complete their order.
  • In the checkout process, we will provide a total landed cost, which includes shipping (based on your own shipping rates or flat rates), duties, taxes, and carrier fees. By collecting these costs during the checkout, your customers won't have to pay anything extra upon delivery.
  • Your customers will have the convenience of a domestic-like experience: completing the checkout process in their local language, with address fields tailored to their specific country, and the option to pay in their local currency. Orders will be protected against fraud.
  • You can easily manage your international orders through both BigCommerce and Dashboard. Tracking numbers will be synchronized between the two platforms, ensuring smooth order management.
  • BigCommerce promo codes can be entered into the cart page and will carry over to Checkout. Once in Checkout, they cannot be edited. However, we can hide the BigCommerce promo code field on the cart page, and instead manage your promo codes within Dashboard. create promo codes in Dashboard for your international customers.

Integrate 

Seamlessly integrate Checkout with your BigCommerce store by following the steps in this section:

1

Get started

Start by completing our sign-up form. Onboarding will commence once your account agreement is in place.

2

Onboarding

Within 24 hours of signing up, a dedicated onboarding representative will contact you to kick off a tailored integration process.

Important: The steps listed below are for your reference and you will be guided through them by your onboarding representative.

3

Install apps

Both Checkout and Hello must be installed for Checkout to work properly, as Hello will inform when to redirect international customers to our Checkout.

  1. Install the Checkout app from BigCommerce Marketplace by clicking Get this app.
  2. Install the Hello app from BigCommerce Marketplace by clicking Get this app.
4

Configure Checkout

Once you have installed both apps, configure your settings:

  1. Within your BigCommerce backend, go to AppsMy appsZonos Checkout.
  2. Enter your integration credentials to link your Dashboard settings to your BigCommerce site.
    1. Copy your Zonos account number from Dashboard and input it as your Store ID.
    2. Copy your Zonos API key from Dashboard and input it as your Store Secret.
  3. Enable the app in test mode or live:
    1. Under Zonos Checkout, select Enable.
    2. Under Test mode, select Enable. When this mode is enabled, you must append ?zonos=true to the URL to enable Zonos functionality, allowing you to test Zonos while your shoppers still experience your native flow. Change this to Disable when you are ready to go live.
  4. Customize our app to work according to how your site needs:
    1. Under Create customer on order import, select your preference.
    2. Under Reserve product stock during checkout, select Enable if you would like Zonos to reserve product stock while it is in our Checkout. Learn how this works in the FAQs at the bottom of this page.
    3. Under Show payment provider as custom, select Enabled if you would like all of your Zonos orders to show Custom as the payment provider in BigCommerce.
  5. Click Update settings to save your selections.
5

Configure Hello

  1. Within your BigCommerce backend, go to AppsMy appsZonos Hello.
  2. Copy your Hello API key from Dashboard and input it as your Site Key.
  3. Enable the Hello app by switching Zonos Hello to enable. Hello can be enabled before Checkout and will not redirect to Zonos Checkout unless Checkout is also enabled.
  4. Switch Duty and tax quote to enable.
  5. If you would like Zonos to leverage BigCommerce currency conversion, switch Currency conversion to enable. Doing so will allow Hello to enable currencies for you in SettingsCurrencies. Check your currency settings there to ensure that payments will be made in the currency you prefer.
  6. Click Update settings to save your selections.
6

Add missing product info

Versions of BigCommerce before V3 have limitations with the data they pass to Zonos for landed cost quotes. Learn what product information Zonos receives from each version of BigCommerce and when you must use Zonos Catalog to add product-specific information needed for our calculations.

Optional product info

Product-specific information is not required for Zonos to return a quote. Zonos can use your account defaults for HS codes and Country of origin, estimate weight with a custom factor, and quote without dimensions. However, the more product-specific information provided, the more accurate our calculations will be.

Product info passed from BigCommerce

  • Weights
  • Dimensions
  • HS codes*
  • Country of origin*

*Only imports if using the BigCommerce V3 product experience

If you are not using BigCommerce V3, add your products with their HS codes and Country of origin to Catalog. Learn how to use Catalog.

If you add weight, dimensions, HS code(s), or country of origin to Catalog, Catalog will always use those fields. If any information is present in both your ecommerce platform and Catalog, the information in Catalog will override the information sent from the ecommerce platform when running our calculations. For example, suppose a product's weight is present in Shopify and Catalog. In that case, Zonos will use the weight in Catalog to calculate shipping.

7

Test your integration

Now that you have set up your account and your app, you are ready to test your integration. You will need to enable Checkout and Hello in BigCommerce while testing. To do so:

  1. Within your BigCommerce backend, go to AppsMy appsZonos Hello.
  2. Switch Zonos Hello to enable.
  3. Then go to AppsMy appsZonos Checkout.
  4. Under Zonos Checkout, select Enable.
  5. Under Test mode, select Enable.

When this mode is enabled, you must append ?zonos=true to the URL to enable Zonos functionality, allowing you to test Zonos while your shoppers still experience your native flow.

After completing testing, enable Zonos by setting Test mode to Disable.

Some things to remember:

  • De minimis—If the cart subtotal of your order is under the ship to country's De minimis, there may not be any duty or taxes due. This is reflected in our calculations.
  • Refunds and cancellations—We are collecting the payment, so if you need to do any refunds or cancellations, please process these in Dashboard.
  • Labels—Print labels for all international orders in Dashboard, unless you have been certified to print labels outside of Dashboard. This allows us to pay the duties and taxes on your behalf.

Note: If you need us to make adjustments, please reach out to Zonos support for assistance.

Advanced setup options 

Hide 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:

    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 it into the script contents.
  3. In the script below, edit the selectors in var domesticElements = by doing the following:

    1. Find the element selectors you want to hide for international users on your current BigCommerce site.
    2. Once you have those selectors, add them in where it says .hide-me.
    3. 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"]
    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.

Zonos integration script

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

Blueprint setup

In BigCommerce, 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.

Troubleshoot 

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.
  3. Once you have the code below 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.

  4. Make sure to save this new script and test the site.

Zonos integration script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

Frequently asked questions 

How do I know if I am on the Stencil theme?

To determine if you are using the Stencil theme, in the BigCommerce Admin Panel, if Storefront -> Footer Scripts is an option, your store is using a Stencil theme.

What product information should I provide for the most accurate quote on duties, taxes, and shipping costs?

Product information can impact the amount of duties and taxes due and the shipping cost. The more product information you provide to Zonos, the more precise the quote returned will be. Zonos can generate a quote even when this information is unavailable, but recommends providing the following key product details to improve accuracy:

  • Weight: Weight impacts your shipping cost, which can affect duties or taxes. Weights in your BigCommerce product listings are automatically used by Zonos when present.
  • Dimensions: Dimensions may impact your shipping cost, which can affect duties or taxes. Zonos can utilize product dimensions (length, width, and height) set on each product in BigCommerce.
  • HS codes: HS codes impact duty rates and can sometimes affect taxes. BigCommerce cannot send HS codes to Zonos so they must be added using Zonos Catalog. If you are using the BigCommerce V3 product experience, HS codes are received.
  • Country of origin: A product's country of origin impacts duty rates and may affect taxes. BigCommerce cannot send HS codes to Zonos so they must be added using Zonos Catalog. If you are using the BigCommerce V3 product experience, the Country of origin is received.

Product details passed to Zonos by BigCommerce

Product detailsWeightsDimensionsHS codeCountry of origin
Automatically passed
Add with Catalog

Product details passed to Zonos by BigCommerce V3

Product detailsWeightsDimensionsHS codeCountry of origin
Automatically passed

Note: Alternatively, you can enter any of the above info into Catalog, overriding the information stored and passed from BigCommerce.

Learn more about product info by platform.

Was this page helpful?