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
| ZONE | POSITION | MAX ENTRIES | HIDDEN WHEN |
|---|---|---|---|
| primary | Above the card row (wallets + card accordion slot) | 4 | Never (card may still render if form.enabled is true) |
| secondary | Below primary, after an "Or pay with" divider in a 2-column grid | 4 | Empty or no available methods |
| other | Below secondary, behind a "+ N more payment methods" toggle | Unlimited | Empty 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).
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.