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

# Widget SDK live demos

> Quick links to every interactive sandbox preset

# Widget SDK live demos

All Paysight Widget integration patterns live in one playground — no copy-paste required. Each preset loads a sandbox config and keeps a **Code** tab in sync with `PaySightSDK.createWidget({...})`.

<Card title="Open demo playground" icon="play" href="https://payment.paysight.io/demo">
  Launch the full interactive demo at `payment.paysight.io/demo`.
</Card>

<Card title="Playground guide" icon="book-open" href="/widget-sdk/guides/playground">
  Detailed walkthrough of every preset, inspector tabs, and what to try in each scenario.
</Card>

<Callout type="info">
  All presets use `environment: 'sandbox'`. The **Code** tab always outputs the vanilla embed API documented here — use your own numeric `productId` in production.
</Callout>

## Presets

| Preset          | URL                                                             | What to explore                                                                  |
| --------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Basic           | [Open](https://payment.paysight.io/demo?preset=basic)           | Minimum config: product, session, amount, customer prefill, one email field      |
| Full config     | [Open](https://payment.paysight.io/demo?preset=full)            | Kitchen sink: all fields, 3DS, `ecom`, tracking `data`, theme CSS, success copy  |
| Custom fields   | [Open](https://payment.paysight.io/demo?preset=fields)          | Toggle fields, half/full size, above/below position, `ecom`, `buttonText`        |
| 3D Secure       | [Open](https://payment.paysight.io/demo?preset=three-ds)        | `threeDSRequired`, `cancelOnThreeDSFailure`, `failOnThreeDSChallenge`            |
| Theming         | [Open](https://payment.paysight.io/demo?preset=theming)         | Theme presets via `theme.css`, custom button text, payment success copy          |
| Apple Pay       | [Open](https://payment.paysight.io/demo?preset=apple-pay)       | `applePayEnabled` + host `applePayContainerId`                                   |
| Google Pay      | [Open](https://payment.paysight.io/demo?preset=google-pay)      | `googlePayEnabled` + host `googlePayContainerId`                                 |
| Both wallets    | [Open](https://payment.paysight.io/demo?preset=both-wallets)    | Apple Pay + Google Pay; toggle `showOnlyWalletMethods`                           |
| Shopify         | [Open](https://payment.paysight.io/demo?preset=shopify)         | `shopify` cart mode — quantities, shipping, cart UI, wallets                     |
| Upsell          | [Open](https://payment.paysight.io/demo?preset=upsell)          | `savePaymentMethod` → `paysightSession` → upsell with `usePreviousPaymentMethod` |
| External button | [Open](https://payment.paysight.io/demo?preset=external-button) | `hidePaymentButton: true` + host CTA calling `submitPayment` / `submitUpsell`    |
| Single purchase | [Open](https://payment.paysight.io/demo?preset=single-purchase) | Host checkbox → `widget.update({ singlePurchase })` before pay                   |

## Playground features

* **Preset navigator** — 12 scenarios grouped by Start, Checkout UX, Risk, Wallets, and Funnels
* **Scenario / Setup controls** — preset-specific and shared config panels that update the live widget
* **Event log** — last 60 `onMessage` events with expected-event hints per preset
* **Config inspector** — read-only JSON of the active `WidgetConfig`
* **Code tab** — copyable vanilla embed generated from the live config
* **Reset session** — fresh `sessionId` without leaving the preset

See the [playground guide](/widget-sdk/guides/playground) for a full explanation of each preset.

## Related guides

* [Apple Pay via widget](/widget-sdk/guides/apple-pay-via-widget) — demo: `?preset=apple-pay`
* [Google Pay via widget](/widget-sdk/guides/google-pay-via-widget) — demo: `?preset=google-pay`
* [Wallet-only checkout](/widget-sdk/guides/wallet-only-checkout) — demo: `?preset=both-wallets`
* [Saved payment & upsell](/widget-sdk/guides/saved-payment-and-upsell) — demo: `?preset=upsell`
* [External payment button](/widget-sdk/guides/external-payment-button) — demo: `?preset=external-button`
* [Shopify cart checkout](/widget-sdk/guides/shopify-cart-checkout) — demo: `?preset=shopify`
* [3DS via widget](/widget-sdk/guides/3ds-via-widget) — demo: `?preset=three-ds`
* [Styling guide](/widget-sdk/guides/styling) — demo: `?preset=theming`