PageCheckout Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Checkout page. Slots: steps, items, address, payment, summary.

Jump to API reference

Import

Vue
import { UiPageCheckout } from '@ziyarago/ui-pro/vue'

Default

Checkout

Section

Steps slot
Cart items slot
Address slot
Payment slot
Order summary slot
Vue
<UiPageCheckout title="Checkout" subtitle="Section">
  <template #steps>Steps slot</template>
  <template #items>Cart items slot</template>
  <template #address>Address slot</template>
  <template #payment>Payment slot</template>
  <template #summary>Order summary slot</template>
</UiPageCheckout>

API reference

Checkout template: step indicator, cart items, delivery address, payment and an order summary column.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
stepsCheckout steps above the content; Stepper.
itemsCart lines with quantity and price; Card with NumberInput.
addressContact and delivery fields; Card with TextField and Select.
paymentPayment method and card fields; OptionCards, TextField.
summaryTotals, promo code and the pay button; Card, Descriptions, Button.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Summary sits in the side column and drops below the form on narrow screens.