Widget sandbox

The Widget Sandbox (/widget-sandbox) is a visual editor for the Payment SDK. It mounts the real checkout next to the editor, so you see every change live, and generates the code to paste into your page.

Layout

• Live preview (left) — the real checkout, loaded from embed.creditcore.io.
• Editor (centre) — the settings of the selected section.
• Configuration (right) — the list of sections.

If the configuration is invalid the preview is removed and a red box, “Configuration won’t mount”, lists the problems. These are the same errors the SDK reports through onError.

Sections

Section	What you configure	SDK option
Session & tracking	sessionId and productId (required), plus optional tracking: landing domain, campaign ID, traffic source and IP.	sessionId, productId, tracking
Form fields	The customer fields and their order. Drag rows to reorder; edit label, placeholder, width (full / half) and position (above / below the card).	fields
Preloaded values	Values you already know about the buyer. A value without a field is still sent.	values
Card fields	Cardholder name field, card brand icons, autocomplete, and the label and placeholder of card number, expiry, CVC and name.	cardFields
Pay button	Text, background and text colour.	payButton
Theme	Styles for labels, inputs (including placeholder and focus colours) and selects.	theme.styles
Generated configuration	The final PaymentSDK.mount('checkout', { … }) code.	—

Field types

Type	Repeatable	Notes
text	Yes	Free text. Needs a unique name.
divider	Yes	Decorative separator.
email, phone, name, lastName, zip	No	Standard customer fields.
country, state	No	Selects. state and zip require a country field.

Workflow

1. Create a session from your backend with POST /api/session and paste its ID in Session & tracking, together with your product ID.
2. Go through the sections until the preview looks like your brand.
3. Open Generated configuration and copy the code.
4. Paste it in your checkout page, replacing the session ID with the one your server creates for each visitor. See the Quickstart.

See Configuration reference and Styling & custom fields for every option in detail.