Feature flags

Five boolean attributes on <payplug-session> tune the journey to your shop. They are presentation-level choices: they decide what the customer is offered, while the orchestrator keeps enforcing the same rules underneath. All five are reactive — toggle the attribute at runtime and the components re-render accordingly.

<payplug-session
  partial-payment
  individual-cancel
  hide-cart-on-final
  show-order-id-in-cart
  group-cart-by-brand
></payplug-session>

Attribute	Off (default)	On
partial-payment	Every tranche is the full remaining balance.	The customer may choose to split: full amount or a partial one, then complete.
individual-cancel	Authorized tranches are only released automatically.	Each authorized tranche offers its own cancel action.
hide-cart-on-final	The cart panel stays on the final screens.	The cart steps aside on paid/abandoned/expired.
show-order-id-in-cart	The cart’s title reads “Your order”.	The cart’s title names the order: “Your order EP-123456”.
group-cart-by-brand	Every cart line shows as declared.	A line shows its brand, and a brand’s lines show as one: its name, the units, the sum.

partial-payment: the split flow

Off, method forms only submit the remaining balance. The journey is a classic one-shot checkout with the orchestrator’s guarantees (an amount authorized below the amount submitted is still handled).

On, every method form opens with an amount chooser:

• “Pay the full amount: X” — recommended path, the order confirms immediately.
• “Pay part of the amount” — an amount field, validated live against the tranche window. The submit button always shows the exact amount it will charge.

After a partial tranche, the methods list returns with the progress meter and a banner: “X remaining to pay to confirm your order”. The customer repeats with any method until the total is covered. Wording adapts everywhere (“Pay the remaining: X” instead of “Payment”).

Enable it when your customers may combine payment methods (half on a card, the rest on another one).

individual-cancel: releasing one tranche

Off, a customer who changes their mind about one tranche has one exit: abandoning the whole payment.

On, every authorized tranche in <payplug-progress> offers a cancel action and shows a confirmation dialog offering to release that authorization immediately. The released tranche stays visible in a “cancelled payments” history list.

Enable it with partial-payment: it is the escape hatch of the split flow (“I’d rather put less on the card and more on PayPal”). Without splits it has nothing to act on: a lone tranche is handled by the global abandon.

hide-cart-on-final: simplified final screens

Off, your layout keeps its columns to the end: the cart panel stays next to the confirmation.

On, once the session reaches a terminal state (paid, abandoned, expired) the cart hides and the order total is repatriated into the final screen. The number the customer just paid never disappears. Combine it with a CSS rule that hides the container it leaves empty, and the final screens become a single centered panel.

Enable it if you consider that showing the cart has no point after the payment. That is the case for most checkouts.

show-order-id-in-cart: the order number in the cart

On, the cart’s title carries the order reference you created the session with (orderId): “Your order EP-123456”, in the page’s language. Off, it reads “Your order”. The confirmation screen names the order either way.

group-cart-by-brand: the cart grouped by brand

On, a line shows its brand instead of its product, and a brand that has several lines in the cart shows as ONE line: the brand’s name, the number of units, and the sum of its lines — “Espace Ski France × 3”. The brand is the one you declared on each line at creation (cartItems[].detail.brand). A line without a brand shows as you declared it; each grouped line sits where its brand first appears. Off, every line shows as declared. The total is the same either way.

Reading the flags from code

The session element exposes the resolved values, read-only:

const session = document.querySelector("payplug-session");
session.partialPayment; // boolean
session.individualCancel; // boolean
session.hideCartOnFinal; // boolean
session.showOrderIdInCart; // boolean
session.groupCartByBrand; // boolean