Subscription Picker
One-time versus subscribe-and-save radio cards with a discount badge, a delivery frequency select, the next delivery date, a rolling price CTA and a skip-or-cancel note.
Preview
Morning roast, 500 g
Washed, notes of cocoa and fig
Next delivery after this one:Tue, Dec 1
Skip, reschedule or cancel anytime
Subscribe and save, $20.40, every 4 weeks, next delivery Tue, Dec 1
Switch options to see the price roll
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| price | number | — | One-time unit price. |
| discountPercent | number | 15 | Subscribe-and-save discount shown in the badge and prices. |
| frequencies | { value; label; days }[] | 2 / 4 / 6 / 8 weeks | Delivery frequency options. |
| value / defaultValue / onValueChange | { mode: "once" | "subscribe"; frequency: string } | subscribe, 4 weeks | Purchase option and frequency, controlled or not. |
| startDate | Date | number | string | mount time | First shipment; next delivery is this plus the frequency. |
| onAdd | (value, unitPrice: number) => void | — | Shows the CTA with the rolling price. |
| currency / locale | string | "USD" / "en-US" | Money and date formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.