> ## 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.

# Paysight Widget SDK

> Embed secure payment processing in your website or application

The Paysight Widget SDK lets you embed a PCI-compliant payment form in any web page. Load the script, call `PaySightSDK.createWidget`, and handle payment events via `onMessage` or `subscribe`.

<CardGroup cols={2}>
  <Card title="Secure by design" icon="shield-check">
    Card data stays inside the Paysight iframe. Your application never touches PAN or CVV.
  </Card>

  <Card title="Vanilla JavaScript" icon="code">
    Single script tag — `https://payment.paysight.io/widget-sdk.js`
  </Card>

  <Card title="Customizable" icon="palette">
    Theme CSS, custom fields, localization, and wallet-only layouts.
  </Card>

  <Card title="Advanced flows" icon="cart-shopping">
    Saved payment methods, two-page upsell, Shopify cart mode, and external pay buttons.
  </Card>
</CardGroup>

## What you need

<Steps>
  <Step title="Product ID">
    A numeric product ID from your Paysight account ([create a product](https://app.paysight.io/management/products)).
  </Step>

  <Step title="Session ID">
    A unique string per checkout attempt (generated on your server or client).
  </Step>

  <Step title="HTTPS">
    The host page must be served over HTTPS in production.
  </Step>
</Steps>

## Quick embed

```html theme={null}
<div id="payment-container"></div>
<script src="https://payment.paysight.io/widget-sdk.js"></script>
<script>
  PaySightSDK.createWidget({
    targetId: 'payment-container',
    config: {
      productId: YOUR_PRODUCT_ID,
      sessionId: 'YOUR_SESSION_ID',
      environment: 'sandbox',
      amount: 29.99,
      customer: { email: 'customer@example.com', country: 'US' },
    },
    onMessage: (msg) => {
      if (msg.type === 'PAYMENT_SUCCESS') console.log(msg.payload);
    },
  });
</script>
```

<Callout type="info">
  `amount` is in **decimal currency units** (e.g. `29.99` for \$29.99), not cents. `productId` is a **number**.
</Callout>

## Documentation map

| Section                                                               | Use when                                                                |
| --------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| [Quickstart](/widget-sdk/quickstart)                                  | First integration                                                       |
| [Configuration guide](/widget-sdk/guides/configuration)               | Customer prefill vs required fields                                     |
| [Configuration reference](/widget-sdk/reference/configuration)        | Every `WidgetConfig` field                                              |
| [API reference](/widget-sdk/reference/api)                            | `createWidget`, `submitPayment`, `submitUpsell`                         |
| [Events reference](/widget-sdk/reference/events)                      | Full event catalog                                                      |
| [Saved payment & upsell](/widget-sdk/guides/saved-payment-and-upsell) | Two-page checkout flows                                                 |
| [Widget playground](/widget-sdk/guides/playground)                    | Interactive sandbox — all 12 presets with live config, events, and code |

<CardGroup cols={2}>
  <Card title="Open playground" icon="play" href="https://payment.paysight.io/demo">
    Try every integration pattern in the browser — no setup required.
  </Card>

  <Card title="Playground guide" icon="book-open" href="/widget-sdk/guides/playground">
    What each preset demonstrates and how to use the inspector panel.
  </Card>
</CardGroup>