@whop/elements-react-native 0.1.0

package/src/elements/payment/index.tsx

@@ -0,0 +1,497 @@
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+
+import type { CardNetworkArt } from '../../api/types';
+import type { CollectedPayment } from '../../core/payments/mint';
+import {
+	detailTemplate,
+	formatMinorAmount,
+	type MatrixEntry,
+	methodBillingCountries,
+	orderRank,
+	presentMethod,
+	type WalletAvailability,
+} from '../../core/payments/detail';
+import { PaymentsRefusalError } from '../../core/payments/refusals';
+import { mergeBillingWithCollected } from '../../core/payments/billing-merge';
+import { assertCardBilling, type MintBillingDetails, validateBillingEmail } from '../../core/payments/mint';
+import { useLocale, useT } from '../../i18n';
+import { usePaymentsState, usePaymentsStore } from '../../namespace';
+import { WALLET_TYPE_FOR_PLATFORM, WhopPlatformPay } from '../../native';
+import { alphaStep, step, useTheme } from '../../theme/provider';
+import { ElementFrame } from '../../ui/element-frame';
+import { ErrorFace, part, Skeleton, Stack } from '../../ui/primitives';
+import { PaymentMethodIcon } from '../../ui/payment-method-icon';
+import { CardElement } from '../card';
+import { DeclaredFields, useDeclaredFields } from './declared-fields';
+import { mergeWalletContact } from '../../core/payments/wallet-contact';
+import { collectWallet, useWalletAvailability, WalletPayButton, walletRequestFor } from './wallet';
+
+export interface PaymentChangePayload {
+	complete: boolean;
+	type?: string;
+	supportsBuyerFee?: boolean;
+	method?: {
+		type: string;
+		category: string;
+		template: string;
+		display_name: string;
+	};
+}
+
+export interface PaymentElementProps {
+	/** Method display order, Stripe's `paymentMethodOrder` semantics. Unlisted types keep their
+	 *  incoming relative order behind the listed ones. */
+	order?: string[];
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onChange?: (payload: PaymentChangePayload) => void;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}
+
+/**
+ * Shows the payment methods offered for this charge and collects the selected one's required
+ * fields.
+ *
+ * The offered set is the matrix filtered by the same eight `presentMethod` gates the web element
+ * applies, from the same inputs. The surface is declared `direct_checkout` because an app owns its
+ * own presentation the way a first-party document does — and unlike an iframe it can hand a
+ * full-page step to the system browser, so `full_page`-only methods stay in the list.
+ */
+export function PaymentElement({ order, style, fallback, onChange, onReady, onError }: PaymentElementProps) {
+	const t = useT();
+	const locale = useLocale();
+	const theme = useTheme();
+	const store = usePaymentsStore();
+	const charge = usePaymentsState((s) => s.charge);
+	const accountId = usePaymentsState((s) => s.accountId);
+	const addressLive = usePaymentsState((s) => s.addressLive);
+	// Reactive, like addressLive beside it. Read through store.getSnapshot() inside the walletRequest
+	// memo this went stale: the store's identity never changes, so clearing an email that had been
+	// present left requiresEmail false and the sheet stopped collecting one.
+	const buyerEmail = usePaymentsState((s) => s.buyerEmail);
+	const options = store.getOptions();
+
+	const [entries, setEntries] = useState<MatrixEntry[] | null>(null);
+	const [failure, setFailure] = useState<{ message: string; code?: string } | null>(null);
+	const [selectedType, setSelectedType] = useState<string | undefined>(undefined);
+
+	const currency = charge.configured ? charge.currency : undefined;
+	const amount = charge.configured ? charge.amount : undefined;
+
+	useEffect(() => {
+		if (!accountId || !currency || amount === undefined) return;
+		let alive = true;
+		setEntries(null);
+		store.client.paymentMethodTypes
+			.list({ account_id: accountId, currency, amount, surface: store.surface })
+			.then((page) => alive && setEntries(page.data as MatrixEntry[]))
+			.catch((err: Error) => alive && setFailure({ message: err.message, code: 'PAYMENT_METHODS_FAILED' }));
+		return () => {
+			alive = false;
+		};
+	}, [accountId, currency, amount, store]);
+
+	const walletEntry = useMemo(
+		() => entries?.find((entry) => entry.type === WALLET_TYPE_FOR_PLATFORM),
+		[entries],
+	);
+	const walletAvailable = useWalletAvailability(walletEntry);
+
+	const availability = useMemo<WalletAvailability | undefined>(() => {
+		if (walletAvailable === undefined) return undefined;
+		return Platform.OS === 'ios' ? { applePay: walletAvailable } : { googlePay: walletAvailable };
+	}, [walletAvailable]);
+
+	// Declared ahead of `offers`, which filters on it. A `const` read from a closure that runs during
+	// the same render is a temporal dead zone, not a hoist: this threw
+	// "Cannot access 'billingCountry' before initialization" and the element painted no tiles at all.
+	const billingCountry = usePaymentsState((s) => s.addressCollected?.address?.country);
+
+	const offers = useMemo(() => {
+		if (!entries || !charge.configured) return [];
+		const filtered = entries.filter((entry) =>
+			presentMethod(
+				entry,
+				charge.currency,
+				charge.amount,
+				charge.setupFutureUsage,
+				availability,
+				charge.paymentMethodConfiguration,
+				store.surface,
+				billingCountry,
+			),
+		);
+		const ranking = order ?? options.order ?? [];
+		return filtered
+			.map((entry, index) => ({ entry, index }))
+			.sort((a, b) => orderRank(a.entry.type, ranking) - orderRank(b.entry.type, ranking) || a.index - b.index)
+			.map(({ entry }) => entry);
+	}, [entries, charge, availability, order, options.order, store.surface, billingCountry]);
+
+	const selected = offers.find((entry) => entry.type === selectedType);
+	const template = selected ? detailTemplate(selected) : undefined;
+
+	const declared = useDeclaredFields(selected, billingCountry);
+	const [cardComplete, setCardComplete] = useState(false);
+	const [walletCollected, setWalletCollected] = useState<Awaited<ReturnType<typeof collectWallet>> | null>(null);
+	const [walletError, setWalletError] = useState<string | null>(null);
+	const [walletPresenting, setWalletPresenting] = useState(false);
+
+	const isWallet = template === 'wallet_sheet';
+	const isCard = selected?.category === 'card';
+	const complete =
+		Boolean(selected) &&
+		(isWallet ? Boolean(walletCollected) : isCard ? cardComplete && declared.complete : declared.complete);
+
+	// A wallet payload is bound to the sheet that produced it, and the sheet was priced. Clearing on
+	// the method alone left a token authorized for the OLD amount: `complete` stays true off that
+	// stale payload, so the button is disabled and the buyer cannot re-authorize, while confirm
+	// submits the old authorization against the new price.
+	const walletBinding = `${selectedType ?? ''}|${charge.currency}|${charge.amount}|${options.applePayMerchantId ?? ''}|${options.googlePayMerchantName ?? ''}`;
+	useEffect(() => {
+		setWalletCollected(null);
+		setWalletError(null);
+	}, [walletBinding]);
+
+	// The first offer is selected once the list settles, so a single-method checkout needs no tap.
+	// A re-priced charge re-filters the matrix, and the selected method can drop out of it. Left
+	// alone the selection points at a type no tile renders: nothing looks selected and confirm
+	// refuses. Fall back to the new first offer.
+	useEffect(() => {
+		if (offers.length === 0) return;
+		if (selectedType && offers.some((entry) => entry.type === selectedType)) return;
+		setSelectedType(offers[0]!.type);
+	}, [offers, selectedType]);
+
+	// The entry's per-currency country list is the method's billing-country constraint, and "*"
+	// anywhere in it means unrestricted. A mounted address element intersects it with the
+	// integrator's own allowedCountries, so a method that only serves a few countries narrows the
+	// picker instead of letting the buyer choose one it will refuse.
+	const methodCountries = useMemo(
+		() => (charge.configured ? methodBillingCountries(selected, charge.currency) : null),
+		[selected, charge],
+	);
+	// The controller's mirror of the selection: the confirm dispatcher reads it, and a mounted
+	// address element narrows its country selector from it.
+	useEffect(() => {
+		store.patch({
+			selectedType,
+			selectedCategory: selected?.category,
+			selectedTemplate: template,
+			selectedComplete: complete,
+			methodCountries,
+		});
+	}, [store, selectedType, selected?.category, template, complete, methodCountries]);
+
+	// Unmount only, so the mirror never outlives the surface that owns it: a still-mounted address
+	// element would otherwise keep narrowing its picker to a method the buyer can no longer see.
+	useEffect(
+		() => () =>
+			store.patch({
+				selectedType: '',
+				selectedCategory: undefined,
+				selectedTemplate: undefined,
+				selectedComplete: false,
+				methodCountries: null,
+			}),
+		[store],
+	);
+
+	const latestChange = useRef(onChange);
+	latestChange.current = onChange;
+	useEffect(() => {
+		latestChange.current?.({
+			complete,
+			type: selected?.type,
+			supportsBuyerFee: (selected as { supports_buyer_fee?: boolean } | undefined)?.supports_buyer_fee,
+			method: selected
+				? {
+						type: selected.type,
+						category: selected.category,
+						template: detailTemplate(selected),
+						display_name: selected.display_name,
+					}
+				: undefined,
+		});
+	}, [complete, selected]);
+
+	const walletRequest = useMemo(() => {
+		if (!selected || !isWallet || !charge.configured) return null;
+		return walletRequestFor(selected, {
+			currency: charge.currency,
+			amount: charge.amount,
+			merchantName: options.googlePayMerchantName ?? 'Whop',
+			applePayMerchantId: options.applePayMerchantId,
+			requiresBillingAddress: !addressLive,
+			requiresEmail: !buyerEmail,
+		});
+	}, [selected, isWallet, charge, options, addressLive, buyerEmail]);
+
+	const collect = useCallback(
+		async (input: { billingDetails?: Partial<{ email: string; name: string }> }): Promise<CollectedPayment> => {
+			if (!selected) {
+				throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'No payment method is selected');
+			}
+			if (isWallet) {
+				if (!walletCollected) {
+					throw new PaymentsRefusalError(
+						'WALLET_UNAVAILABLE',
+						'Tap the wallet button to authorize the payment before confirming',
+					);
+				}
+				// The sheet is asked for an email and a billing address exactly when no element is mounted
+				// to supply them, so its answers must be folded in BEFORE validation. Validating first
+				// rejected a buyer who had just typed their email into Apple Pay.
+				return {
+					paymentMethod: walletCollected.paymentMethod,
+					billingDetails: validateBillingEmail(mergeWalletContact(input?.billingDetails, walletCollected.contact)),
+				};
+			}
+
+			const billingDetails = validateBillingEmail(input?.billingDetails);
+
+			if (!declared.complete) {
+				declared.revealErrors();
+				throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'Complete the required fields for this method');
+			}
+			const values = await declared.collect();
+
+			if (isCard) {
+				// The address element supplies the billing NAME, and createConfirmationToken merges it
+				// only after this returns. Asserting against the seeded bag therefore rejected the
+				// default checkout — an AddressElement and a PaymentElement with no explicit
+				// billingDetails — for a name the form had already collected.
+				const settled = store.getSnapshot();
+				const withAddress = settled.addressLive
+					? ((mergeBillingWithCollected(billingDetails, settled.addressCollected) as
+							| MintBillingDetails
+							| undefined) ?? billingDetails)
+					: billingDetails;
+				assertCardBilling(withAddress);
+				// The card tile mounts its own CardElement, which registers under `card`. Reaching it by
+				// kind is required: `liveSurface()` prefers `payment`, which is this very surface.
+				const cardSurface = store.surfaceOf('card');
+				if (!cardSurface) {
+					throw new PaymentsRefusalError('NO_COLLECTION_SURFACE', 'The card fields are not ready');
+				}
+				const collected = await cardSurface.collect({ billingDetails: withAddress });
+				return {
+					paymentMethod: { ...collected.paymentMethod, ...values.paymentMethod },
+					billingDetails: collected.billingDetails,
+					billingExtra: values.billingExtra,
+				};
+			}
+
+			const categoryPayload: Record<string, unknown> = { ...values.paymentMethod };
+			if (values.secureTokenIntent) categoryPayload.token_intent = values.secureTokenIntent;
+
+			return {
+				paymentMethod: {
+					type: selected.type,
+					category: selected.category,
+					[selected.category]: categoryPayload,
+				},
+				billingDetails,
+				billingExtra: values.billingExtra,
+			};
+		},
+		[selected, isWallet, isCard, walletCollected, declared, store],
+	);
+
+	/**
+	 * The sheet's own verdict settles at tokenization, not at confirm.
+	 *
+	 * Holding it open until the server answers needs the deferred-conclusion rail the composed
+	 * checkout arms; a standalone payment element has no such rail on the web either, and its
+	 * confirm is server-side and unobservable from here. A refused confirm therefore surfaces in the
+	 * app's own UI rather than in the sheet.
+	 */
+	const presentWallet = useCallback(async () => {
+		if (!selected || !walletRequest || walletPresenting) return;
+		setWalletError(null);
+		setWalletPresenting(true);
+		try {
+			setWalletCollected(await collectWallet(selected, walletRequest));
+			WhopPlatformPay.complete(true);
+		} catch (err) {
+			WhopPlatformPay.complete(false);
+			const refused = err instanceof PaymentsRefusalError && err.code === 'WALLET_UNAVAILABLE';
+			// A dismissal is an outcome, not a failure.
+			if (!refused) setWalletError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setWalletPresenting(false);
+		}
+	}, [selected, walletRequest, walletPresenting]);
+
+	// The payment element owns the selection, so it registers ahead of a bare card unit.
+	const latestCollect = useRef(collect);
+	latestCollect.current = collect;
+	useEffect(
+		() =>
+			store.registerSurface({
+				kind: 'payment',
+				collect: (input) => latestCollect.current(input),
+			}),
+		[store],
+	);
+
+	const ready = entries !== null && (walletEntry === undefined || walletAvailable !== undefined);
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={
+				<Stack>
+					<Skeleton height={56} />
+					<Skeleton height={56} />
+					<Skeleton height={56} />
+				</Stack>
+			}
+			ready={ready}
+			error={failure}
+			onReady={onReady}
+			onError={onError}
+		>
+			{offers.length === 0 && entries !== null ? (
+				<View
+					style={{
+						padding: theme.tokens.spacing * 4,
+						borderRadius: theme.tokens.radius,
+						backgroundColor: alphaStep(theme.gray, 2),
+					}}
+				>
+					<Text style={{ color: step(theme.gray, 11), fontSize: theme.tokens.fontSize }}>
+						{t('No payment methods are available')}
+					</Text>
+				</View>
+			) : (
+				<Stack>
+					{offers.map((entry) => {
+						const active = entry.type === selectedType;
+						return (
+							<View key={entry.type}>
+								<MethodTile
+									entry={entry}
+									active={active}
+									amountLabel={
+										charge.configured ? formatMinorAmount(charge.amount, charge.currency, locale) : undefined
+									}
+									onPress={() => setSelectedType(entry.type)}
+								/>
+								{active ? (
+									<View style={[styles.detail, part(theme, 'whop-PaymentMethodDetail')]}>
+										{isCard ? (
+											<CardElement onChange={(payload) => setCardComplete(payload.complete)} />
+										) : null}
+										<DeclaredFields state={declared} />
+										{isWallet && walletRequest ? (
+											<>
+												<WalletPayButton onPress={presentWallet} disabled={walletPresenting || Boolean(walletCollected)} />
+												{walletError ? <ErrorFace message={walletError} /> : null}
+											</>
+										) : null}
+									</View>
+								) : null}
+							</View>
+						);
+					})}
+				</Stack>
+			)}
+		</ElementFrame>
+	);
+}
+
+function MethodTile({
+	entry,
+	active,
+	amountLabel,
+	onPress,
+}: {
+	entry: MatrixEntry;
+	active: boolean;
+	amountLabel: string | undefined;
+	onPress: () => void;
+}) {
+	const theme = useTheme();
+	return (
+		<Pressable
+			accessibilityRole="radio"
+			accessibilityState={{ selected: active }}
+			accessibilityLabel={entry.display_name}
+			onPress={onPress}
+			style={({ pressed }) => [
+				styles.tile,
+				{
+					minHeight: theme.tokens.controlHeight + 12,
+					borderRadius: theme.tokens.radius,
+					borderWidth: theme.tokens.borderWidth,
+					borderColor: active ? step(theme.accent, 8) : alphaStep(theme.gray, 6),
+					backgroundColor: pressed ? alphaStep(theme.gray, 2) : step(theme.gray, 1),
+					paddingHorizontal: theme.tokens.spacing * 3,
+				},
+				part(theme, 'whop-PaymentMethodTile'),
+				active ? part(theme, 'whop-PaymentMethodRowSelected') : null,
+			]}
+		>
+			<View
+				style={[
+					styles.radio,
+					{ borderColor: active ? step(theme.accent, 9) : alphaStep(theme.gray, 7) },
+				]}
+			>
+				{active ? <View style={[styles.dot, { backgroundColor: step(theme.accent, 9) }]} /> : null}
+			</View>
+			<PaymentMethodIcon icons={entry.icons} size={20} />
+			<Text
+				numberOfLines={1}
+				style={[
+					{
+						flexShrink: 1,
+						fontSize: theme.tokens.fontSize,
+						fontFamily: theme.tokens.fontFamily,
+						color: step(theme.gray, 12),
+					},
+					part(theme, 'whop-MethodTileLabel'),
+				]}
+			>
+				{entry.display_name}
+			</Text>
+			<View style={styles.spacer} />
+			{entry.category === 'card' && !active ? <BrandStrip networks={entry.card?.networks} /> : null}
+			{amountLabel ? (
+				<Text style={{ fontSize: theme.tokens.labelFontSize, color: step(theme.gray, 11) }}>{amountLabel}</Text>
+			) : null}
+		</Pressable>
+	);
+}
+
+/** The card row's accepted-network art. API art only: an entry without networks renders nothing,
+ *  the same rule the card fields follow. Tiles overlap left-under-right with the first on top,
+ *  which is the web strip's stacking without its mask moat (React Native has no mask). */
+function BrandStrip({ networks }: { networks: CardNetworkArt[] | undefined }) {
+	const strip = (networks ?? []).slice(0, BRAND_STRIP_TILES);
+	if (strip.length === 0) return null;
+	return (
+		<View style={styles.row}>
+			{strip.map((network, index) => (
+				<View key={network.brand} style={{ marginLeft: index > 0 ? -8 : 0, zIndex: strip.length - index }}>
+					<PaymentMethodIcon icons={network.icons} size={19} />
+				</View>
+			))}
+		</View>
+	);
+}
+
+const BRAND_STRIP_TILES = 4;
+
+const styles = StyleSheet.create({
+	tile: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+	row: { flexDirection: 'row', alignItems: 'center' },
+	spacer: { flex: 1 },
+	radio: { width: 18, height: 18, borderRadius: 9, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+	dot: { width: 8, height: 8, borderRadius: 4 },
+	detail: { paddingTop: 12, gap: 12 },
+});

package/src/elements/payment/wallet.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react';
+import { Platform, View } from 'react-native';
+
+import { currencyMinorDigits } from '../../core/payments/currency';
+import type { MatrixEntry } from '../../core/payments/detail';
+import { createRawTokenIntent } from '../../core/payments/secure-fields';
+import { PaymentsRefusalError } from '../../core/payments/refusals';
+import { readSheetResult, type WalletContact } from '../../core/payments/wallet-contact';
+import {
+	WALLET_TYPE_FOR_PLATFORM,
+	WhopPayButton,
+	WhopPlatformPay,
+	type WalletSheetRequest,
+} from '../../native';
+import { useTheme } from '../../theme/provider';
+
+export interface WalletChargeContext {
+	currency: string;
+	/** Minor units, the way the charge config carries it. */
+	amount: number;
+	merchantName: string;
+	applePayMerchantId: string | undefined;
+	requiresBillingAddress: boolean;
+	requiresEmail: boolean;
+}
+
+/**
+ * PassKit and the Google Pay API replace the web element's merchant-validation ceremony entirely:
+ * the app's own merchant identifier and on-device certificate prove the merchant, so the
+ * origin-clearance gates the web wallet lane carries have no counterpart here.
+ */
+export function walletRequestFor(entry: MatrixEntry, charge: WalletChargeContext): WalletSheetRequest | null {
+	const wallet = entry.wallet;
+	if (!wallet) return null;
+
+	const merchantIdentifier =
+		Platform.OS === 'ios'
+			? charge.applePayMerchantId ?? wallet.merchants?.[0]?.merchant_identifier
+			: (wallet.gateway_merchant_id ?? '');
+	if (Platform.OS === 'ios' && !merchantIdentifier) return null;
+
+	const countryCode = wallet.merchants?.[0]?.country ?? 'US';
+	const major = charge.amount / 10 ** currencyMinorDigits(charge.currency);
+
+	return {
+		merchantIdentifier: merchantIdentifier ?? '',
+		merchantName: charge.merchantName,
+		countryCode,
+		currencyCode: charge.currency,
+		totalPrice: major.toFixed(currencyMinorDigits(charge.currency)),
+		lineItems: [{ label: charge.merchantName, amount: major.toFixed(currencyMinorDigits(charge.currency)) }],
+		networks: wallet.allowed_card_networks ?? ['visa', 'mastercard', 'amex', 'discover'],
+		allowedCardNetworks: wallet.allowed_card_networks,
+		allowedAuthMethods: wallet.allowed_auth_methods,
+		environment: wallet.environment,
+		gateway: wallet.gateway,
+		gatewayMerchantId: wallet.gateway_merchant_id,
+		requiresBillingAddress: charge.requiresBillingAddress,
+		requiresEmail: charge.requiresEmail,
+	};
+}
+
+/**
+ * Presents the OS sheet and turns its payload into the confirmation-token payment method.
+ *
+ * The raw network payload goes straight to Basis Theory as a token intent — byte-identical to what
+ * the web wallet lane posts — so the backend sees the same `{ token_intent }` from either platform.
+ */
+export async function collectWallet(
+	entry: MatrixEntry,
+	request: WalletSheetRequest,
+): Promise<{
+	paymentMethod: { type: string; category: string; [key: string]: unknown };
+	contact: WalletContact;
+}> {
+	const publicKey = entry.wallet?.public_key;
+	if (!publicKey) {
+		throw new PaymentsRefusalError('WALLET_UNAVAILABLE', 'This wallet has no tokenizer key configured');
+	}
+
+	const payload = await WhopPlatformPay.present(request);
+	if (!payload) {
+		throw new PaymentsRefusalError('WALLET_UNAVAILABLE', 'The buyer dismissed the wallet sheet');
+	}
+
+	const { paymentData, ...contact } = readSheetResult(payload);
+
+	let data: unknown = paymentData;
+	try {
+		data = JSON.parse(paymentData);
+	} catch {
+		// Google Pay hands back an opaque gateway token string rather than JSON.
+	}
+
+	const tokenIntent = await createRawTokenIntent(publicKey, data);
+	return {
+		paymentMethod: {
+			type: entry.type,
+			category: 'wallet',
+			[entry.type]: {
+				token_intent: tokenIntent,
+				...(Platform.OS === 'ios' ? { merchant_identifier: request.merchantIdentifier } : {}),
+			},
+		},
+		contact,
+	};
+}
+
+
+
+/** Probes whether the OS will present a sheet at all; a false answer hides the tile entirely. */
+export function useWalletAvailability(entry: MatrixEntry | undefined): boolean | undefined {
+	const [available, setAvailable] = useState<boolean | undefined>(undefined);
+
+	useEffect(() => {
+		if (!entry) {
+			setAvailable(false);
+			return;
+		}
+		if (entry.type !== WALLET_TYPE_FOR_PLATFORM) {
+			setAvailable(false);
+			return;
+		}
+		let alive = true;
+		WhopPlatformPay.canPay({
+			networks: entry.wallet?.allowed_card_networks ?? ['visa', 'mastercard', 'amex', 'discover'],
+			allowedCardNetworks: entry.wallet?.allowed_card_networks,
+			allowedAuthMethods: entry.wallet?.allowed_auth_methods,
+			environment: entry.wallet?.environment,
+		})
+			.then((ok) => alive && setAvailable(ok))
+			.catch(() => alive && setAvailable(false));
+		return () => {
+			alive = false;
+		};
+	}, [entry]);
+
+	return available;
+}
+
+export function WalletPayButton({ onPress, disabled }: { onPress: () => void; disabled?: boolean }) {
+	const theme = useTheme();
+	return (
+		<View style={{ height: theme.tokens.controlHeight + 4 }}>
+			<WhopPayButton
+				style={{ flex: 1 }}
+				variant="pay"
+				buttonAppearance={theme.mode === 'dark' ? 'light' : 'dark'}
+				cornerRadius={theme.tokens.radius}
+				disabled={disabled}
+				onPayPress={onPress}
+			/>
+		</View>
+	);
+}