Checkout
A premium checkout: product bag with quantity steppers, delivery cards, payment method, a collapsible promo code, a live summary and a sticky “Slide to pay” bar that ends on an order-placed screen.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| items Initial bag. Quantities and removals are kept in state. | { id, name, variant?, price, quantity, image? }[] | 3 sample products |
| onItemsChange Quantity changed or an item was removed. | (items) => void | — |
| shippingOptions Delivery cards. price 0 shows 'Free'; icon is 'standard' | 'express' | 'pickup'. | { value, label, description?, price, icon? }[] | Standard / Express |
| defaultShipping Initially selected delivery option. | string | first option |
| paymentMethod Card shown in the Payment row. | { brand, last4, expiry? } | Visa •••• 4242 |
| onChangePayment Shows a Change link on the payment row. | () => void | — |
| onApplyPromo Return the discount fraction (0.1 = 10%) or null. Omit to hide the promo row. | (code) => number | null | Promise<…> | — |
| taxRate Tax on the discounted subtotal. | number | 0.08 |
| onPay Slider completed. Resolve to show the order-placed screen; reject to slide back. | (summary) => void | Promise | — |
| orderNumber Shown on the success screen. | string | 'EK-48213' |
| onBack / onDone Header back button / success and empty-bag buttons. | () => void | — |
| currency Symbol placed before amounts by the default formatter (Indian digit grouping, decimals only when non-zero). | string | '₹' |
| formatPrice Money formatter. Overrides currency — use for Intl, other grouping or suffix symbols like '12,50 €'. | (amount) => string | '₹1,23,456' |
| accent Selection, steppers and the pay slider. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?