Global‑e SDK
This section describes Global-e SDK
In this section:
Base Global‑e Script
The Global‑e base script file must be included on all merchant pages (Layout/Master).
You can host the SDKJavaScript file locally or be served from the Global-e servers. If you would like to host the file on your servers, you can download the script from the following location by replacing the appropriate parameters:
https://<domain>/merchant/clientsdk/<merchant id>?v=<version>
To load our base script, you should use a self-invoking function:
(<window>, <document>, <sDomain> + <clientJsURL>, "script", "gle", <scriptVersion>, <merchantId>)
Production Example:
(window, document, "https://web.global-e.com" + "/merchant/clientsdk/124125?v=2.1.4", "script", "gle", "2.1.4", 124125)
Code Sample
<script> //Global‑e script initializer (function (w, d, u, t, o, h, m, s, l) { w["globaleObject"] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; w[o].m = m, w[o].v = h; s = d.createElement(t); l = d.getElementsByTagName(t)[0]; s.async = true; s.src = u + "?v=" + h; l.parentNode.insertBefore(s, l); })(<window>, <document>, <globaleaddon.clientJsDomain> + <globaleaddon.clientJsUrl>, "script", "gle", <globaleaddon.scriptVersion>, <globaleaddon.merchantId>); </script>
Script Parameters
Parameter | Description |
---|---|
| Production: https://web.global-e.com Integration: https://www.bglobale.com Staging: https://www2.bglobale.com |
| The JavaScript window object |
| The JavaScript document object |
| Local file path or direct to Global‑e servers /merchant/clientsdk/<merchantId>?v=<scriptVersion> |
| The version of Global-e server API. Currently 2.1.4. |
| The current Merchant ID |
This script loads the Global-e client script asynchronously.
The Global‑e client script uses an asynchronous approach so that you can start calling actions immediately; these actions are executed once the script is fully loaded.
Note
This list is subject to modifications and limitations that may affect the availability of payment methods on the checkout page.
Checkout
Show the Checkout Frame
To show the checkout frame, call:
gle("Checkout", "CART_TOKEN","HTML CONTAINER ID");
In-Cart Express Payment Methods Integration with Global‑e
Global‑e offers a streamlined implementation of in-cart express payment methods for shoppers.
With this option, shoppers can access express payment methods directly from the Cart page, making the checkout process faster and more efficient.
Currently, Global‑e supports the following in-cart express payment methods:
AmazonPay
PayPal Express
Supported In-Cart Express Payment Methods
The following table lists the in-cart express payment methods currently supported by Global‑e and their corresponding Global‑e functions.
Payment Method | Function | Error Object |
---|---|---|
|
| None |
|
| Error Types: 1 - Cart validation 2 - Issue with the PayPal response |
Note that you can find these functions in the Global‑e object.
For example:
GlobalE.CheckoutWithAmazonPayV2('40a51c57-cdac-40d2-b8dc-ad94d9fd6c1f', alert('Error'))
Function Parameters
When implementing in-cart express payment methods, use the following parameters:
| A valid Global‑e Cart Token that can be retrieved from |
| A function invoked in case of a failure, such as an invalid Cart Token. You can use this function to redirect the shopper to the regular checkout, show an error message, and more. |
Implementation Steps
To implement in-cart express payment methods:
Generate a Global‑e Cart Token or use an existing one, if it is still valid.
Call the appropriate function based on the payment method selected by the shopper; for example,
CheckoutWithAmazonPayV2
for AmazonPay orCheckoutWithPayPalExpress
for PayPal.
The shopper is redirected to the payment method page (Amazon or PayPal).
Events Summary
This section summarizes the events exposed by the Client SDK library.
Important
When using the Global-e Module platform, make sure to incorporate the following line prior to registering for the events detailed in this section. Note that the correct queue name for event registration is "glegem
" (and not "gle
").
var glegem = window["glegem"] || function(){(window["glegem"].q = window["glegem"].q || []).push(arguments)};
OnBeforeWelcome
This event occurs before the Welcome pop-up is displayed.
/*event data*/ //e.country = e.g. IL, GB,US //e.culture = e.g. RU,EN //e.currency = e.g. EUR,USD //e.onComplete = argument array of key,value e.g. [{key : 'templateDivId', value : '<b>some html</b>'}] gle("OnBeforeWelcome",function(e){ var html = ""; switch(e.country){ case "NL": html = "<div style='height:20px;text-align:center;font-size:24px;'>Dynamic Content - Holand</div>"; break; case "US": case "GB": html = "<div style='height:20px;text-align:center;font-size:24px;'>Dynamic Content - US & GB</div>"; break; } e.onComplete([{key : "clientDynamicContent", value : html}]); });
OnWelcomeShown
The OnWelcomeShown
event is fired when the welcome pop-up is shown to the customer.
gle("OnWelcomeShown", function(){ //Welcome popup Shown; })
See ???.
OnChangeShippingCountryClicked
The OnChangeShippingCountryClicked
event is fired when the "change shipping country" link on the welcome pop-up is clicked.
gle("OnChangeShippingCountryClicked",function(){ //change shipping country click on welcome popup clicked });
For more information.
OnBeforeSwitcher
The OnBeforeSwitcher
event is fired before the country and currency pop-up is shown.
/*event data*/ //e.country = e.g. IL, GB,US //e.culture = e.g RU,EN //e.currency = e.g. EUR,USD //e.onComplete = argument array of key,value e.g. [{key : 'templateDivId', value : '<b>some html</b>'}] gle("OnBeforeSwitcher",function(e){ var html = ""; if (e.culture == "RU"){ html = "<div style='height:50px;text-align:center;font-size:24px;'>Dynamic Switcher Content - Rusky</div>"; } else{ html = "<div style='height:50px;text-align:center;font-size:24px;'>Dynamic Switcher Content - Other</div>"; } e.onComplete([{key : "clientSwitcherDynamicContent", value : html}]); });
For more information, see ???.
OnWelcomePopupClosed
The OnWelcomePopupClosed
event is fired after the welcome pop-up is closed.
gle("OnWelcomePopupClosed", function(result){ });
For more information, see ???.
OnShippingSwitcherClosed
The OnShippingSwitcherClosed
event is fired after the country and currency pop-up is closed.
gle("OnShippingSwitcherClosed", function(result){ return false; });
For more information, see ???.
OnCheckoutStepLoaded
The OnCheckoutStepLoaded
event is fired twice when the checkout is first loaded. then when it is complete.
gle("OnCheckoutStepLoaded",function(data){ switch(data.StepId){ case data.Steps.LOADED: case data.Steps.CONFIRMATION: if (data.IsSuccess){ //data.OrderId //window.location = "http://www.yourconfirmationpage.com"; } break; } });
OnClientEvent
The OnClientEvent
is fired when the customer interacts with the checkout.
gle("OnClientEvent",function(source,data){ switch(source){ //events } });
For more information, see ???
QuerySessionValidity
The QuerySessionValidity
event is used to cause the checkout session to expire after a specified amount of time.
gle("QuerySessionValidity",function(oncomplete){ oncomplete( {valid : true,expSeconds :7200}); });
Note:
If this feature is not implemented, the checkout will stay open indefinitely until the shopper clicks the place order button.
Once the timer expires, a pop-up will redirect the customer back to the cart page.