BNPL & Installment UI in Figma

Quick answer

BNPL and installment UI is three layers: a PDP price callout, a checkout payment option, and a provider disclosure modal. On product detail pages, show “Pay in 4 interest-free payments of $24.99” with a learn-more link that opens a breakdown modal—not a full redirect. At checkout, BNPL sits alongside credit cards and wallets as a radio option with provider logos and eligibility messaging. Every surface needs approved, declined, and unavailable states because provider APIs gate offers by cart total and region. Reuse pricing tokens for installment amounts and form patterns for redirect-return flows. Start from the Figma guides hub and templates pillar.

Who this is for

Product designers on DTC, marketplace, and high-AOV retail where BNPL lifts conversion on carts over $50.
Design system teams aligning provider widgets, legal copy, and payment step layouts across web and app.
Engineers integrating Klarna, Affirm, Afterpay, PayPal Pay Later, or Stripe installments with redirect and webhook flows.

BNPL surfaces map

Surface	Component	Purpose
PDP price block	`InstallmentCallout`	Pre-qualify interest before add to cart
PLP card (optional)	`InstallmentBadge`	Compact “From $X/mo” on high-ticket items
Cart summary	`InstallmentCallout`	Remind before payment step
Checkout payment	`BNPLOptionCard`	Select provider alongside card/wallet
Provider modal	`InstallmentBreakdownModal`	Schedule table + legal footer
Order confirmation	`BNPLConfirmationLine`	”Managed by Klarna” with link
Account payments	`InstallmentScheduleRow`	Upcoming autopay (if brand hosts portal)

Verdict: design the checkout payment card and breakdown modal first—PDP widgets are marketing wrappers around the same math and copy rules.

InstallmentCallout anatomy

Part	Spec	Notes
Provider logo	16–20px height	Use official brand assets only
Headline	”Pay in 4 interest-free payments”	Provider copy may be locked—check legal
Amount line	”4 × $24.99”	Dynamic from cart/variant price
Learn more link	Opens modal	Never hide total cost
Unavailable state	Hidden or muted	Below minimum order threshold

InstallmentCallout
├── Variant: density=compact | standard
├── Variant: state=available | unavailable | loading
├── Property: installmentCount=4
├── Property: installmentAmount=24.99
├── Property: provider=klarna | affirm | afterpay
└── Layers:
    ├── ProviderLogo
    ├── Headline
    ├── AmountLine
    └── LearnMoreLink

Place below sale price on PDP and above sticky add to cart. On mobile, keep the callout one line + link to avoid pushing primary CTA below the fold.

InstallmentBreakdownModal

Section	Content	Handoff note
Header	Provider logo + “How it works”	Modal, not new tab, when possible
Schedule table	Date, amount, status	4 rows for pay-in-4
Total comparison	Same as full price	No hidden fees line item
Eligibility note	Soft credit check disclaimer	Legal text from provider
Primary CTA	”Continue shopping” or “Select at checkout”	Context-dependent
Footer links	Terms, privacy	Provider URLs

InstallmentBreakdownModal
├── Variant: provider=klarna | affirm | afterpay
├── Property: schedule[] (date, amount)
└── Layers:
    ├── Header
    ├── ScheduleTable
    ├── TotalRow
    ├── DisclaimerText
    ├── PrimaryButton
    └── LegalLinks

Use table UI patterns for the schedule. Annotate that dates are estimates until checkout authorization completes.

Checkout: BNPLOptionCard

State	UI	User action
Default	Logo + “Pay in 4 with Klarna”	Select radio
Selected	Expanded panel with summary	Continue to provider redirect
Ineligible	Disabled + reason	”Order below $35 minimum”
Error	Inline alert	Retry or choose card
Redirect pending	Spinner + “Redirecting to Klarna…”	No double-submit

BNPLOptionCard
├── Variant: provider=klarna | affirm | afterpay | paypal
├── Variant: state=default | selected | ineligible | error | redirecting
└── Layers:
    ├── RadioControl
    ├── ProviderLogo
    ├── TitleLine
    ├── Subtitle (optional)
    └── ExpandedPanel (when selected)

Stack with payment method cards in one vertical list. Do not nest BNPL inside the credit card form—it is a peer payment type.

Price and cart integration

