Saved cards and wallets as brand-tile rows with a default badge, per-card delete, 'Set as default' links, and a dashed add-payment slot
import * as React from "react";
import { useState } from "react";
import { View, ScrollView, Pressable } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { BrandMark, LumioMark, Mount, Press, ROW_STAGGER, ROW_STAGGER_CAP, RowIcon, SEPARATOR_INSET, brandKey } from "../shared";
export interface SavedPaymentMethod {
id: string;
/** Network wordmark on the brand tile — "VISA", "Mastercard", "PayPal". */
brand: string;
/** Masked hint — "•••• 4821" for cards, an account email for wallets. */
detail: string;
/** "08/28" — cards only. */
expiry?: string;
isDefault?: boolean;
}
export interface PaymentMethodsScreenProps {
methods?: SavedPaymentMethod[];
onAdd?: () => void;
onDelete?: (method: SavedPaymentMethod) => void;
onSetDefault?: (method: SavedPaymentMethod) => void;
onBack?: () => void;
}
const DEFAULT_METHODS: SavedPaymentMethod[] = [
{ id: "p1", brand: "VISA", detail: "•••• 4821", expiry: "09/28", isDefault: true },
{ id: "p2", brand: "Mastercard", detail: "•••• 5577", expiry: "01/27" },
{ id: "p3", brand: "PayPal", detail: "amara.chen@lumio.dev" },
];
/** Real card-network mark (Visa wordmark, MC overlapping discs, PayPal's
* double-P). Unknown brands render as a brand-colored tile. */
function BrandTile({ brand, onCard }: { brand: string; onCard?: boolean }) {
return (
<View
className={`items-center justify-center rounded-md ${onCard ? "bg-white/15 p-1.5" : ""}`}
accessibilityElementsHidden
importantForAccessibility="no"
>
<BrandMark brand={brandKey(brand) ?? brand.toLowerCase()} size={30} />
</View>
);
}
BrandTile.displayName = "BrandTile";
const CARD_TONES = ["#1B1B26", "#4C1D95", "#0F766E"] as const;
/** Wallet card — the physical card as a wide tile: brand, chip hint, masked
* digits and the default marker. This is the wallet-stack idiom (Apple
* Wallet, Revolut) — the card IS the content, not a list row about it. */
function WalletCard({ method, index }: { method: SavedPaymentMethod; index: number }) {
const tone = CARD_TONES[index % CARD_TONES.length];
return (
<View
className="w-[280px] gap-6 rounded-3xl p-5"
style={{ backgroundColor: tone }}
accessibilityElementsHidden
importantForAccessibility="no"
>
<View className="flex-row items-center justify-between">
<BrandTile brand={method.brand} onCard />
{method.isDefault ? (
<Text className="text-[10px] font-semibold uppercase tracking-widest text-white/80">
Default
</Text>
) : null}
</View>
<View className="gap-3">
{/* Chip + contactless hint — the marks a real card face carries. */}
<View className="h-7 w-10 rounded-md bg-white/20" />
<Text className="text-lg font-semibold tracking-[2px] text-white tabular-nums">
{method.detail}
</Text>
<View className="flex-row items-center justify-between">
<Text className="text-[11px] text-white/70">
{method.expiry ? `Exp ${method.expiry}` : method.brand}
</Text>
<Text className="text-[11px] font-medium uppercase tracking-wide text-white/70">
{method.brand === "PayPal" ? "Wallet" : "Debit"}
</Text>
</View>
</View>
</View>
);
}
WalletCard.displayName = "WalletCard";
function MethodCard({
method,
onDelete,
onSetDefault,
}: {
method: SavedPaymentMethod;
onDelete?: (m: SavedPaymentMethod) => void;
onSetDefault?: (m: SavedPaymentMethod) => void;
}) {
const haptics = useHaptic();
return (
<View className="gap-1 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="min-h-11 flex-row items-center gap-3">
<BrandTile brand={method.brand} />
<View className="flex-1">
<Text variant="small" className="tabular-nums">
{method.detail}
</Text>
{method.expiry ? (
<Text variant="muted" className="text-xs">
Expires {method.expiry}
</Text>
) : null}
</View>
{method.isDefault ? (
<View className="flex-row items-center gap-1 rounded-full bg-[#BEF04C] px-2 py-0.5">
<Icon name="check" size="sm" color="#1B1B26" />
<Text className="text-[10px] font-bold text-[#1B1B26]">Default</Text>
</View>
) : null}
{/* The default method can't be deleted — set another default first. */}
{onDelete && !method.isDefault ? (
<Pressable
onPress={() => {
haptics.warning();
onDelete(method);
}}
accessibilityRole="button"
accessibilityLabel={`Delete ${method.brand} ${method.detail}`}
hitSlop={8}
className="h-9 w-9 items-center justify-center rounded-full"
>
<Icon name="trash" size="sm" color="destructive" />
</Pressable>
) : null}
</View>
{!method.isDefault && onSetDefault ? (
<Pressable
onPress={() => {
haptics.selection();
onSetDefault(method);
}}
accessibilityRole="button"
accessibilityLabel={`Set ${method.brand} ${method.detail} as the default payment method`}
hitSlop={8}
className="min-h-8 justify-center self-start"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Set as default
</Text>
</Pressable>
) : null}
</View>
);
}
MethodCard.displayName = "MethodCard";
/** Payment methods — saved cards and wallets as brand-tile cards with a
* default badge, per-card delete, "Set as default", and a dashed add slot. */
export function PaymentMethodsScreen({
methods = DEFAULT_METHODS,
onAdd,
onDelete,
onSetDefault,
onBack,
}: PaymentMethodsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
// Local mirror of the default + deletions so taps feel alive without a
// wired host; a real host resolves these via the callbacks.
const [defaultId, setDefaultId] = useState<string | undefined>(
() => methods.find((m) => m.isDefault)?.id
);
const [removedIds, setRemovedIds] = useState<Set<string>>(new Set());
const visible = methods
.filter((m) => !removedIds.has(m.id))
.map((m) => ({ ...m, isDefault: m.id === defaultId }));
const setDefault = (m: SavedPaymentMethod) => {
setDefaultId(m.id);
onSetDefault?.(m);
};
const remove = (m: SavedPaymentMethod) => {
setRemovedIds((prev) => new Set(prev).add(m.id));
onDelete?.(m);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill + add. */}
<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>
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onAdd?.()}
accessibilityRole="button"
accessibilityLabel="Add a new payment method"
className="h-9 w-9 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
</Glass>
</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">
Payment methods
</Text>
</View>
</View>
</View>
{/* Card rail — the wallet stack at the top, then the manage list. */}
<Mount>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerClassName="gap-3 px-6 pb-3"
contentContainerStyle={{ paddingTop: insets.top + 60 }}
>
{visible.map((method, i) => (
<WalletCard key={method.id} method={method} index={i} />
))}
</ScrollView>
</Mount>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6"
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
{visible.map((method, i) => (
<Mount key={method.id} delay={Math.min(i * ROW_STAGGER, ROW_STAGGER_CAP)}>
<MethodCard
method={method}
onDelete={onDelete ? remove : undefined}
onSetDefault={setDefault}
/>
</Mount>
))}
{/* Add slot — dashed outline reads as "empty slot", not a filled card. */}
<Mount delay={Math.min(visible.length * ROW_STAGGER, ROW_STAGGER_CAP)}>
<Pressable
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityRole="button"
accessibilityLabel="Add a new payment method"
className="min-h-14 flex-row items-center justify-center gap-2 rounded-3xl border-2 border-dashed border-[#BEF04C] py-4"
>
<Icon name="plus" size="md" color="#65A30D" />
<Text variant="small" className="font-semibold text-[#65A30D]">
Add a payment method
</Text>
</Pressable>
</Mount>
{/* Billing context — where statements go and what the default is
used for. Real wallet screens carry this below the methods. */}
<View className="mx-[-8px] pt-2">
<List inset>
<List.Section title="Billing">
<List.Item
title="Billing address"
subtitle="12 Albion St, San Francisco, CA"
leading={<RowIcon name="map-pin" tone="orange" />}
showChevron
haptic="light"
/>
<List.Separator className={SEPARATOR_INSET} />
<List.Item
title="Payment history"
subtitle="Receipts and refunds"
leading={<RowIcon name="file-text" tone="purple" />}
showChevron
haptic="light"
/>
<List.Separator className={SEPARATOR_INSET} />
<List.Item
title="Secure checkout"
subtitle="Default method is used at checkout"
leading={<RowIcon name="lock" tone="green" />}
showChevron
haptic="light"
/>
</List.Section>
</List>
{/* Storage promise — wallet pages close on the security note. */}
<View className="flex-row items-center justify-center gap-1.5 pt-4">
<Icon name="shield" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-center text-xs">
Card numbers never live on this device
</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
PaymentMethodsScreen.displayName = "PaymentMethodsScreen";
Recreate the "Payment Methods Screen" screen in React Native using LumioUI.
Goal: Saved cards and wallets as brand-tile rows with a default badge, per-card delete, 'Set as default' links, and a dashed add-payment slot 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-payment-methods
```
Or pull just the components: `npx lumioui add badge button icon list 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.
- 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
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×11
## 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/payment-methods.tsx` exporting PaymentMethodsScreen. 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, Pressable } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { BrandMark, LumioMark, Mount, Press, ROW_STAGGER, ROW_STAGGER_CAP, RowIcon, SEPARATOR_INSET, brandKey } from "../shared";
export interface SavedPaymentMethod {
id: string;
/** Network wordmark on the brand tile — "VISA", "Mastercard", "PayPal". */
brand: string;
/** Masked hint — "•••• 4821" for cards, an account email for wallets. */
detail: string;
/** "08/28" — cards only. */
expiry?: string;
isDefault?: boolean;
}
export interface PaymentMethodsScreenProps {
methods?: SavedPaymentMethod[];
onAdd?: () => void;
onDelete?: (method: SavedPaymentMethod) => void;
onSetDefault?: (method: SavedPaymentMethod) => void;
onBack?: () => void;
}
const DEFAULT_METHODS: SavedPaymentMethod[] = [
{ id: "p1", brand: "VISA", detail: "•••• 4821", expiry: "09/28", isDefault: true },
{ id: "p2", brand: "Mastercard", detail: "•••• 5577", expiry: "01/27" },
{ id: "p3", brand: "PayPal", detail: "amara.chen@lumio.dev" },
];
/** Real card-network mark (Visa wordmark, MC overlapping discs, PayPal's
* double-P). Unknown brands render as a brand-colored tile. */
function BrandTile({ brand, onCard }: { brand: string; onCard?: boolean }) {
return (
<View
className={`items-center justify-center rounded-md ${onCard ? "bg-white/15 p-1.5" : ""}`}
accessibilityElementsHidden
importantForAccessibility="no"
>
<BrandMark brand={brandKey(brand) ?? brand.toLowerCase()} size={30} />
</View>
);
}
BrandTile.displayName = "BrandTile";
const CARD_TONES = ["#1B1B26", "#4C1D95", "#0F766E"] as const;
/** Wallet card — the physical card as a wide tile: brand, chip hint, masked
* digits and the default marker. This is the wallet-stack idiom (Apple
* Wallet, Revolut) — the card IS the content, not a list row about it. */
function WalletCard({ method, index }: { method: SavedPaymentMethod; index: number }) {
const tone = CARD_TONES[index % CARD_TONES.length];
return (
<View
className="w-[280px] gap-6 rounded-3xl p-5"
style={{ backgroundColor: tone }}
accessibilityElementsHidden
importantForAccessibility="no"
>
<View className="flex-row items-center justify-between">
<BrandTile brand={method.brand} onCard />
{method.isDefault ? (
<Text className="text-[10px] font-semibold uppercase tracking-widest text-white/80">
Default
</Text>
) : null}
</View>
<View className="gap-3">
{/* Chip + contactless hint — the marks a real card face carries. */}
<View className="h-7 w-10 rounded-md bg-white/20" />
<Text className="text-lg font-semibold tracking-[2px] text-white tabular-nums">
{method.detail}
</Text>
<View className="flex-row items-center justify-between">
<Text className="text-[11px] text-white/70">
{method.expiry ? `Exp ${method.expiry}` : method.brand}
</Text>
<Text className="text-[11px] font-medium uppercase tracking-wide text-white/70">
{method.brand === "PayPal" ? "Wallet" : "Debit"}
</Text>
</View>
</View>
</View>
);
}
WalletCard.displayName = "WalletCard";
function MethodCard({
method,
onDelete,
onSetDefault,
}: {
method: SavedPaymentMethod;
onDelete?: (m: SavedPaymentMethod) => void;
onSetDefault?: (m: SavedPaymentMethod) => void;
}) {
const haptics = useHaptic();
return (
<View className="gap-1 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="min-h-11 flex-row items-center gap-3">
<BrandTile brand={method.brand} />
<View className="flex-1">
<Text variant="small" className="tabular-nums">
{method.detail}
</Text>
{method.expiry ? (
<Text variant="muted" className="text-xs">
Expires {method.expiry}
</Text>
) : null}
</View>
{method.isDefault ? (
<View className="flex-row items-center gap-1 rounded-full bg-[#BEF04C] px-2 py-0.5">
<Icon name="check" size="sm" color="#1B1B26" />
<Text className="text-[10px] font-bold text-[#1B1B26]">Default</Text>
</View>
) : null}
{/* The default method can't be deleted — set another default first. */}
{onDelete && !method.isDefault ? (
<Pressable
onPress={() => {
haptics.warning();
onDelete(method);
}}
accessibilityRole="button"
accessibilityLabel={`Delete ${method.brand} ${method.detail}`}
hitSlop={8}
className="h-9 w-9 items-center justify-center rounded-full"
>
<Icon name="trash" size="sm" color="destructive" />
</Pressable>
) : null}
</View>
{!method.isDefault && onSetDefault ? (
<Pressable
onPress={() => {
haptics.selection();
onSetDefault(method);
}}
accessibilityRole="button"
accessibilityLabel={`Set ${method.brand} ${method.detail} as the default payment method`}
hitSlop={8}
className="min-h-8 justify-center self-start"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Set as default
</Text>
</Pressable>
) : null}
</View>
);
}
MethodCard.displayName = "MethodCard";
/** Payment methods — saved cards and wallets as brand-tile cards with a
* default badge, per-card delete, "Set as default", and a dashed add slot. */
export function PaymentMethodsScreen({
methods = DEFAULT_METHODS,
onAdd,
onDelete,
onSetDefault,
onBack,
}: PaymentMethodsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
// Local mirror of the default + deletions so taps feel alive without a
// wired host; a real host resolves these via the callbacks.
const [defaultId, setDefaultId] = useState<string | undefined>(
() => methods.find((m) => m.isDefault)?.id
);
const [removedIds, setRemovedIds] = useState<Set<string>>(new Set());
const visible = methods
.filter((m) => !removedIds.has(m.id))
.map((m) => ({ ...m, isDefault: m.id === defaultId }));
const setDefault = (m: SavedPaymentMethod) => {
setDefaultId(m.id);
onSetDefault?.(m);
};
const remove = (m: SavedPaymentMethod) => {
setRemovedIds((prev) => new Set(prev).add(m.id));
onDelete?.(m);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill + add. */}
<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>
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onAdd?.()}
accessibilityRole="button"
accessibilityLabel="Add a new payment method"
className="h-9 w-9 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
</Glass>
</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">
Payment methods
</Text>
</View>
</View>
</View>
{/* Card rail — the wallet stack at the top, then the manage list. */}
<Mount>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerClassName="gap-3 px-6 pb-3"
contentContainerStyle={{ paddingTop: insets.top + 60 }}
>
{visible.map((method, i) => (
<WalletCard key={method.id} method={method} index={i} />
))}
</ScrollView>
</Mount>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6"
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
{visible.map((method, i) => (
<Mount key={method.id} delay={Math.min(i * ROW_STAGGER, ROW_STAGGER_CAP)}>
<MethodCard
method={method}
onDelete={onDelete ? remove : undefined}
onSetDefault={setDefault}
/>
</Mount>
))}
{/* Add slot — dashed outline reads as "empty slot", not a filled card. */}
<Mount delay={Math.min(visible.length * ROW_STAGGER, ROW_STAGGER_CAP)}>
<Pressable
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityRole="button"
accessibilityLabel="Add a new payment method"
className="min-h-14 flex-row items-center justify-center gap-2 rounded-3xl border-2 border-dashed border-[#BEF04C] py-4"
>
<Icon name="plus" size="md" color="#65A30D" />
<Text variant="small" className="font-semibold text-[#65A30D]">
Add a payment method
</Text>
</Pressable>
</Mount>
{/* Billing context — where statements go and what the default is
used for. Real wallet screens carry this below the methods. */}
<View className="mx-[-8px] pt-2">
<List inset>
<List.Section title="Billing">
<List.Item
title="Billing address"
subtitle="12 Albion St, San Francisco, CA"
leading={<RowIcon name="map-pin" tone="orange" />}
showChevron
haptic="light"
/>
<List.Separator className={SEPARATOR_INSET} />
<List.Item
title="Payment history"
subtitle="Receipts and refunds"
leading={<RowIcon name="file-text" tone="purple" />}
showChevron
haptic="light"
/>
<List.Separator className={SEPARATOR_INSET} />
<List.Item
title="Secure checkout"
subtitle="Default method is used at checkout"
leading={<RowIcon name="lock" tone="green" />}
showChevron
haptic="light"
/>
</List.Section>
</List>
{/* Storage promise — wallet pages close on the security note. */}
<View className="flex-row items-center justify-center gap-1.5 pt-4">
<Icon name="shield" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-center text-xs">
Card numbers never live on this device
</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
PaymentMethodsScreen.displayName = "PaymentMethodsScreen";
```
Screen: https://lumioui.dev/screens/ecommerce-payment-methods