Ecommerce - Checkout

Every block takes a typed items array with id, name, variant, price, quantity, image and href, plus props for the tax rate and delivery options. Forms use vee-validate with yup, and the card fields are masked with v-maska. The card number check uses the Luhn algorithm, so 4242 4242 4242 4242 passes with any future expiry date.

Totals, shipping and tax are demo values. Calculate the real amounts on your server.

Style One

Single page checkout with contact, shipping address, delivery cards and card payment. Errors show inline, the delivery choice updates the total, and a confirmation replaces the form after paying.

Style Two

Three step checkout with a numbered stepper that blocks skipping ahead. Each step validates before continuing, answers are kept when going back and a recap shows earlier choices.

Style Three

Payment form with a card preview that updates as you type and detects the network. Includes masked fields, Luhn and expiry validation and a fill test card shortcut.

Style Four

Delivery method step with radio cards, live arrival dates, a free shipping threshold and a gift wrap switch. The order summary updates with every choice.

Style Five

Express checkout buttons for Apple Pay, Google Pay and PayPal, followed by tabs for guest checkout and signing in. Each tab validates different fields.

Style Six

Address form that adapts to the selected country. The region and postal code labels, region options and validation pattern change with the country, and countries without a region list get a free text field. Add your own markets through the countries prop.

Style Seven

Order review with contact, address, delivery and payment recaps. Each Edit button emits an edit event, and a required terms checkbox gates the place order button.

Style Eight

Two column checkout with a shaded summary panel. On phones the summary collapses behind a bar that shows the total.