Playground

Try the Payplug Elements with a demo merchant in the sandbox, connected to a demo PSP that lets you choose the outcome of the transactions. The session carries a test order with every payment method and a 10-minute lifetime. If your session expires, start over with a new session from the configuration panel.

Configuration

Configuration

Configure this session and its elementsChanges apply to the current session, except where a section says otherwise.

Language

Session attributes

Allow partial paymentsThe payer may split the order across several means.Allow cancelling one trancheEach authorized tranche can be released on its own.Hide the cart on final screensThe cart column hides itself once the session is settled or over.Show the order number in the cartThe cart's title names the order: “Your order EP-123456”.Group the cart by brandA brand with several lines shows as one: its name, the units, the sum.

Cart amountNeeds a new session

Small: €90Medium: €1,000Large: €6,900

The simulated Oney contract finances between €100 and €6,000: the small and large amounts fall outside that range, and the method becomes ineligible.

Card registrationNeeds a new session

This order will be followed by payments you initiateOne switch, two levels: the need on the session (mustCreateAlias), the recipe on the card (createAlias: mode, recurringFrequency, recurringExpiry). Only card methods configured with a createAlias stay offered.

Sales contextNeeds a new session

Filters the payment methods by country and sales channel. Try Spain, or the callcenter channel.

Theme

Colour scheme

Follow the siteSystemLightDark

Colors

AccentText on accentTextSurfaceBordersErrors & refusalsSuccessesFailures

Shape & rhythm

Corner radius

6px

Spacing unit

0.5rem

Text size

0.95rem

Font family

Your override stylesheet

Everything you changed, as the standalone theme file the styling guide describes.

/* Your style overrides */

These changes need a new session!

Create a new session

The PSP's verdict

Non-redirected payment methods (Apple Pay, Chèques-Vacances) wait for the PSP's verdict. Try the possible verdicts here.

Create a new session

How to test?

Open Configuration, with the button at the top right. You can try the effect of the various settings on the elements. Some settings need a new session to take effect: the configuration panel clearly tells you so with “needs a new session”. To create a new session with your changed settings, click the new-session button at the bottom of the configuration panel.

Restyle it live

Open Configuration on the playground and go down to Theme. Move a control, and the elements restyle instantly: the editor simply writes the --payplug-* tokens the Styling guide documents, straight onto that <payplug-session>.

The editor writes values that are independent of the light or dark scheme. To keep a distinct dark variant, scope your overrides as shown in the dark mode recipe.

Things to try

• Pay by card: the full amount, or part of it: the 3DS hop takes you to the demo PSP 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 without a redirect: 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.