12 copy-paste items in this section.
A payment card that shows live number, name and expiry, and flips in 3D to the back when the CVC field is focused.
A card entry form with grouped number formatting, a Luhn check, brand detection, expiry validation and a live card preview. It never sends data anywhere.
Enter your card on the next step.
Pay from your bank app after checkout.
Your balance is applied first.
A radio list of payment methods with a highlight that slides to the selection and a detail panel that expands under it.
Payment successful
$48.00
A payment success state where a ring draws, a check strokes in, dots burst outward and the amount and reference fade up.
Payment declined
Your bank did not approve this.
A payment failure state with a shaking x mark, an error message, reason chips and Retry and Change method buttons.
Fernhill Plants
Boston fern, clay pot, soil mix
$128.40
A slide to confirm control. The track fills as you drag, the handle turns into a check, and Enter or the arrow keys work too.
Line items with quantity steppers, subtotal, discount, tax and total. Amounts roll when they change and the list folds on narrow containers.
Tip percentage chips with the amount under each one, a custom amount field, and a total that rolls to the new value.
Checkout / Promotions
A coupon input with Apply, loading, valid and invalid states. A valid code turns into a removable chip with the saving; an invalid one shakes.
Studio
Billed $144 once a year
A plan card with a monthly and yearly switch. A pill slides between the two, the price rolls to the new figure and a savings badge pops in.
Billed to Orchard Studio · Due Nov 11
Amount due$3,480.00
An invoice summary with a Paid, Due or Overdue status pill, line items, download and pay buttons, and a perforated bottom edge.
$0.00
Recent activity
A wallet card with a counting balance, quick top-up amounts, recent activity and an eye button that blurs the figures.
