Playground
Play with the Payplug Elements, on ephemeral test sessions in the sandbox.
Everything below is the real product: the actual @payplug/elements bundle served from
the CDN, wired through the production NetworkSessionClient to a genuine session the
sandbox orchestrator just created for you.
The session carries a €1,000.00 order of two consumer lines, every payment method (two card instances among them, since one order may offer two card configurations) and a 10-minute lifetime. Things worth trying:
- Pay by card: the full amount, or part of it: the 3DS hop takes you to the simulated provider page and back here, session intact. On that page, try lowering the amount authorised: you’ll come back to the issuer-imposed partial banner and its accept/refuse choice.
- Split the order: a partial card tranche, then Apple Pay for the rest. Apple Pay authorizes on the page, so a panel opens for you to choose the verdict.
- Refuse, cancel, abandon: decline a verdict, cancel one authorized tranche from the progress panel, or abandon everything: nothing is ever charged, every hold is released.
A session that expires mid-play is the product behaving as specified; start a new one from the configuration panel.
What the configuration panel changes
Section titled “What the configuration panel changes”Open Configuration, top right. Two kinds of settings live there, and the panel says which is which: a section marked needs a new session cannot be applied to the one running.
| Applies at once | Needs a new session |
|---|---|
| Language: the 25 catalogues the bundle ships. Your cart lines will not follow: a merchant writes those. | Cart amount: €90, €1,000 or €6,900. The simulated Oney contract finances between €100 and €6,000, so the small and large orders push the instalment plans out. |
Session attributes: partial payments, cancelling one tranche, hiding the cart on final screens. These are <payplug-session>’s own attributes, so the orchestrator never hears about them. |
Card registration: one switch for the two levels: the need on the session (mustCreateAlias) and the recipe on the card (createAlias). Only card methods carrying a recipe stay offered. |
Theme: the --payplug-* tokens, live, plus the override stylesheet to take away. |
Sales context: the country and the channel. The simulated contracts deny named countries, so picking Spain or Italy makes two methods withdraw without a word. |
Nothing is applied silently: the footer turns and says so, and one deliberate click throws the session away for a new one carrying your settings.
Restyle it live
Section titled “Restyle it live”Open Configuration on the playground and go down to Theme. Move a control, and the
components restyle instantly: the editor simply writes the --payplug-* tokens the
styling guide documents, straight onto that <payplug-session>. There is no
editor-specific machinery: any value beating the default theme’s zero-specificity declaration
is the product’s one theming mechanism, exercised live. The derived tokens follow along for
free: tint the accent and watch the muted surfaces, the selection ring and the progress hatch
re-derive themselves through color-mix().
When it looks right, grab your override stylesheet at the bottom of that section: only
the tokens you touched, in the exact form the styling guide prescribes. Paste it into your CSS,
or serve it and point the theme attribute at it. The editor writes scheme-independent values;
to keep a distinct dark variant, scope your overrides as shown in the
dark mode recipe.