`.
`data-slot="checkout-page"` · `CheckoutPage.vue`
Styling: `checkout-page-total-image`, which extends [`thumbnail`](https://ui.frontic.com/DESIGN.md#thumbnail); [`logo`](https://ui.frontic.com/DESIGN.md#logo); [`section-title`](https://ui.frontic.com/DESIGN.md#section-title); [`link`](https://ui.frontic.com/DESIGN.md#link); [`meta`](https://ui.frontic.com/DESIGN.md#meta); [`total`](https://ui.frontic.com/DESIGN.md#total). Change them there and every part that extends them follows.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `CartLine[]` | `[]` | The order's lines, listed in the summary. |
| `defaultValues` | `Partial
` | | Prefills the form, e.g. with a signed-in shopper's address. |
| `currency` | `string` | `'EUR'` | ISO 4217 code for the totals while there are no items; otherwise the first item's currency. |
| `locale` | `string` | | BCP 47 locale the prices are formatted in; the ConfigProvider's when left out. |
| `storeName` | `string` | `''` | Shown as the store's name above the form when no `logo` slot is given; nothing shows when both are empty. |
| `countries` | `CheckoutOption[]` | `[ { value: 'DE', label: 'Germany' }, { value: 'AT', label: 'Austria' }, { value: 'CH', label: 'Switzerland' }, { value: 'GB', label: 'United Kingdom' }, { value: 'US', label: 'United States' }, ]` | The choices in the country selects; `value` is the country code the form sends. |
| `defaultCountry` | `string` | `'DE'` | The country selected at first, by `value`; `defaultValues.country` takes precedence. |
| `houseNumberCountries` | `string[]` | `['DE', 'AT', 'CH', 'NL']` | Countries, by `value`, whose addresses ask for the building number in a field of its own. |
| `shippingMethods` | `ShippingMethod[]` | `[ { value: 'standard', label: 'Standard', description: '3 to 5 working days', amount: 499, freeFrom: 10000 }, { value: 'express', label: 'Express', description: 'Next working day', amount: 1290 }, ]` | The shipping methods offered once the address is complete. |
| `paymentMethods` | `PaymentMethod[]` | `[ { value: 'card', label: 'Credit card' }, { value: 'paypal', label: 'PayPal', description: 'After you click Pay now, PayPal opens to finish your purchase.' }, ]` | The payment methods, one row each; picking one reveals its details. |
| `cardMethod` | `string` | `'card'` | The payment method, by `value`, that reveals the card fields. |
| `discounts` | `AppliedDiscount[]` | `[]` | Codes and gift cards on the order, each a removable badge and taken off the total. |
| `taxRate` | `number` | | The tax rate included in the prices, e.g. `0.19`; the total's tax note hides when left out. |
| `signInHref` | `string` | | Where the sign-in link beside the contact heading goes; the link hides when left out. |
| `policyLinks` | `PolicyLink[]` | `[]` | Links under the pay button, e.g. the refund and privacy policies. |
| `secureLabel` | `string` | `'Secure checkout'` | Shown beside the store name, e.g. that the checkout is encrypted; hidden when empty. |
| `contactTitle` | `string` | `'Contact'` | Shown as the contact card's heading. |
| `contactDescription` | `string` | `'We send the order confirmation here.'` | Shown under the contact card's heading; hidden when empty. |
| `signInLabel` | `string` | `'Sign in'` | Shown on the sign-in link. |
| `emailLabel` | `string` | `'Email'` | Shown as the email field's label. |
| `emailHelp` | `string` | `'We send your order confirmation and shipping updates here.'` | Shown in the tooltip beside the email field. |
| `newsletterLabel` | `string` | `'Email me with news and offers'` | Shown beside the newsletter checkbox. |
| `deliveryTitle` | `string` | `'Delivery'` | Shown as the delivery card's heading. |
| `deliveryDescription` | `string` | `'Where should we send your order?'` | Shown under the delivery card's heading; hidden when empty. |
| `countryLabel` | `string` | `'Country/Region'` | Shown as the country select's label. |
| `firstNameLabel` | `string` | `'First name'` | Shown as the first-name field's label. |
| `lastNameLabel` | `string` | `'Last name'` | Shown as the last-name field's label. |
| `streetLabel` | `string` | `'Street'` | Shown as the address field's label while the building number has a field of its own. |
| `addressLabel` | `string` | `'Address'` | Shown as the address field's label while it holds the building number too. |
| `houseNumberLabel` | `string` | `'Building number'` | Shown as the building number field's label. |
| `apartmentLabel` | `string` | `'Apartment, suite, etc. (optional)'` | Shown as the label of the optional second address line. |
| `zipLabel` | `string` | `'Postal code'` | Shown as the postal code field's label. |
| `cityLabel` | `string` | `'City'` | Shown as the city field's label. |
| `phoneLabel` | `string` | `'Phone'` | Shown as the phone field's label. |
| `phoneHelp` | `string` | `'In case we need to reach you about your order.'` | Shown in the tooltip beside the phone field. |
| `phoneNote` | `string` | `'Please use your mobile phone number.'` | Shown under the phone field; hidden when empty. |
| `shippingTitle` | `string` | `'Shipping method'` | Shown as the shipping method section's heading. |
| `shippingPending` | `string` | `'Enter your shipping address to view available shipping methods.'` | Shown in place of the shipping methods until the address is complete. |
| `freeLabel` | `string` | `'Free'` | Shown in place of a shipping price of zero. |
| `paymentTitle` | `string` | `'Payment'` | Shown as the payment section's heading. |
| `paymentDescription` | `string` | `'All transactions are secure and encrypted.'` | Shown under the payment heading; hidden when empty. |
| `cardBrands` | `PaymentCardBrand[]` | `['visa', 'mastercard', 'amex']` | The card brands whose marks show in the number field, such as the ones the shop accepts. |
| `cardNumberLabel` | `string` | `'Card number'` | Shown as the card number field's label. |
| `expiryLabel` | `string` | `'Expiration date'` | Shown as the card expiry field's label. |
| `cvcLabel` | `string` | `'Security code'` | Shown as the card security code field's label. |
| `cvcHelp` | `string` | `'The 3 or 4 digits on the back of your card.'` | Shown in the tooltip beside the security code field. |
| `cardNameLabel` | `string` | `'Name on card'` | Shown as the cardholder name field's label. |
| `billingSameLabel` | `string` | `'Use shipping address as billing address'` | Shown beside the checkbox that bills the shipping address; unticking it reveals the billing address. |
| `billingTitle` | `string` | `'Billing address'` | Shown as the billing address's heading. |
| `rememberLabel` | `string` | `'Save my details for a faster checkout'` | Shown beside the checkbox that saves the shopper's details. |
| `rememberPhoneLabel` | `string` | `'Mobile phone (optional)'` | Shown as the label of the phone field the remember checkbox reveals. |
| `rememberNote` | `string` | `'Next time we text you a code and fill in the rest.'` | Shown under the remember checkbox's label, e.g. what saving the details means; hidden when empty. |
| `payLabel` | `string` | `'Pay now'` | Shown on the button that submits the order. |
| `summaryLabel` | `string` | `'Order summary'` | Shown as the summary card's heading and on the bar that folds it out on narrow screens. |
| `discountLabel` | `string` | `'Discount code or gift card'` | Shown as the discount field's label. |
| `discountPlaceholder` | `string` | `'Enter a code'` | Shown in the empty discount field. |
| `discountHint` | `string` | | Shown under the discount field, e.g. which codes can be combined. |
| `applyLabel` | `string` | `'Apply'` | Shown on the button that applies the discount code. |
| `addDiscountLabel` | `string` | `'Add discount'` | Shown on the button that reveals the discount field at the foot of the form on narrow screens. |
| `removeDiscountLabel` | `((label: string) => string)`: `(label: string): string` | ``Remove ${label}`` | Builds the screen-reader name of the button that removes an applied code from its row label. |
| `subtotalLabel` | `string` | `'Subtotal'` | Shown next to the subtotal. |
| `shippingLabel` | `string` | `'Shipping'` | Shown next to the shipping cost. |
| `shippingUnknown` | `string` | `'Enter shipping address'` | Shown in place of the shipping cost until a method is chosen. |
| `minusSign` | `string` | `MINUS_SIGN` | Put before each amount an applied code takes off. |
| `totalLabel` | `string` | `'Total'` | Shown next to the order total. |
| `itemCountLabel` | `((count: number) => string)`: `(count: number): string` | `count === 1 ? '1 item' : `${count} items`` | Builds the item count beside the summary's heading and under the total at the foot of the form on narrow screens. |
| `taxNote` | `((tax: string) => string)`: `(tax: string): string` | ``Including ${tax} in taxes`` | Builds the note under the total from the included tax, already formatted. |
| `quantityLabel` | `((quantity: number) => string)`: `(quantity: number): string` | ``Qty: ${quantity}`` | Builds each line's quantity text in the summary, e.g. `Qty: 2`. |
| `class` | `ClassValue` | | Classes added to the part's own element, after its recipe classes. |
| Event | Payload | Description |
| --- | --- | --- |
| `place-order` | `values: CheckoutValues` | Fires with a copy of the form's values when the shopper pays; a field of a section the shopper closed, such as the card fields under another payment method, is empty. |
| `apply-discount` | `code: string` | Fires with the trimmed code when the shopper applies a non-empty discount code. |
| `remove-discount` | `discount: AppliedDiscount` | Fires with an applied code when the shopper removes it. |
| Slot | Slot props | Description |
| --- | --- | --- |
| `logo` | | Replaces the store name above the form, e.g. with the store's logo. |
## Exports
```ts
import { type CartLine, type AppliedDiscount, type CheckoutValues, type CheckoutOption, type ShippingMethod, type PaymentMethod, type PolicyLink } from '@/components/templates/checkout-page'
```
- `CartLine`, `AppliedDiscount`: from [Cart](https://ui.frontic.com/lib/cart.md)
- `CheckoutValues`: below
- `CheckoutOption`: below
- `ShippingMethod`: below
- `PaymentMethod`: below
- `PolicyLink`: below
```ts
interface CheckoutValues {
email: string
newsletter: boolean
country: string
firstName: string
lastName: string
address: string
houseNumber: string
apartment: string
zip: string
city: string
phone: string
shippingMethod: string
paymentMethod: string
cardNumber: string
expiry: string
cvc: string
cardName: string
billingSameAsShipping: boolean
billingFirstName: string
billingLastName: string
billingAddress: string
billingZip: string
billingCity: string
billingCountry: string
remember: boolean
rememberPhone: string
}
interface CheckoutOption {
value: string
label: string
}
interface ShippingMethod {
value: string
label: string
/** Shown under the label, e.g. the delivery time. */
description?: string
/** In minor units. */
amount: number
/** Subtotal after promo codes, in minor units, from which this method is free; free at exactly this amount. */
freeFrom?: number
}
interface PaymentMethod {
value: string
label: string
/** Shown at the row's end, e.g. the accepted card brands. */
marks?: string[]
/** Shown below the row while it is selected, e.g. where the shopper is sent to pay. */
description?: string
}
interface PolicyLink {
label: string
href: string
}
```
## Styling
| Part | Recipe |
| --- | --- |
| `root` | [`checkout-page-root`](https://ui.frontic.com/DESIGN.md#checkout-page-root) |
| `total-image` | [`checkout-page-total-image`](https://ui.frontic.com/DESIGN.md#checkout-page-total-image) |
| `focus-ring` | [`focus-ring`](https://ui.frontic.com/DESIGN.md#focus-ring) |
| `summary` | [`checkout-page-summary`](https://ui.frontic.com/DESIGN.md#checkout-page-summary) |
| `summary-toggle` | [`checkout-page-summary-toggle`](https://ui.frontic.com/DESIGN.md#checkout-page-summary-toggle) |
| `logo` | [`logo`](https://ui.frontic.com/DESIGN.md#logo) |
| `section-title` | [`section-title`](https://ui.frontic.com/DESIGN.md#section-title) |
| `link` | [`link`](https://ui.frontic.com/DESIGN.md#link) |
| `meta` | [`meta`](https://ui.frontic.com/DESIGN.md#meta) |
| `total` | [`total`](https://ui.frontic.com/DESIGN.md#total) |
States with a look of their own: focus.
## Source
`components/templates/checkout-page/CheckoutPage.vue`
```vue
{{ storeName }}
{{ secureLabel }}
```
`components/templates/checkout-page/checkout.ts`
```ts
export type { AppliedDiscount } from '@library/lib/cart'
export interface CheckoutValues {
email: string
newsletter: boolean
country: string
firstName: string
lastName: string
address: string
houseNumber: string
apartment: string
zip: string
city: string
phone: string
shippingMethod: string
paymentMethod: string
cardNumber: string
expiry: string
cvc: string
cardName: string
billingSameAsShipping: boolean
billingFirstName: string
billingLastName: string
billingAddress: string
billingZip: string
billingCity: string
billingCountry: string
remember: boolean
rememberPhone: string
}
export interface CheckoutOption {
value: string
label: string
}
export interface ShippingMethod {
value: string
label: string
/** Shown under the label, e.g. the delivery time. */
description?: string
/** In minor units. */
amount: number
/** Subtotal after promo codes, in minor units, from which this method is free; free at exactly this amount. */
freeFrom?: number
}
export interface PaymentMethod {
value: string
label: string
/** Shown at the row's end, e.g. the accepted card brands. */
marks?: string[]
/** Shown below the row while it is selected, e.g. where the shopper is sent to pay. */
description?: string
}
export interface PolicyLink {
label: string
href: string
}
```
`components/templates/checkout-page/types.ts`
```ts
export type { CartLine } from '@library/lib/cart'
```