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

# Integrate Widget

> Embed and initialize the Forte widget in your frontend. This step is the same for both Forte Payments and Forte Compliance.

After receiving a `data` object from either a [payment intent](/payments/initiate-payment-request) or a [KYC request](/compliance/initiate-kyc-request), embed and initialize the widget in your page.

***

## Step 1 — Embed the Widget Script

Add a container `<div>` and a `<script>` tag inside your `<body>`.

```html theme={null}
<body>
  <div id="forte-payments-widget-container"></div>
  <script
    type="module"
    async
    src="https://payments.sandbox.lemmax.com/forte-payments-widget.js">
  </script>
</body>
```

| Environment | CDN URL                                                        |
| ----------- | -------------------------------------------------------------- |
| Sandbox     | `https://payments.sandbox.lemmax.com/forte-payments-widget.js` |
| Production  | `https://payments.prod.lemmax.com/forte-payments-widget.js`    |

### SRI Compliance (Recommended)

If your application enforces a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) with Subresource Integrity, fetch the versioned filename and integrity digest from the manifest endpoint first.

**Fetch the manifest**

```text theme={null}
GET /payments/v1/widget/manifest
Authorization: Bearer {{access_token}}
```

Response:

```json theme={null}
{
  "data": {
    "file_name": "forte-payments-widget-6.6.2.js",
    "integrity": {
      "type": "sha384",
      "digest": "sha384-+YZhTk4vMk5059Z1nwH7wn5uWhnILu7OGOnyxxV86ofK0WA0rpDci1dcxRjJdMe+"
    }
  }
}
```

**Embed with versioned filename and integrity attribute**

Use `data.file_name` to construct the `src` URL, and `data.integrity.digest` as the `integrity` attribute on the `<script>` tag.

```html theme={null}
<body>
  <div id="forte-payments-widget-container"></div>
  <script
    type="module"
    async
    src="https://payments.sandbox.lemmax.com/forte-payments-widget-6.6.2.js"
    integrity="sha384-+YZhTk4vMk5059Z1nwH7wn5uWhnILu7OGOnyxxV86ofK0WA0rpDci1dcxRjJdMe+">
  </script>
</body>
```

<Info>
  Fetch the manifest on every new widget session. This ensures the `integrity` digest matches the version currently being served from the CDN.
</Info>

***

## Step 2 — Initialize the Widget

After embedding the widget script, initialize it by passing the full `data` object from your intent response. Add this `<script>` tag outside of `<body>`.

```html theme={null}
<script>
if (data) {
  (function init() {
    window.initFortePaymentsWidget
      ? window.initFortePaymentsWidget({
          containerId: 'forte-payments-widget-container',
          data
        })
      : setTimeout(init, 10);
  })();
}
</script>
```

<Warning>
  Always use a fresh `data` object from your most recent intent API response. Do not cache or reuse previous values.
</Warning>

<Info>
  The widget session expires after **30 minutes** of inactivity. If the session expires, re-initiate the intent and re-initialize the widget.
</Info>

***

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Payment Events" icon="bolt" href="/payments/payment-events">
    Handle client-side events from the Payments widget
  </Card>

  <Card title="Compliance Events" icon="bolt" href="/compliance/compliance-events">
    Handle client-side events from the Compliance widget
  </Card>
</CardGroup>