Rule	Design implication
Installments on variant change	Callout updates with selected SKU price
Cart-level total	Checkout uses cart total, not line average
Discounts / coupons	Recalculate installment amounts in summary
Tax and shipping	Provider rules vary—show “estimated” until final
Mixed cart	Some items BNPL-ineligible
Gift cards applied	Reduce financed amount

Show installment math in order summary sidebar when BNPL is selected, mirroring checkout UI tax/shipping lines.

Provider redirect and return flow

Step	Screen	Key UI
1. Select BNPL	Checkout payment	Selected card expanded
2. Place order / continue	Primary CTA label changes	”Continue to Klarna” not “Pay now”
3. Redirect	Full-page or popup	Branded interim loader
4. Approved	Return URL → confirmation	Standard thank-you + BNPL line
5. Declined	Return URL → checkout	Inline alert + card fallback
6. Abandoned	Return URL → checkout	Preserve cart; no error tone

Document return URLs and error codes in Dev Mode. Use progress steppers only if checkout is multi-step—do not add fake steps for external redirect.

PLP and high-AOV badges

Pattern	Copy	Best for
Monthly from	”From $42/mo”	Furniture, electronics
Pay in 4	”4 payments”	Fashion, beauty
0% APR	Regulated financing	Only when legally accurate

Keep PLP badges smaller than PDP callouts—reuse badge/chip tokens. Hide on mobile PLP if space is tight; PDP is the canonical disclosure surface.

Handoff checklist

Item	Dev Mode annotation
Minimum / maximum order	Per provider, per region
Currency	Installment amounts match pricing locale
Provider SDK vs redirect	Widget DOM vs hosted flow
Cart recalculation events	Coupon, shipping, gift card
Selected payment persistence	Session through redirect
Analytics	`bnpl_callout_view`, `bnpl_modal_open`, `bnpl_select`, `bnpl_approved`, `bnpl_declined`
a11y	Radio group labels include provider name; modal focus trap
Legal	Provider-mandated copy blocks—do not paraphrase

Use Dev Mode checklist and link to payment methods for shared card container specs.

Common mistakes

Mistake	Why it hurts	Fix
Static installment amounts on PDP	Wrong math after variant change	Bind to `selectedVariant.price`
BNPL buried under card form	Users miss financing option	Peer-level payment radio
No declined state	Dead-end after redirect	Alert + preserve checkout
Marketing “0%” without terms	Compliance risk	Provider-approved copy only
Hiding total in modal	Trust and regulatory issues	Always show full price comparison
Multiple providers with no default	Choice paralysis	Order by conversion data or region
Callout on ineligible low-ticket SKUs	Broken empty states	`state=unavailable` rules
Confirmation missing provider line	Support confusion	`BNPLConfirmationLine` on thank-you

Recommended workflow

Confirm providers and regions with finance—Klarna, Affirm, Afterpay, PayPal, Stripe each have different widgets.
Build InstallmentCallout and InstallmentBreakdownModal with one provider variant set first.
Add BNPLOptionCard to checkout payment step.
Wire PDP placement on product detail templates below price.
Design redirect, approved, declined, and abandoned return frames.
Add confirmation and optional account schedule rows on order history.
Document thresholds, analytics, and legal strings in Dev Mode.

FAQ

Show BNPL on every product?

Gate by category, price floor, and region. Design unavailable as hidden or collapsed—not an error state on cheap SKUs.

Pay in 4 vs longer financing?

Use separate components—pay-in-4 is simple schedule; 12-month APR needs extra disclosure and different modal layout.

Stack BNPL with loyalty points?

Usually points apply before financing—show updated installment amount when points slider moves.

Marketplace multi-seller carts?

BNPL often requires single merchant—design split-cart messaging at payment step.

In-app WebView checkout?

Redirect may break—annotate Safari/Chrome custom tab pattern for mobile app teams.

Next steps

Design payment methods UI in Figma — shared checkout payment list
Design shopping cart and checkout UI in Figma — order summary and payment step
Design price tags and pricing UI in Figma — sale price and installment math
Design coupons and promo codes UI in Figma — discount recalculation
Design order history and order tracking UI in Figma — post-purchase BNPL line items

Designing buy now, pay later and installment UI in Figma: checkout, PDP, and payment handoff