Skip to main content

Documentation Portal

Storefront Implementation

To enable the Global-e Module's front-end functionality on your site, place the Global-e Module Code Snippet, a small JavaScript and CSS code snippet as part of your site's header as detailed in the following sections.

The Global-e Module JavaScript

Below is a suggested way of loading the Bespoke JavaScript library asynchronously on your site:

Integration Environment

<script id="globaleScript">
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//intgepi.bglobale.com/includes/js/{merchant id}';
document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>

Production Environment

<script id="globaleScript">
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//gepi.global-e.com/includes/js/{merchant id}';
document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>

The above snippets will ensure that the Bespoke JavaScript module will load asynchronously and not block your current page rendering.

Note

Replace {merchant id} at the end of the URL with the merchant ID provided to you by Global-e.

The Global-e Module CSS

As mentioned above, the Bespoke CSS should be placed on your site’s header, as shown below:

Integration Environment

<link id="GEPIStyles" rel="stylesheet" href="//intgepi.bglobale.com/includes/css/{merchant id}" />

Production Environment

<link id="GEPIStyles" rel="stylesheet" href="//gepi.global-e.com/includes/css/{merchant id}" />

Note

Replace {merchant id} at the end of the URL with the merchant ID provided to you by Global-e.

Alternative Methods

Tag Managers – if your site uses a tag manager library, it is possible to load the Global-e Module JavaScript via your current tag manager. In doing so, please ensure that the Global-e Module JavaScript library is given the highest priority in your tag manager, for the reasons mentioned above.

Note - The Global-e Module CSS link should not be loaded via a tag manager in any way.

CSS on Site – The Global-e Module CSS logic may be implemented directly on your own server. The logic would then be as follows: when the Global‑e server identifies the customer browsing the CSS as coming from a Global‑e-operated country, the Global‑e server returns a valid CSS that contains the relevant CSS content for your site. Alternatively, when the Global‑e server identifies the customer as coming from a country not operated by Global‑e, then the CSS returns empty.

This way, Global-e’s CSS does not affect customers browsing from countries not operated by Global-e, even in case the Global-e Module JavaScript was not loaded for some reason.

For merchants wishing to implement such logic, Global‑e sends the CSS content to be placed on the merchant site.

Clearing the Cart

You should ensure your customer’s cart is cleared after a successful international checkout. Inside the client side analytics callback, you are able to insert the code to trigger a clear cart URL, delete a cookie or local storage value, or the combination of operations that your storefront requires.

However, if it is not possible to detach the frontend cart from the backend such that clearing the cart on the frontend will cause the SendOrderToMerchantprocess to fail, you will be required to clear the cart as part of the SendOrderToMerchant request.

If you do not rely on the information received from Global-e in the SendOrderToMerchant to create your orders, then clearing the cart on the front end should not result in the SendOrderToMerchant request failing, and the first option should be the preferred approach.