Installation

The Loby JavaScript SDK is loaded via a script tag from our CDN. No npm package or build step is required.

Standard Installation

The recommended approach is to load the SDK when your page loads. Add the following code to your HTML, typically before the closing </body> tag:

Copy
<script>
  window.lobyAsyncInit = async function() {
    await Loby.init({
      clientId: 1234,
      version: 'v1'
    })
  };
</script>
<script async defer crossorigin="anonymous" src="https://js.loby.io/sdk.js"></script>

Replace 1234 with your SDK client ID from Settings > Developer Settings in Loby Cloud.

Everything is loaded and initialized in the background while the user browses your page. By the time they click a checkout button, the SDK is typically ready. See Initialization for when to call waitForCheckoutReady() before opening checkout.

Understanding the Loading Pattern

The SDK uses an async initialization pattern:

1. Define lobyAsyncInit - This function is called automatically when the SDK has loaded
2. Load the script - The script is loaded asynchronously to avoid blocking page rendering
3. SDK calls lobyAsyncInit - Once loaded, the SDK invokes your initialization function

Script Attributes

On-demand Loading

Alternatively, you can defer loading the SDK until the first user interaction — for example, when the user clicks a checkout button. This avoids loading the SDK on pages where checkout is never used.

Define window.lobyAsyncInit before loading the script — the SDK requires this:

Copy
async function loadLobyScript() {
  if (!window.lobyAsyncInit) {
    window.lobyAsyncInit = async function() {
      await Loby.init({
        clientId: 1234,
        version: 'v1'
      })
    }
  }

  if (!window.Loby) {
    if (!window.lobyScriptLoadPromise) {
      window.lobyScriptLoadPromise = new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.async = true
        script.defer = true
        script.crossOrigin = 'anonymous'
        script.src = 'https://js.loby.io/sdk.js'
        script.onload = resolve
        script.onerror = () => reject(new Error('Failed to load Loby SDK'))
        document.body.appendChild(script)
      })
    }
    await window.lobyScriptLoadPromise
  }
}

If the user triggers loading twice before the script has loaded, lobyScriptLoadPromise ensures the script is only injected once — both calls await the same promise.

Before opening checkout after loading, see Initialization.