​

Widget playground

The Paysight Widget Playground is a public, interactive sandbox at 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.

​

Layout

The playground has three main areas:

​

Inspector tabs

​

Preset index

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

---

​

Start

​

Basic checkout

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

---

​

Full configuration

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

---

​

Checkout UX

​

Custom fields

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

---

​

Custom styling

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

---

​

Single purchase toggle

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

---

​

Risk

​

3D Secure

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

---

​

Wallets

​

Apple Pay

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

---

​

Google Pay

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

---

​

Apple Pay + Google Pay

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

---

​

Funnels

​

Shopify cart checkout

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

---

​

Saved payment & upsell

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

---

​

External payment button

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

---

​

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: