Designing subscription and recurring purchase UI in Figma: frequency, pricing, and handoff

Quick answer

Subscription UI needs a clear one-time vs subscribe choice, visible savings, delivery frequency control, and honest renewal copy before checkout. On the PDP, use a toggle or segmented control (“One-time” / “Subscribe & save”) with percent or dollar savings beside pricing. Show frequency dropdown or pills (every 2 / 4 / 8 weeks) and next delivery date preview. Cart and checkout must label recurring line items, show per-shipment vs per-month price, and link to cancellation policy. Account pages need skip, pause, swap, and cancel flows. Start from the Figma guides hub and templates pillar.

---

Who this is for

• Product designers on DTC consumables, beauty, pet food, supplements, and SaaS-adjacent physical goods.
• Design system teams adding subscription modules to PDP, cart, and account settings.
• Engineers integrating billing platforms (Recharge, Stripe Billing, etc.) and proration rules.

---

Subscription surfaces map

Surface	Primary job	Key component
PDP buy box	Choose subscribe vs one-time	PurchaseTypeToggle
Frequency picker	Set delivery interval	FrequencySelector
Cart	Show recurring badge + next ship	SubscriptionLineItem
Checkout	Disclose renewal + payment	SubscriptionSummary
Account	Manage active subscriptions	SubscriptionManager
Email (spec only)	Upcoming charge reminder	Copy deck frame

Verdict: ship PurchaseTypeToggle + FrequencySelector on PDP first, then cart line treatment—account management can follow in v2 if launch is PDP-only.

---

PurchaseTypeToggle (PDP)

Element	Spec	Notes
Control type	Segmented control or radio cards	Segmented for 2 options; cards if 3+ tiers
One-time row	Standard price	Default for first-time visitors (A/B test)
Subscribe row	Price + savings badge	”Save 15%” chip
Legal microcopy	”Cancel anytime” one line	Link to policy
Selected state	Expands frequency block below	Collapse when one-time selected

PurchaseTypeToggle
├── Variant: layout=segmented | stackedCards
├── Property: savingsPercent=15
├── Property: subscribePrice=12.74
├── Property: oneTimePrice=14.99
└── Layers:
    ├── OneTimeOption
    ├── SubscribeOption
    │   ├── PriceRow
    │   ├── SavingsBadge
    │   └── FrequencySelector (nested)
    └── PolicyLink

Place above add-to-cart, below variant selectors. Mobile: stacked cards beat tiny segmented labels.

---

FrequencySelector

Pattern	Best for	UI
Pill row	3–4 fixed intervals	Every 2 / 4 / 6 / 8 weeks
Dropdown	Custom cadence or 5+ options	”Deliver every ___“
Calendar preview	High-trust categories	”Next order: Jul 15”
Quantity + frequency	Multi-unit subs	”2 boxes every 4 weeks”

FrequencySelector
├── Variant: control=pills | dropdown
├── Property: selectedInterval=4weeks
└── Layers:
    ├── Label ("Deliver every")
    ├── OptionRow
    ├── NextDeliveryPreview
    └── FirstOrderNote ("First shipment ships today")

Show next delivery date dynamically in the spec—use placeholder {{nextShipDate}} in Dev Mode. Pair with date picker patterns if users can pick anchor day.

---

Pricing display rules

Rule	UI treatment
Subscribe price	Primary when subscribe selected
Compare-at	Strike one-time price on subscribe row
Per unit clarity	”/ month” only if actually monthly—prefer ”/ delivery”
First order discount	Separate line “First order 20% off”
Tiered subscribe	10% @ 4wk, 15% @ 8wk—show in pill labels
Tax/shipping	”Estimated at checkout” unless known

Align with BNPL copy rules—do not stack confusing payment messages under subscription block.

---

Cart and checkout

SubscriptionLineItem

Part	Spec
Recurring badge	”Subscription” pill on thumb
Frequency line	”Every 4 weeks”
Next shipment	Optional in cart drawer
Edit link	Opens mini modal to change frequency
One-time override	Rare—“Convert to one-time” in overflow menu

Checkout SubscriptionSummary

Disclosure	Placement
Renewal amount	Order summary sticky
Billing rhythm	”Charged every 4 weeks”
Cancel policy	Checkbox acknowledgment if legally required
Payment method	Same as payment UI—card on file
First vs recurring total	Split lines if first order discounted

