> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subotiz.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Subotiz SDK

<Info>
  **Documentation Index**

  Fetch the complete documentation index at: [https://developer.subotiz.com/llms.txt](https://developer.subotiz.com/llms.txt)
  Use this file to discover all available pages before exploring further.
</Info>

## Introductions

### CDN Address

```text theme={null}
https://cdn.subotiz.com/static/subotiz/v0/subotiz.js
```

### SDK Instantiation

Create an SDK instance using the following code:

```javascript theme={null}
const subotiz = window.Subotiz()
```

### Prewarm Checkout (Recommended)

This method preloads the resources required by Checkout in advance, so that the Checkout first screen renders faster when it is opened later.

`prewarm` is a **static method** on `Subotiz` and can be called without creating an SDK instance. Prewarming runs while the page is idle and does not affect the normal loading of your page.

<Tip>
  **It is recommended to call this method as early as possible after including subotiz.js**, without waiting for `initEmbeddedCheckout`, so as to reserve sufficient time for prewarming.
</Tip>

#### Method Invocation Example

```html theme={null}
<!-- Include the SDK; async loading is recommended to avoid blocking the page -->
<script
  async
  src="https://checkout.subotiz.com/static/subotiz/v0/subotiz.js"
  onload="window.Subotiz.prewarm({ environment: 'PRODUCTION' })"
></script>

<!-- For merchants with a custom domain: -->
<!--
<script
  async
  src="https://checkout.subotiz.com/static/subotiz/v0/subotiz.js"
  onload="window.Subotiz.prewarm({ checkoutUrl: 'https://pay.merchant.com' })"
></script>
-->
```

#### Parameter Specification

Options (optional) object type

| Field       | Type                     | Required | Default    | Description                                                                                                                                                                                                         |
| ----------- | ------------------------ | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| environment | 'SANDBOX' ｜ 'PRODUCTION' | No       | 'SANDBOX'  | Environment setting, which must match the environment used when initializing Checkout: 'SANDBOX'- Sandbox environment (default) 'PRODUCTION'- Production environment                                                |
| checkoutUrl | string                   | No       |            | Custom Checkout domain. When provided, it takes precedence over `environment`.<br />**It must be identical to the Checkout domain actually used afterwards**, otherwise prewarming will not take effect.            |
| trigger     | 'domready' ｜ 'immediate' | No       | 'domready' | Prewarm timing: 'domready'- Prewarm automatically once the page DOM is ready (default, recommended) 'immediate'- Prewarm immediately after the call, suitable when you want to control the prewarm timing yourself. |

### Initializing Embedded Checkout

This method initializes the embedded Checkout payment component and returns a Checkout instance.

#### Method Invocation Example

```javascript theme={null}
const checkout = await subotiz.initEmbeddedCheckout({
    fetchSessionUrl: async() =>{
        // Example of obtaining sessionURL from the server side
        const response = await fetch('/api/session');
        const data = await response.json();
        return data.sessionUrl;
    },
    environment: 'SANDBOX',  // 'SANDBOX' | 'PRODUCTION'

});
```

#### Parameter Specification

Options (required) object type

| Field           | Type                     | Required | Default   | Description                                                                                                                                                                                                                         |
| --------------- | ------------------------ | -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fetchSessionId  | `()=>Promise<string>`    | No       |           | Callback function `fetchClientSecret() => Promise<string>` to retrieve the Checkout Session ID.<br />Either `fetchSessionId` or `fetchSessionUrl` must be provided. When both are provided, only `fetchSessionId` will be invoked.  |
| fetchSessionUrl | `()=>Promise<string>`    | No       |           | Callback function `fetchClientSecret() => Promise<string>` to retrieve the Checkout Session URL.<br />Either `fetchSessionId` or `fetchSessionUrl` must be provided. When both are provided, only `fetchSessionId` will be invoked. |
| environment     | 'SANDBOX' ｜ 'PRODUCTION' | No       | 'SANDBOX' | Environment setting: 'SANDBOX'- Sandbox environment (default) 'PRODUCTION'- Production environment                                                                                                                                  |
| onComplete      | ()=>void                 | No       |           | Callback function triggered upon payment completion. Only fires if `redirect_on_completion` was set to `if_required` during Checkout Session creation, meaning it triggers when the user is not automatically redirected.           |

### Mount the Checkout Component

First, create a container DOM element, then mount the Checkout component into this container.

#### Operation Example

```html theme={null}
<!-- Create Container  -->
<div id="your_domElement">
  <!-- Checkout component will be displayed here -->
</div>

<script>
  // Mount the component
  checkout.mount('#your_domElement');
</script>
```

#### Parameter Specification

* selector **Required** string type. The CSS selector for the container element (e.g., '#your\_domElement').

### Unmount the Checkout Component

Unmount the Checkout component from the DOM. It can be remounted later using `mount`.

```javascript theme={null}
checkout.unmount();
```