Checkout Form

Checkout: shipping, address type, payment and field validation. Pro · Shop and payments › Cart and orders

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add checkout-form

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CheckoutForm } from 'valyro-ui-pro';

Prop	Type	Default
`countries` *	`SelectItem[]`		Countries for the country select.
`deliveryOptions`	`RadioGroupOption[]`		Address types or delivery windows; the section is hidden without them.
`savedMethods`	`PaymentMethod[]`		Saved cards and wallets; a "New card" option is added after them.
`value`	`CheckoutFormValue`		The whole form (controlled).
`defaultValue`	`CheckoutFormValue`		Initial `value` when uncontrolled.
`onValueChange`	`(value: CheckoutFormValue) => void`		Called with the new `value` when it changes.
`onSubmit`	`(value: CheckoutFormValue) => void`		Called with the value once every field passes validation.
`submitting`	`boolean`	`false`	Shows the submit button as busy (while the payment goes through).
`total`	`ReactNode`		Amount on the submit button: "$49.00" makes it "Pay $49.00".
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the section headings (default 2).
`labels`	`Partial<CheckoutFormLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`cardLabels`	`Partial<CardInputLabels>`		Strings of the card field.

Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless