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

# Installation Guide

> Install and set up the Paysight Widget SDK

## Installation

Add the Paysight Widget SDK script to your page:

```html theme={null}
<script src="https://payment.paysight.io/widget-sdk.js"></script>
```

Place the script before your initialization code, typically before the closing `</body>` tag.

## Environment

The SDK script URL is the same for all integrators. Set the target environment in config:

| `environment` | Use for                                |
| ------------- | -------------------------------------- |
| `sandbox`     | Testing with sandbox products and MIDs |
| `production`  | Live payments                          |

### Sandbox

```javascript theme={null}
const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'YOUR_SESSION_ID',
    environment: 'sandbox',
    amount: 29.99,
    // ...
  },
});
```

### Production

```javascript theme={null}
const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'YOUR_SESSION_ID',
    environment: 'production',
    amount: 29.99,
    // ...
  },
});
```

## Container setup

Create a container element where the widget iframe renders:

```html theme={null}
<div id="widget-container"></div>
```

For Apple Pay or Google Pay, add host-page slots above the widget container (or let the SDK create defaults):

```html theme={null}
<div id="apple-pay-slot"></div>
<div id="google-pay-slot"></div>
<div id="widget-container"></div>
```

Pass container IDs to `createWidget`:

```javascript theme={null}
PaySightSDK.createWidget({
  targetId: 'widget-container',
  applePayContainerId: 'apple-pay-slot',
  googlePayContainerId: 'google-pay-slot',
  config: { /* ... */ },
});
```

## Initialize

```javascript theme={null}
const widget = PaySightSDK.createWidget({
  targetId: 'widget-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: `session_${Date.now()}`,
    environment: 'sandbox',
    amount: 29.99,
    customer: { email: 'customer@example.com', country: 'US' },
    fields: [
      {
        label: 'Email',
        placeholder: 'Enter your email',
        fieldType: 'email',
        position: 'above',
        size: 'full',
      },
    ],
  },
  onReady: () => console.log('Widget ready'),
  onMessage: (msg) => console.log(msg.type, msg.payload),
  onError: (err) => console.error(err),
});
```

<Callout type="info">
  `customer` is optional prefill. `fields` defines which inputs appear — your product may require a minimum set even when customer data is prefilled.
</Callout>

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/widget-sdk/quickstart">
    Minimal working embed
  </Card>

  <Card title="Configuration" icon="sliders" href="/widget-sdk/guides/configuration">
    Full setup guide
  </Card>
</CardGroup>