Payplug Elements

Payplug Elements are the web components you embed to run split payments: the customer covers one order with several payment tranches — card now, another method next — until the total is reached. They are powered by the Payplug payment orchestrator, which holds every tranche as an authorization and only captures when the whole order is covered: a customer is never charged for an incomplete order.

What the elements give you

• The complete checkout journey, ready-made: amount choice (total or partial with shortcuts), the authorized/remaining progress loop, post-tranche and refusal banners, a single waiting screen while an authorization is pending, individual tranche cancel, global abandon with its confirmation dialog, and the final screens — confirmed, abandoned, expired.
• Failures handled, nothing destructive: a refused authorization charges nothing and leaves the already-authorized tranches valid; abandon and expiry release every hold.
• Your page stays in charge: plain web components in light DOM — you choose the layout, brand them through CSS tokens, and route the customer from a single payplug:statuschange event. Styles are isolated both ways; no iframe, no dependency.
• EU-ready: i18n with lazy-loaded language catalogs, locale-aware amount formatting, one currency per session.
• Try before you build: this documentation embeds the real components on live sandbox sessions — the playground runs the exact deliverable you will load; and locally, the orchestrator’s sandbox door hands your page a full session without credentials.

How this site is organized

1. How it works — the whole picture in one diagram: what happens during a split payment, your four tasks, and everything the components handle.
2. Create a session — the two calls your server makes, and the token it hands to your page.
3. Show the elements — one script, one root element, the components you compose, and the single event that routes your customer.
4. Payment methods — configuring card, Apple Pay, PayPal, Wero, ANCV and Oney: partial authorization policies, BNPL plans, amount windows.
5. Feature flags — split payment, per-tranche cancel, and the final-screen layout.
6. Languages & currency — 25 languages, browser-language detection, locale-aware amounts.
7. Playground — the real elements, live on the page, on a genuine sandbox session: split, refuse, redirect, restyle — the theme editor lives there too, and the doc cannot lie.
8. Styling — branding through --payplug-* design tokens (light and dark), and the structural override recipes.
9. Component reference — the exhaustive API surface of the elements.
10. End-of-session webhook — our call to your server when a session ends: format, retries, idempotency.
11. HTTP API reference — the orchestrator’s contract, one page per operation with request samples, generated from the spec the API emits from its own validation schemas.

This site is a deliverable in its own right and grows milestone by milestone. The playground already runs the real elements against a live sandbox session.