Elements Playground

Build a checkout from elements

Pick a layout, style it, and pay with the test card. Everything runs against a demo store in test mode: no real money moves.

Reference

Layout

All-in-oneOne checkout elementSplitSummary, email, details, payment…Product + checkoutA product card feeds the cartBuy buttonsButtons open an overlay checkoutCart buttonAdd to cart, then open the cart

Cart

Products from the demo store. The cart updates in place.

Loading products…

Element options

Show the cart in the checkoutQuantity steppers in the summaryCollapse the code fieldPayment layoutProduct card layoutQuantity stepper on productsBuy button sizePrice on the buy buttonTotal on the cart buttonLanguage and numbers

Brand

AutoLightDark

Preset bare (structure only)

Accent

On accent

Text

Muted text

Border

Surface

Sunken

Fields

Danger

Success

Warning

Radius 10pxGap 16pxText size 15pxFontHeadings and total

Rules

CSS for the published classes. Applied as you type; refusals come back from the elements as trace events.

Northwind Studio

The demo store at https://northwind-demo.shopfa.st did not answer. The playground needs it in test mode.

Events show up here as you use the elements.

index.html

Swap the store address for yours. TypeScript types