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 withPaySightSDK.createWidget({...}).
Open demo playground
Launch the full interactive demo at
payment.paysight.io/demo.Playground guide
Detailed walkthrough of every preset, inspector tabs, and what to try in each scenario.
All presets use
environment: 'sandbox'. The Code tab always outputs the vanilla embed API documented here — use your own numeric productId in production.Presets
| Preset | URL | What to explore |
|---|---|---|
| Basic | Open | Minimum config: product, session, amount, customer prefill, one email field |
| Full config | Open | Kitchen sink: all fields, 3DS, ecom, tracking data, theme CSS, success copy |
| Custom fields | Open | Toggle fields, half/full size, above/below position, ecom, buttonText |
| 3D Secure | Open | threeDSRequired, cancelOnThreeDSFailure, failOnThreeDSChallenge |
| Theming | Open | Theme presets via theme.css, custom button text, payment success copy |
| Apple Pay | Open | applePayEnabled + host applePayContainerId |
| Google Pay | Open | googlePayEnabled + host googlePayContainerId |
| Both wallets | Open | Apple Pay + Google Pay; toggle showOnlyWalletMethods |
| Shopify | Open | shopify cart mode — quantities, shipping, cart UI, wallets |
| Upsell | Open | savePaymentMethod → paysightSession → upsell with usePreviousPaymentMethod |
| External button | Open | hidePaymentButton: true + host CTA calling submitPayment / submitUpsell |
| Single purchase | Open | 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
onMessageevents 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
sessionIdwithout leaving the preset
Related guides
- Apple Pay via widget — demo:
?preset=apple-pay - Google Pay via widget — demo:
?preset=google-pay - Wallet-only checkout — demo:
?preset=both-wallets - Saved payment & upsell — demo:
?preset=upsell - External payment button — demo:
?preset=external-button - Shopify cart checkout — demo:
?preset=shopify - 3DS via widget — demo:
?preset=three-ds - Styling guide — demo:
?preset=theming