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

> Interactive sandbox for every Paysight Widget integration pattern — presets, controls, events, and copy-paste code

# Widget playground

The **Paysight Widget Playground** is a public, interactive sandbox at [payment.paysight.io/demo](https://payment.paysight.io/demo). Switch between **12 presets**, tune config in real time, watch `onMessage` events, and copy a vanilla `PaySightSDK.createWidget({...})` snippet that matches what you see on screen.

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

<Callout type="info">
  All presets use `environment: 'sandbox'`. The playground uses a shared sandbox product for demos — replace `productId` with **your** numeric product ID when you integrate.
</Callout>

## Layout

The playground has three main areas:

| Area                          | Purpose                                                                                                            |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Preset navigator** (left)   | Jump between integration scenarios grouped by category                                                             |
| **Checkout preview** (center) | Live widget iframe, order summary, and host-page controls (external pay button, upsell tabs, terms checkbox, etc.) |
| **Inspector panel** (right)   | Five tabs — **Scenario**, **Setup**, **Events**, **Config**, **Code**                                              |

### Inspector tabs

<AccordionGroup>
  <Accordion title="Scenario — preset-specific controls">
    Options that change per preset: field builder, 3DS strategy, theme presets, wallet toggles, Shopify cart settings, or host-flow controls. Updates apply immediately via `widget.update()` where possible.
  </Accordion>

  <Accordion title="Setup — shared checkout controls">
    Amount, currency, locale, customer prefill, tracking `data` rows, card-brand filters, and payment-success copy. Available on most presets.
  </Accordion>

  <Accordion title="Events — live message log">
    Last 60 `onMessage` events with timestamps and payloads. Expected events for the active preset are highlighted. Use **Reset session** in the header for a fresh `sessionId`.
  </Accordion>

  <Accordion title="Config — active WidgetConfig JSON">
    Read-only snapshot of the config sent to the iframe, including overrides from the control panels.
  </Accordion>

  <Accordion title="Code — copy-paste embed">
    Generated vanilla HTML/JS using `https://payment.paysight.io/widget-sdk.js`. Wallet presets include `applePayContainerId` / `googlePayContainerId` when enabled.
  </Accordion>
</AccordionGroup>

## Preset index

Quick links — each URL opens the playground with that preset loaded:

| Preset                  | Open                                                                               | Category    |
| ----------------------- | ---------------------------------------------------------------------------------- | ----------- |
| Basic checkout          | [?preset=basic](https://payment.paysight.io/demo?preset=basic)                     | Start       |
| Full configuration      | [?preset=full](https://payment.paysight.io/demo?preset=full)                       | Start       |
| Custom fields           | [?preset=fields](https://payment.paysight.io/demo?preset=fields)                   | Checkout UX |
| Custom styling          | [?preset=theming](https://payment.paysight.io/demo?preset=theming)                 | Checkout UX |
| Single purchase toggle  | [?preset=single-purchase](https://payment.paysight.io/demo?preset=single-purchase) | Checkout UX |
| 3D Secure               | [?preset=three-ds](https://payment.paysight.io/demo?preset=three-ds)               | Risk        |
| Apple Pay               | [?preset=apple-pay](https://payment.paysight.io/demo?preset=apple-pay)             | Wallets     |
| Google Pay              | [?preset=google-pay](https://payment.paysight.io/demo?preset=google-pay)           | Wallets     |
| Apple Pay + Google Pay  | [?preset=both-wallets](https://payment.paysight.io/demo?preset=both-wallets)       | Wallets     |
| Shopify cart checkout   | [?preset=shopify](https://payment.paysight.io/demo?preset=shopify)                 | Funnels     |
| Saved payment & upsell  | [?preset=upsell](https://payment.paysight.io/demo?preset=upsell)                   | Funnels     |
| External payment button | [?preset=external-button](https://payment.paysight.io/demo?preset=external-button) | Funnels     |

***

## Start

### Basic checkout

<Card title="Open basic preset" icon="bolt" href="https://payment.paysight.io/demo?preset=basic">
  Minimum viable embed — start here.
</Card>

**What it demonstrates:** product ID, session ID, amount, optional `customer` prefill, and a single email field.

**Try in the playground:**

* Edit customer prefill under **Setup** and watch the iframe update
* Change amount, currency, or locale
* Submit a sandbox payment and inspect `PAYMENT_SUCCESS` in **Events**

**Key config:** `productId`, `sessionId`, `amount`, `customer`, `fields`

**Guide:** [Quickstart](/widget-sdk/quickstart)

***

### Full configuration

<Card title="Open full preset" icon="layer-group" href="https://payment.paysight.io/demo?preset=full">
  Kitchen-sink reference config.
</Card>

**What it demonstrates:** every common option in one place — full field set, 3DS flags, `ecom`, tracking `data`, `theme.css`, and custom payment-success copy.

**Try in the playground:**

* Toggle 3DS and risk flags under **Scenario**
* Adjust theme CSS and success messaging
* Compare the **Config** tab with the **Code** tab output

**Key config:** `fields`, `threeDSRequired`, `ecom`, `data`, `theme`, `paymentSuccess`

**Guide:** [Configuration reference](/widget-sdk/reference/configuration)

***

## Checkout UX

### Custom fields

<Card title="Open fields preset" icon="input-text" href="https://payment.paysight.io/demo?preset=fields">
  Compose a `fields` array interactively.
</Card>

**What it demonstrates:** which inputs appear in the iframe, half vs full width, above vs below the card form, plus optional `ecom` and custom `buttonText`.

**Try in the playground:**

* Add/remove field types in **Scenario**
* Change size and position per field
* Enable `ecom` and custom button label

**Key config:** `fields`, `fieldType`, `position`, `size`, `buttonText`, `ecom`

**Events to watch:** `FIELD_CHANGE`, `FIELD_BLUR`, `CONFIG_UPDATE_SUCCESS`

**Guide:** [Configuration guide](/widget-sdk/guides/configuration)

***

### Custom styling

<Card title="Open theming preset" icon="palette" href="https://payment.paysight.io/demo?preset=theming">
  Theme presets via `theme.css`.
</Card>

**What it demonstrates:** CSS overrides for `.ps-widget`, inputs, submit button, and optional success-screen copy.

**Try in the playground:**

* Switch theme presets in **Scenario**
* Edit accent color, border radius, and spacing
* Copy the generated `theme.css` block from **Code**

**Key config:** `theme.css`, `buttonText`, `paymentSuccess`

**Guide:** [Styling guide](/widget-sdk/guides/styling)

***

### Single purchase toggle

<Card title="Open single-purchase preset" icon="toggle-on" href="https://payment.paysight.io/demo?preset=single-purchase">
  Host checkbox → `widget.update({ singlePurchase })`.
</Card>

**What it demonstrates:** a host-rendered pay button (`hidePaymentButton: true`) with a subscription checkbox that calls `widget.update()` before `submitPayment()`.

**Try in the playground:**

* Toggle **Include subscription add-on** under host controls
* Accept terms, then pay from the external button
* Confirm `CONFIG_UPDATE_SUCCESS` and `singlePurchase` in **Config**

**Key config:** `singlePurchase`, `hidePaymentButton`, `submitPayment()`

**Guide:** [External payment button](/widget-sdk/guides/external-payment-button)

***

## Risk

### 3D Secure

<Card title="Open 3DS preset" icon="shield" href="https://payment.paysight.io/demo?preset=three-ds">
  Sandbox 3DS with configurable failure handling.
</Card>

**What it demonstrates:** `threeDSRequired`, `cancelOnThreeDSFailure`, and `failOnThreeDSChallenge` — the flags that control challenge and failure behavior.

**Try in the playground:**

* Pick a 3DS strategy preset in **Scenario** (required, optional, cancel on failure, etc.)
* Pay with an Evervault sandbox card that triggers a challenge
* Watch `PAYMENT_3DS_START` → `PAYMENT_3DS_SUCCESS` (or error events) in **Events**

**Key config:** `threeDSRequired`, `cancelOnThreeDSFailure`, `failOnThreeDSChallenge`

**Guide:** [3DS via widget](/widget-sdk/guides/3ds-via-widget)

***

## Wallets

### Apple Pay

<Card title="Open Apple Pay preset" icon="mobile" href="https://payment.paysight.io/demo?preset=apple-pay">
  Parent-hosted Apple Pay button.
</Card>

**What it demonstrates:** `applePayEnabled`, `applePayOptions`, and host `applePayContainerId` on `createWidget`.

**Try in the playground:**

* Adjust wallet button style, height, and border radius in **Scenario**
* Confirm the **Code** tab includes `#apple-pay-slot` markup
* Test on Safari with Apple Pay configured

**Key config:** `applePayContainerId`, `applePayEnabled`, `applePayOptions`

**Guide:** [Apple Pay via widget](/widget-sdk/guides/apple-pay-via-widget)

***

### Google Pay

<Card title="Open Google Pay preset" icon="wallet" href="https://payment.paysight.io/demo?preset=google-pay">
  Parent-hosted Google Pay button.
</Card>

**What it demonstrates:** same host-button pattern as Apple Pay with `googlePayContainerId` and `googlePayOptions`.

**Try in the playground:**

* Tune button appearance in **Scenario**
* Submit via Google Pay and watch for optional `PAYMENT_3DS_START`

**Key config:** `googlePayContainerId`, `googlePayEnabled`, `googlePayOptions`

**Guide:** [Google Pay via widget](/widget-sdk/guides/google-pay-via-widget)

***

### Apple Pay + Google Pay

<Card title="Open both-wallets preset" icon="credit-card" href="https://payment.paysight.io/demo?preset=both-wallets">
  Dual wallets with wallet-only layout.
</Card>

**What it demonstrates:** both wallet buttons on the host page, plus `showOnlyWalletMethods` to hide the card form when a wallet is available.

**Try in the playground:**

* Toggle **Wallet-only** in **Scenario**
* Watch `WALLET_FORM_LAYOUT` and `HEIGHT_CHANGE` in **Events** as the layout switches

**Key config:** `applePayEnabled`, `googlePayEnabled`, `showOnlyWalletMethods`, `WALLET_FORM_LAYOUT`

**Guide:** [Wallet-only checkout](/widget-sdk/guides/wallet-only-checkout)

***

## Funnels

### Shopify cart checkout

<Card title="Open Shopify preset" icon="cart-shopping" href="https://payment.paysight.io/demo?preset=shopify">
  Line-item cart totals with optional cart UI.
</Card>

**What it demonstrates:** `shopify` mode with `amount: 0`, cart line items, shipping, wallet buttons, and toggles for cart visibility and wallet availability.

**Try in the playground:**

* Change item quantities, discount, and shipping price in **Scenario**
* Toggle `showCart` to hide the in-iframe cart summary
* Watch `CART_READY` and `CART_UPDATE` events

**Key config:** `shopify.cart`, `shopify.shipping`, `showCart`, `disableWallets`, `amount: 0`

**Guide:** [Shopify cart checkout](/widget-sdk/guides/shopify-cart-checkout)

***

### Saved payment & upsell

<Card title="Open upsell preset" icon="repeat" href="https://payment.paysight.io/demo?preset=upsell">
  Two-phase checkout → upsell handoff.
</Card>

**What it demonstrates:** page 1 saves the payment method (`savePaymentMethod: true`); page 2 charges an add-on via `usePreviousPaymentMethod` and `upsell.initialPaymentSession` (the `paysightSession` from page 1).

**Try in the playground:**

* Complete checkout on the **Checkout** tab
* Copy `paysightSession` from **Events** (`PAYMENT_SUCCESS` payload)
* Switch to **Upsell** — the playground captures the session automatically
* Submit the upsell and confirm `PAYMENT_SUCCESS` with `mode: 'upsell'`

**Key config:** `savePaymentMethod`, `paysightSession`, `usePreviousPaymentMethod`, `upsell`

**Guide:** [Saved payment & upsell](/widget-sdk/guides/saved-payment-and-upsell)

***

### External payment button

<Card title="Open external-button preset" icon="hand-pointer" href="https://payment.paysight.io/demo?preset=external-button">
  Host-rendered pay CTA with optional upsell.
</Card>

**What it demonstrates:** `hidePaymentButton: true` so the iframe collects card data only; your page calls `submitPayment()` or `submitUpsell()` after `READY`. Includes terms checkbox gating and the same upsell flow as above.

**Try in the playground:**

* Agree to terms, then click the host **Pay** button
* Walk through checkout → upsell using the tab controls
* Inspect `SUBMIT_PAYMENT` and `READY` in **Events**

**Key config:** `hidePaymentButton`, `submitPayment()`, `submitUpsell()`, `READY`

**Guide:** [External payment button](/widget-sdk/guides/external-payment-button)

***

## Static copy-paste examples

The playground is the best way to **explore** config. These pages provide full standalone HTML/JS you can drop into a project:

<CardGroup cols={2}>
  <Card title="Basic integration" icon="bolt" href="/widget-sdk/examples/basic-integration">
    Simple embed with event handling.
  </Card>

  <Card title="Saved payment & upsell" icon="repeat" href="/widget-sdk/examples/saved-payment-upsell">
    Two-page checkout handoff.
  </Card>

  <Card title="External button" icon="hand-pointer" href="/widget-sdk/examples/external-button-checkout-upsell">
    Host-controlled pay CTAs.
  </Card>

  <Card title="Shopify two-page" icon="cart-shopping" href="/widget-sdk/examples/shopify-two-page-flow">
    Cart checkout and cart upsell.
  </Card>

  <Card title="3DS integration" icon="shield" href="/widget-sdk/examples/3ds-integration">
    Full 3DS event handling.
  </Card>

  <Card title="Custom styling" icon="palette" href="/widget-sdk/examples/custom-styling">
    Theme CSS walkthrough.
  </Card>
</CardGroup>