Grouped address, delivery-speed radio-row, and payment cards with a live order summary, express-checkout CTA, and a shadowed sticky secure pay bar
import * as React from "react";
import { useState } from "react";
import { View, ScrollView } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, RadioGroup, RadioGroupItem, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, BrandMark, LumioMark, MONO, Mount, Press, StickyBottomBar, brandKey } from "../shared";
export interface CheckoutAddress {
name: string;
line1: string;
line2?: string;
city: string;
postalCode: string;
country?: string;
}
export interface PaymentMethod {
brand: string;
last4: string;
expiry?: string;
}
export interface DeliveryOption {
id: string;
label: string;
/** e.g. "5–7 business days" */
detail: string;
price: number;
}
export interface OrderSummary {
itemCount: number;
subtotal: number;
/** Base shipping for the default delivery option. */
shipping: number;
tax?: number;
total: number;
}
export interface CheckoutScreenProps {
address?: CheckoutAddress;
paymentMethod?: PaymentMethod;
deliveryOptions?: DeliveryOption[];
summary?: OrderSummary;
currency?: string;
/** Inline validation message shown above the pay bar; disables ordering while set. */
error?: string;
onPlaceOrder?: () => void;
/** Wallet-style one-tap pay above the card CTA. */
onExpressPay?: () => void;
onChangeAddress?: () => void;
onChangePayment?: () => void;
onSelectDelivery?: (option: DeliveryOption) => void;
onBack?: () => void;
}
const DEFAULT_ADDRESS: CheckoutAddress = {
name: "Amara Chen",
line1: "421 Harbor Lane",
line2: "Apt 5B",
city: "San Francisco, CA",
postalCode: "94107",
country: "United States",
};
const DEFAULT_PAYMENT: PaymentMethod = { brand: "Visa", last4: "4821", expiry: "09/28" };
const DEFAULT_DELIVERY: DeliveryOption[] = [
{ id: "standard", label: "Standard", detail: "5–7 business days", price: 0 },
{ id: "express", label: "Express", detail: "2–3 business days", price: 12 },
{ id: "priority", label: "Priority", detail: "Next business day", price: 24 },
];
// Same bag the cart screen ships: overcoat $248 + boots $295 + 2× tee $170
// = $713, 8.5% tax → $60.61, Standard delivery free → $773.61.
const DEFAULT_SUMMARY: OrderSummary = {
itemCount: 4,
subtotal: 713,
shipping: 0,
tax: 60.61,
total: 773.61,
};
/** Prices always render with two decimals ($628.00). */
const fmt = (n: number, currency = "$") =>
`${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
function ChangeButton({ onPress, label }: { onPress?: () => void; label: string }) {
if (!onPress) return null;
return (
<Press
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={label}
hitSlop={12}
className="min-h-11 justify-center px-2"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Change
</Text>
</Press>
);
}
/** Checkout — grouped address, delivery, payment and summary sections with a
* sticky secure "Pay" bar. */
export function CheckoutScreen({
address = DEFAULT_ADDRESS,
paymentMethod = DEFAULT_PAYMENT,
deliveryOptions = DEFAULT_DELIVERY,
summary = DEFAULT_SUMMARY,
currency = "$",
error,
onPlaceOrder,
onExpressPay,
onChangeAddress,
onChangePayment,
onSelectDelivery,
onBack,
}: CheckoutScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [deliveryId, setDeliveryId] = useState(deliveryOptions[0]?.id ?? "");
const delivery = deliveryOptions.find((o) => o.id === deliveryId) ?? deliveryOptions[0];
const shipping = delivery?.price ?? summary.shipping;
const total = summary.subtotal + shipping + (summary.tax ?? 0);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill. */}
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Checkout
</Text>
</View>
</View>
</View>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6 pb-60"
contentContainerStyle={{ paddingTop: insets.top + 60 }}
contentInsetAdjustmentBehavior="automatic"
>
{/* Total hero — dark gradient card leads the screen: the number
the user is about to commit, with the line items underneath.
Raw hex is art direction (like StoryChrome). */}
<Mount>
<View className="overflow-hidden rounded-3xl bg-[#1B1B26]">
<View className="gap-4 p-5">
<View className="flex-row items-center justify-between">
<Text className="text-xs font-medium uppercase tracking-wider text-white/50">
Order total · {summary.itemCount} {summary.itemCount === 1 ? "item" : "items"}
</Text>
<View className="rounded-full bg-[#BEF04C] px-2.5 py-1">
<Text className="text-[10px] font-bold uppercase tracking-wider text-[#1B1B26]">
Lumio Market
</Text>
</View>
</View>
<Text className="text-[32px] font-bold tracking-tight text-white" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>
{fmt(total, currency)}
</Text>
<View className="gap-1 border-t border-white/10 pt-3">
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">Subtotal</Text>
<Text className="text-xs text-white tabular-nums">{fmt(summary.subtotal, currency)}</Text>
</View>
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">
Shipping{delivery ? ` (${delivery.label})` : ""}
</Text>
<Text className="text-xs text-white tabular-nums">
{shipping === 0 ? "Free" : fmt(shipping, currency)}
</Text>
</View>
{summary.tax != null ? (
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">Tax</Text>
<Text className="text-xs text-white tabular-nums">{fmt(summary.tax, currency)}</Text>
</View>
) : null}
{/* Sustainability line — checkouts increasingly carry it. */}
<View className="flex-row items-center gap-1.5 pt-1.5">
<Icon name="leaf" size="sm" color="#BEF04C" />
<Text className="text-[11px] text-white/60">
Carbon-neutral shipping on this order
</Text>
</View>
</View>
</View>
</View>
</Mount>
{/* Address */}
<Mount delay={BLOCK_STAGGER}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between pb-3">
<Text variant="small" className="font-semibold">
Shipping address
</Text>
<ChangeButton onPress={onChangeAddress} label="Change shipping address" />
</View>
<View className="flex-row gap-3">
<View className="h-10 w-10 items-center justify-center rounded-full bg-[#EDF8C4] dark:bg-[#1E2410]">
<Icon name="map-pin" size="sm" color="#65A30D" />
</View>
<View className="flex-1 gap-0.5">
<Text variant="small">{address.name}</Text>
<Text variant="muted">
{address.line1}
{address.line2 ? `, ${address.line2}` : ""}
</Text>
<Text variant="muted">
{address.city} {address.postalCode}
{address.country ? `, ${address.country}` : ""}
</Text>
</View>
</View>
</View>
</Mount>
{/* Delivery options */}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<Text variant="small" className="pb-3 font-semibold">
Delivery
</Text>
<RadioGroup
value={deliveryId}
onValueChange={(v) => {
setDeliveryId(v);
const opt = deliveryOptions.find((o) => o.id === v);
if (opt) onSelectDelivery?.(opt);
}}
accessibilityLabel="Delivery speed"
className="gap-2"
>
{deliveryOptions.map((opt) => {
const selected = opt.id === deliveryId;
return (
<View
key={opt.id}
className={cn(
"rounded-2xl border-2",
selected ? "border-[#BEF04C] bg-[#EDF8C4] dark:bg-[#1E2410]" : "border-transparent bg-[#F4F5F9] dark:bg-white/5"
)}
>
{/* The item is just the ring — row content is overlaid with
pointerEvents="none" so the whole row stays one target. */}
<RadioGroupItem
value={opt.id}
className="w-full px-4 py-4"
accessibilityLabel={`${opt.label}, ${opt.detail}, ${
opt.price === 0 ? "free" : fmt(opt.price, currency)
}`}
/>
<View
pointerEvents="none"
className="absolute inset-0 flex-row items-center justify-between pl-14 pr-4"
>
<View>
<Text variant="small">{opt.label}</Text>
<Text variant="muted" className="text-xs">
{opt.detail}
</Text>
</View>
<Text variant="small" className="font-semibold tabular-nums">
{opt.price === 0 ? "Free" : fmt(opt.price, currency)}
</Text>
</View>
</View>
);
})}
</RadioGroup>
</View>
</Mount>
{/* Payment */}
<Mount delay={BLOCK_STAGGER * 3}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between pb-3">
<Text variant="small" className="font-semibold">
Payment
</Text>
<ChangeButton onPress={onChangePayment} label="Change payment method" />
</View>
<View className="flex-row items-center gap-3">
<BrandMark brand={brandKey(paymentMethod.brand) ?? paymentMethod.brand.toLowerCase()} size={36} />
<View className="flex-1">
<Text variant="small" className="tabular-nums">
•••• {paymentMethod.last4}
</Text>
{paymentMethod.expiry ? (
<Text variant="muted" className="text-xs">
Expires {paymentMethod.expiry}
</Text>
) : null}
</View>
<View className="rounded-full bg-[#EDF8C4] px-2.5 py-1 dark:bg-[#1E2410]">
<Text className="text-[10px] font-bold uppercase tracking-wider text-[#3F6212] dark:text-[#BEF04C]">
Default
</Text>
</View>
</View>
</View>
</Mount>
</ScrollView>
{/* Sticky pay bar — a solid white card so scrolling content never
bleeds through the buttons. */}
<StickyBottomBar>
<View className="gap-3 rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
{error ? (
<Text variant="small" accessibilityRole="alert" className="text-destructive">
{error}
</Text>
) : null}
{/* Wallet-style express pay — bordered surface voice, quieter than
the Pay slab it sits above. */}
<Button
tone="surface"
icon={<Icon name="zap" size="sm" color="foreground" />}
onPress={() => {
haptics.light();
onExpressPay?.();
}}
accessibilityLabel={`Express checkout, ${fmt(total, currency)}`}
>
Express checkout
</Button>
<View
className="flex-row items-center gap-3"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Separator className="flex-1" />
<Text variant="muted" className="px-1 text-xs">
or pay with card
</Text>
<Separator className="flex-1" />
</View>
{/* The commit action is the ink slab — reads above everything
else on the sticky bar. */}
<Button
size="lg"
tone="inverse"
haptic="heavy"
disabled={error != null && error.length > 0}
icon={<Icon name="lock" size="sm" color="primaryForeground" />}
onPress={() => {
haptics.success();
onPlaceOrder?.();
}}
accessibilityLabel={`Pay ${fmt(total, currency)}`}
className="w-full bg-[#1B1B26]"
>
Pay {fmt(total, currency)}
</Button>
<View
className="flex-row items-center justify-center gap-1.5 self-center"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Icon name="shield" size="sm" color="#65A30D" />
<Text variant="muted" className="text-xs">
Secure checkout · 256-bit encrypted
</Text>
</View>
</View>
</StickyBottomBar>
</SafeAreaView>
);
}
Recreate the "Checkout Screen" screen in React Native using LumioUI.
Goal: Grouped address, delivery-speed radio-row, and payment cards with a live order summary, express-checkout CTA, and a shadowed sticky secure pay bar Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add ecommerce-checkout
```
Or pull just the components: `npx lumioui add badge button card gradient-button icon radio-group separator text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `badge` — Compact status pill with variants, icons and pulse option.
- imported but not rendered directly — likely used through a sibling or as a utility
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×2 — Wallet-style express pay — bordered surface voice, quieter than the Pay slab it sits above.
### `card` — Compound surface — header, title, content and footer slots.
- imported but not rendered directly — likely used through a sibling or as a utility
### `gradient-button` — Brand-gradient CTA pill with spring press, ink wash, and loading crossfade — flat face, no gloss — the Signature checkout/upgrade button.
- imported but not rendered directly — likely used through a sibling or as a utility
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×6
### `radio-group` — Single-select options with animated indicator.
- `<RadioGroup>` ×1
- `<RadioGroupItem>` ×1 — The item is just the ring — row content is overlaid with pointerEvents="none" so the whole row stays one target.
### `separator` — Hairline rule with orientation and spacing control.
- `<Separator>` ×2
### `text` — Themed type scale from caption to display.
- `<Text>` ×27
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/ecommerce/checkout.tsx` exporting CheckoutScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useState } from "react";
import { View, ScrollView } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, RadioGroup, RadioGroupItem, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, BrandMark, LumioMark, MONO, Mount, Press, StickyBottomBar, brandKey } from "../shared";
export interface CheckoutAddress {
name: string;
line1: string;
line2?: string;
city: string;
postalCode: string;
country?: string;
}
export interface PaymentMethod {
brand: string;
last4: string;
expiry?: string;
}
export interface DeliveryOption {
id: string;
label: string;
/** e.g. "5–7 business days" */
detail: string;
price: number;
}
export interface OrderSummary {
itemCount: number;
subtotal: number;
/** Base shipping for the default delivery option. */
shipping: number;
tax?: number;
total: number;
}
export interface CheckoutScreenProps {
address?: CheckoutAddress;
paymentMethod?: PaymentMethod;
deliveryOptions?: DeliveryOption[];
summary?: OrderSummary;
currency?: string;
/** Inline validation message shown above the pay bar; disables ordering while set. */
error?: string;
onPlaceOrder?: () => void;
/** Wallet-style one-tap pay above the card CTA. */
onExpressPay?: () => void;
onChangeAddress?: () => void;
onChangePayment?: () => void;
onSelectDelivery?: (option: DeliveryOption) => void;
onBack?: () => void;
}
const DEFAULT_ADDRESS: CheckoutAddress = {
name: "Amara Chen",
line1: "421 Harbor Lane",
line2: "Apt 5B",
city: "San Francisco, CA",
postalCode: "94107",
country: "United States",
};
const DEFAULT_PAYMENT: PaymentMethod = { brand: "Visa", last4: "4821", expiry: "09/28" };
const DEFAULT_DELIVERY: DeliveryOption[] = [
{ id: "standard", label: "Standard", detail: "5–7 business days", price: 0 },
{ id: "express", label: "Express", detail: "2–3 business days", price: 12 },
{ id: "priority", label: "Priority", detail: "Next business day", price: 24 },
];
// Same bag the cart screen ships: overcoat $248 + boots $295 + 2× tee $170
// = $713, 8.5% tax → $60.61, Standard delivery free → $773.61.
const DEFAULT_SUMMARY: OrderSummary = {
itemCount: 4,
subtotal: 713,
shipping: 0,
tax: 60.61,
total: 773.61,
};
/** Prices always render with two decimals ($628.00). */
const fmt = (n: number, currency = "$") =>
`${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
function ChangeButton({ onPress, label }: { onPress?: () => void; label: string }) {
if (!onPress) return null;
return (
<Press
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={label}
hitSlop={12}
className="min-h-11 justify-center px-2"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Change
</Text>
</Press>
);
}
/** Checkout — grouped address, delivery, payment and summary sections with a
* sticky secure "Pay" bar. */
export function CheckoutScreen({
address = DEFAULT_ADDRESS,
paymentMethod = DEFAULT_PAYMENT,
deliveryOptions = DEFAULT_DELIVERY,
summary = DEFAULT_SUMMARY,
currency = "$",
error,
onPlaceOrder,
onExpressPay,
onChangeAddress,
onChangePayment,
onSelectDelivery,
onBack,
}: CheckoutScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [deliveryId, setDeliveryId] = useState(deliveryOptions[0]?.id ?? "");
const delivery = deliveryOptions.find((o) => o.id === deliveryId) ?? deliveryOptions[0];
const shipping = delivery?.price ?? summary.shipping;
const total = summary.subtotal + shipping + (summary.tax ?? 0);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill. */}
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Checkout
</Text>
</View>
</View>
</View>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6 pb-60"
contentContainerStyle={{ paddingTop: insets.top + 60 }}
contentInsetAdjustmentBehavior="automatic"
>
{/* Total hero — dark gradient card leads the screen: the number
the user is about to commit, with the line items underneath.
Raw hex is art direction (like StoryChrome). */}
<Mount>
<View className="overflow-hidden rounded-3xl bg-[#1B1B26]">
<View className="gap-4 p-5">
<View className="flex-row items-center justify-between">
<Text className="text-xs font-medium uppercase tracking-wider text-white/50">
Order total · {summary.itemCount} {summary.itemCount === 1 ? "item" : "items"}
</Text>
<View className="rounded-full bg-[#BEF04C] px-2.5 py-1">
<Text className="text-[10px] font-bold uppercase tracking-wider text-[#1B1B26]">
Lumio Market
</Text>
</View>
</View>
<Text className="text-[32px] font-bold tracking-tight text-white" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>
{fmt(total, currency)}
</Text>
<View className="gap-1 border-t border-white/10 pt-3">
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">Subtotal</Text>
<Text className="text-xs text-white tabular-nums">{fmt(summary.subtotal, currency)}</Text>
</View>
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">
Shipping{delivery ? ` (${delivery.label})` : ""}
</Text>
<Text className="text-xs text-white tabular-nums">
{shipping === 0 ? "Free" : fmt(shipping, currency)}
</Text>
</View>
{summary.tax != null ? (
<View className="flex-row items-center justify-between py-0.5">
<Text className="text-xs text-white/60">Tax</Text>
<Text className="text-xs text-white tabular-nums">{fmt(summary.tax, currency)}</Text>
</View>
) : null}
{/* Sustainability line — checkouts increasingly carry it. */}
<View className="flex-row items-center gap-1.5 pt-1.5">
<Icon name="leaf" size="sm" color="#BEF04C" />
<Text className="text-[11px] text-white/60">
Carbon-neutral shipping on this order
</Text>
</View>
</View>
</View>
</View>
</Mount>
{/* Address */}
<Mount delay={BLOCK_STAGGER}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between pb-3">
<Text variant="small" className="font-semibold">
Shipping address
</Text>
<ChangeButton onPress={onChangeAddress} label="Change shipping address" />
</View>
<View className="flex-row gap-3">
<View className="h-10 w-10 items-center justify-center rounded-full bg-[#EDF8C4] dark:bg-[#1E2410]">
<Icon name="map-pin" size="sm" color="#65A30D" />
</View>
<View className="flex-1 gap-0.5">
<Text variant="small">{address.name}</Text>
<Text variant="muted">
{address.line1}
{address.line2 ? `, ${address.line2}` : ""}
</Text>
<Text variant="muted">
{address.city} {address.postalCode}
{address.country ? `, ${address.country}` : ""}
</Text>
</View>
</View>
</View>
</Mount>
{/* Delivery options */}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<Text variant="small" className="pb-3 font-semibold">
Delivery
</Text>
<RadioGroup
value={deliveryId}
onValueChange={(v) => {
setDeliveryId(v);
const opt = deliveryOptions.find((o) => o.id === v);
if (opt) onSelectDelivery?.(opt);
}}
accessibilityLabel="Delivery speed"
className="gap-2"
>
{deliveryOptions.map((opt) => {
const selected = opt.id === deliveryId;
return (
<View
key={opt.id}
className={cn(
"rounded-2xl border-2",
selected ? "border-[#BEF04C] bg-[#EDF8C4] dark:bg-[#1E2410]" : "border-transparent bg-[#F4F5F9] dark:bg-white/5"
)}
>
{/* The item is just the ring — row content is overlaid with
pointerEvents="none" so the whole row stays one target. */}
<RadioGroupItem
value={opt.id}
className="w-full px-4 py-4"
accessibilityLabel={`${opt.label}, ${opt.detail}, ${
opt.price === 0 ? "free" : fmt(opt.price, currency)
}`}
/>
<View
pointerEvents="none"
className="absolute inset-0 flex-row items-center justify-between pl-14 pr-4"
>
<View>
<Text variant="small">{opt.label}</Text>
<Text variant="muted" className="text-xs">
{opt.detail}
</Text>
</View>
<Text variant="small" className="font-semibold tabular-nums">
{opt.price === 0 ? "Free" : fmt(opt.price, currency)}
</Text>
</View>
</View>
);
})}
</RadioGroup>
</View>
</Mount>
{/* Payment */}
<Mount delay={BLOCK_STAGGER * 3}>
<View className="rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between pb-3">
<Text variant="small" className="font-semibold">
Payment
</Text>
<ChangeButton onPress={onChangePayment} label="Change payment method" />
</View>
<View className="flex-row items-center gap-3">
<BrandMark brand={brandKey(paymentMethod.brand) ?? paymentMethod.brand.toLowerCase()} size={36} />
<View className="flex-1">
<Text variant="small" className="tabular-nums">
•••• {paymentMethod.last4}
</Text>
{paymentMethod.expiry ? (
<Text variant="muted" className="text-xs">
Expires {paymentMethod.expiry}
</Text>
) : null}
</View>
<View className="rounded-full bg-[#EDF8C4] px-2.5 py-1 dark:bg-[#1E2410]">
<Text className="text-[10px] font-bold uppercase tracking-wider text-[#3F6212] dark:text-[#BEF04C]">
Default
</Text>
</View>
</View>
</View>
</Mount>
</ScrollView>
{/* Sticky pay bar — a solid white card so scrolling content never
bleeds through the buttons. */}
<StickyBottomBar>
<View className="gap-3 rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
{error ? (
<Text variant="small" accessibilityRole="alert" className="text-destructive">
{error}
</Text>
) : null}
{/* Wallet-style express pay — bordered surface voice, quieter than
the Pay slab it sits above. */}
<Button
tone="surface"
icon={<Icon name="zap" size="sm" color="foreground" />}
onPress={() => {
haptics.light();
onExpressPay?.();
}}
accessibilityLabel={`Express checkout, ${fmt(total, currency)}`}
>
Express checkout
</Button>
<View
className="flex-row items-center gap-3"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Separator className="flex-1" />
<Text variant="muted" className="px-1 text-xs">
or pay with card
</Text>
<Separator className="flex-1" />
</View>
{/* The commit action is the ink slab — reads above everything
else on the sticky bar. */}
<Button
size="lg"
tone="inverse"
haptic="heavy"
disabled={error != null && error.length > 0}
icon={<Icon name="lock" size="sm" color="primaryForeground" />}
onPress={() => {
haptics.success();
onPlaceOrder?.();
}}
accessibilityLabel={`Pay ${fmt(total, currency)}`}
className="w-full bg-[#1B1B26]"
>
Pay {fmt(total, currency)}
</Button>
<View
className="flex-row items-center justify-center gap-1.5 self-center"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Icon name="shield" size="sm" color="#65A30D" />
<Text variant="muted" className="text-xs">
Secure checkout · 256-bit encrypted
</Text>
</View>
</View>
</StickyBottomBar>
</SafeAreaView>
);
}
```
Screen: https://lumioui.dev/screens/ecommerce-checkout