Use progress steppers only when subscription is part of multi-step onboarding—not for standard checkout.

---

Bundle and upsell interactions

Scenario	UI
Subscribe to bundle	Frequency on bundle total—see bundle UI
Cart upsell to subscribe	Toggle on line item: “Subscribe & save 10%“
Mixed cart	One-time SKU + subscription SKU—clear badges per line
Coupon stacking	Inline note if codes exclude subscribe

Recommendations rail can show “Subscribe to complete your routine” with pre-selected frequency.

---

Account: SubscriptionManager

Action	UI pattern
View active subs	List cards with product, frequency, next date
Skip shipment	Modal confirm + new date preview
Pause	Duration picker (1 / 2 / 3 months)
Swap product	Product picker preserving frequency
Change frequency	Reuse FrequencySelector
Update payment	Link to payment methods
Cancel	Multi-step with reason survey + retention offer

SubscriptionCard
├── Variant: status=active | paused | paymentFailed
└── Layers:
    ├── ProductThumb
    ├── TitleFrequency
    ├── NextOrderRow
    ├── ActionRow (Skip | Pause | Edit | Cancel)
    └── PaymentFailedBanner (conditional)

Payment failed: use inline alert + primary “Update payment”—do not silently pause.

---

Error and edge states

State	UI
SKU not subscribable	Hide toggle; one-time only
Variant change breaks sub	Reset frequency; explain inline
Out of stock on next cycle	Notify + skip option
Price increase notice	Email + account banner before renewal
Region not supported	Disable subscribe with tooltip
Max subscriptions	Rare B2B cap—account message

Link OOS subscribe SKUs to notify me on one-time path only.

---

Handoff checklist

Item	Dev Mode annotation
Default purchase type	one-time vs subscribe (experiment flag)
Savings calculation	Percent off one-time vs fixed subscribe price
Frequency values	Enum list + default
Proration rules	N/A for simple DTC—note if mid-cycle swap
Cancel flow steps	Retention offer Y/N
Billing provider fields	subscriptionId, nextBillingDate
Analytics	subscribe_select, frequency_change, cancel_complete
Legal strings	Link URLs for terms

Use Dev Mode checklist and form patterns for cancel survey fields.

---

Common mistakes

Mistake	Why it hurts	Fix
Hidden renewal price	Regulatory/trust risk	Show recurring charge in checkout
Subscribe pre-selected without savings shown	Feels like dark pattern	Lead with savings amount
”Per month” on non-monthly cadence	Billing confusion	Match copy to actual interval
No cancel path in account	Chargebacks	Prominent cancel, not buried FAQ
Subscription badge missing in cart	Surprise at checkout	Pill on every recurring line
Frequency buried in checkout	Wrong expectations	Pick frequency on PDP
Same UI for trial vs paid sub	Wrong disclosures	Separate TrialBanner component
Ignoring mixed cart	Fulfillment errors	Badge + split shipment notes

---

Recommended workflow

1. Confirm subscription rules with merchandising and legal—intervals, savings, cancel policy.
2. Build PurchaseTypeToggle and FrequencySelector on PDP buy box.
3. Design cart SubscriptionLineItem with badge and edit entry point.
4. Add checkout SubscriptionSummary disclosures and renewal lines.
5. Spec SubscriptionManager account cards with skip/pause/cancel flows.
6. Document enums, pricing API, and analytics in Dev Mode.

---

FAQ

Default to subscribe or one-time?

One-time default is safer for trust unless brand is subscription-first; A/B test with clear savings.

Loyalty points on subscribe orders?

Show points per delivery in order confirmation—not double-count monthly if charged per shipment.

Gift subscriptions?

Separate flow: recipient email, start date, gift message—use gift card patterns for prepaid duration.

Combine with coupons?

State “Not valid on subscription” inline when codes exclude recurring lines.

PDP-only v1 without account management?

Minimum: confirmation email spec + link placeholder “Manage subscription” to support portal.

---

Next steps

• Design product detail pages in Figma — buy box placement
• Design price tags and pricing UI in Figma — subscribe vs one-time pricing
• Design shopping cart and checkout UI in Figma — recurring line items
• Design payment methods UI in Figma — card on file for renewals
• Design order confirmation UI in Figma — first subscription order recap