Skip to main content

Checkout Layout

The main visual change in SDK 1.1. Read this after Migration and before updating your init() config.

Redesigns how the Revup SDK renders payment methods on your page. The credit-card form lives inside a connected accordion in the primary zone; APM buttons are split across three configurable zones.

Payment zones​

ZONEPOSITIONMAX ENTRIESHIDDEN WHEN
primaryAbove the card row (wallets + card accordion slot)4Never (card may still render if form.enabled is true)
secondaryBelow primary, after an "Or pay with" divider in a 2-column grid4Empty or no available methods
otherBelow secondary, behind a "+ N more payment methods" toggleUnlimitedEmpty or no available methods

De-duplication​

A payment method may appear in only one zone. If the same name is listed in multiple zones, the SDK keeps the highest-priority placement: primary > secondary > other. Extra entries beyond the zone cap are dropped silently after availability filtering.

Connected card accordion​

The credit-card form is no longer a separate block beside the APM stack. It lives inside the primary zone as an accordion with a "Pay with card" header, POPULAR badge, and expandable iframe body. Use form.collapsed (true = starts closed, false = starts expanded) and form.enabled (false hides the card button and iframe).

Native APM Accordions​

When the backend does not route the order through Stripe, iDEAL renders as a first-party accordion row:

  • Collapsed by default (same size/shape as any APM button: mark, label, chevron).
  • Localized label: iDEAL.
  • Expands to show a notice: "You'll be redirected to iDEAL to complete your payment." plus a "Pay with iDEAL" confirm button.
  • Clicking the header alone never charges the payer.
  • Only one accordion can be open at a time across the entire checkout.
  • If expanding pushes the button out of view, the SDK scrolls it into view.

Secondary and other zones​

The secondary zone renders a horizontal divider labeled "Or pay with" followed by a responsive 2-column grid (single column below 360 px container width). The other zone shows a "+ N more payment methods" toggle with wallet marks; clicking expands the remaining APM buttons.

Secondary / other default button colors: methods listed only in secondary or other (not in primary) without an explicit color receive light-surface defaults — Apple Pay white-outline, Google Pay and PayPal white.

Reactive layout on apm.unavailable​

If an APM fails after initial render (SDK load error, capability check, or Stripe ready with no methods), the SDK removes the failed method's slot, updates the "+ N more payment methods" count, and hides empty secondary or other sections. No extra merchant handling is required; re-calling init() resets the layout.

This applies to natively-rendered iDEAL / Pix / SEPA rows too: an init failure dispatches apm.unavailable with error.name of ideal_error, pix_error or sepa_debit_error, and removes the row.