Checkout Form

Оформление заказа: доставка, тип адреса, оплата и проверка полей. Pro · Магазин и платежи › Корзина и заказ

Установка

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.