@whop/elements-react-native 0.1.0

package/src/elements/branding.tsx

@@ -0,0 +1,87 @@
+import { type ReactNode, useEffect } from 'react';
+import { Pressable, type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+
+import { useT } from '../i18n';
+import { usePaymentsStore } from '../namespace';
+import { WhopAuthSession } from '../native';
+import { alphaStep, useTheme } from '../theme/provider';
+import { ElementFrame } from '../ui/element-frame';
+import { part, Skeleton } from '../ui/primitives';
+import { WhopLogo } from '../ui/whop-logo';
+
+/** The embedded attribution the web element uses; an app mount is an embedded one. */
+const WHOP_URL = 'https://whop.com/?a=tristan';
+const TERMS_URL = 'https://whop.com/buyer-terms/';
+const PRIVACY_URL = 'https://whop.com/privacy/';
+
+export interface BrandingElementProps {
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}
+
+/**
+ * Whop is the merchant of record on these sales, so the buyer is told so on the screen where they
+ * pay. Mounting this is what unlocks `createConfirmationToken` — a payment surface without the
+ * notice refuses rather than charging quietly.
+ */
+export function BrandingElement({ style, fallback, onReady, onError }: BrandingElementProps) {
+	const t = useT();
+	const theme = useTheme();
+	const store = usePaymentsStore();
+
+	useEffect(() => {
+		store.patch({ brandingMounted: true });
+		return () => store.patch({ brandingMounted: false });
+	}, [store]);
+
+	const open = (url: string) => {
+		WhopAuthSession.present(url).catch(() => undefined);
+	};
+
+	const linkStyle = {
+		fontSize: 13,
+		lineHeight: 16,
+		fontFamily: theme.tokens.fontFamily,
+		color: alphaStep(theme.gray, 10),
+	};
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={<Skeleton height={20} />}
+			ready
+			onReady={onReady}
+			onError={onError}
+		>
+			<View style={[styles.root, part(theme, 'whop-Branding')]}>
+				<Pressable accessibilityRole="link" onPress={() => open(WHOP_URL)} style={styles.brand} hitSlop={6}>
+					<Text style={[linkStyle, part(theme, 'whop-BrandingLink')]}>{t('Powered by')}</Text>
+					<WhopLogo height={12} />
+				</Pressable>
+				<View style={[styles.divider, { backgroundColor: alphaStep(theme.gray, 5) }]} />
+				<Pressable accessibilityRole="link" onPress={() => open(TERMS_URL)} hitSlop={6}>
+					<Text style={[linkStyle, part(theme, 'whop-BrandingLink')]}>{t('Terms')}</Text>
+				</Pressable>
+				<Pressable accessibilityRole="link" onPress={() => open(PRIVACY_URL)} hitSlop={6}>
+					<Text style={[linkStyle, part(theme, 'whop-BrandingLink')]}>{t('Privacy')}</Text>
+				</Pressable>
+			</View>
+		</ElementFrame>
+	);
+}
+
+const styles = StyleSheet.create({
+	root: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		alignItems: 'center',
+		justifyContent: 'center',
+		gap: 16,
+		paddingTop: 4,
+	},
+	brand: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+	divider: { width: StyleSheet.hairlineWidth, height: 16 },
+});

package/src/elements/card-fields/context.tsx

@@ -0,0 +1,310 @@
+import {
+	createContext,
+	type MutableRefObject,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { useBasisTheory } from '@basis-theory/react-native-elements';
+
+import type { CardNetworkArt } from '../../api/types';
+import {
+	type BasisTheoryElements,
+	type CardFieldFailure,
+	type CardFieldFailures,
+	tokenizeCard,
+} from '../../core/payments/bt';
+import { mergeBillingWithCollected } from '../../core/payments/billing-merge';
+import { assertCardBilling, type CollectedPayment, type MintBillingDetails, validateBillingEmail } from '../../core/payments/mint';
+import { PaymentTokenizationError } from '../../core/payments/errors';
+import { PaymentsRefusalError } from '../../core/payments/refusals';
+import { usePaymentsState, usePaymentsStore } from '../../namespace';
+
+export interface CardFieldsChangePayload {
+	complete: boolean;
+	brand: string;
+	funding: string | null;
+}
+
+export interface CardFieldsState {
+	publicKey: string | undefined;
+	networks: CardNetworkArt[] | undefined;
+	layout: 'stacked' | 'compact';
+	bt: BasisTheoryElements | undefined;
+	loadError: string | null;
+	brand: string;
+	funding: string | null;
+	complete: { number: boolean; expiry: boolean; cvc: boolean };
+	errors: CardFieldFailures;
+	refs: MutableRefObject<{ number: unknown; expiryDate: unknown; cvc: unknown }>;
+	report: (field: 'number' | 'expiry' | 'cvc', event: FieldEvent) => void;
+	tokenize: () => Promise<string>;
+}
+
+export interface FieldEvent {
+	complete: boolean;
+	brand?: string;
+	funding?: string | null;
+	empty?: boolean;
+}
+
+const CardFieldsContext = createContext<CardFieldsState | null | undefined>(undefined);
+
+/** True while the fields are arranged by a composing unit (CardElement), false when a consumer
+ *  mounted one directly. A standalone field draws its own label and full rounding. */
+const CardComposedContext = createContext(false);
+
+export function CardComposed({ children }: { children: ReactNode }) {
+	return <CardComposedContext.Provider value={true}>{children}</CardComposedContext.Provider>;
+}
+
+export function useCardComposed(): boolean {
+	return useContext(CardComposedContext);
+}
+
+export function useCardFields(): CardFieldsState {
+	const value = useContext(CardFieldsContext);
+	if (value === undefined) {
+		throw new Error('Card field components must be used within <CardFields> or <CardElement>');
+	}
+	if (value === null) throw new Error('The card unit is not ready');
+	return value;
+}
+
+export interface CardFieldsProviderProps {
+	/** Advanced Basis Theory publishable key. Omit it to fetch the key automatically. */
+	publicKey?: string;
+	/** The seller's accepted card networks in display order. Omit to fetch alongside the key. */
+	networks?: CardNetworkArt[];
+	/** `stacked` puts the number above expiry and cvc. `compact` puts all three in one row. */
+	layout?: 'stacked' | 'compact';
+	children: ReactNode;
+	onChange?: (payload: CardFieldsChangePayload) => void;
+}
+
+/**
+ * The card unit: one Basis Theory client, three field refs, and the tokenization that assembles
+ * them.
+ *
+ * The refs are opaque handles — an id and a formatter. The number the buyer typed lives inside the
+ * Basis Theory component and reaches the vault without passing through this object, which is the
+ * whole PCI story.
+ */
+export function CardFieldsProvider({
+	publicKey,
+	networks,
+	layout = 'stacked',
+	children,
+	onChange,
+}: CardFieldsProviderProps) {
+	const store = usePaymentsStore();
+	const accountId = usePaymentsState((s) => s.accountId);
+
+	const [fetched, setFetched] = useState<{ publicKey?: string; networks?: CardNetworkArt[] } | null>(null);
+	const [configError, setConfigError] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (publicKey || !accountId) return;
+		let alive = true;
+		store.client.paymentMethodTypes
+			.retrieve('card', { account_id: accountId })
+			.then((entry) => {
+				if (!alive) return;
+				const key = entry.card?.public_key ?? undefined;
+				if (!key) {
+					setConfigError('card payments are not available for this account');
+					return;
+				}
+				setFetched({ publicKey: key, networks: entry.card?.networks });
+			})
+			.catch((err: Error) => alive && setConfigError(err.message));
+		return () => {
+			alive = false;
+		};
+	}, [publicKey, accountId, store]);
+
+	const resolvedKey = publicKey ?? fetched?.publicKey;
+	const resolvedNetworks = networks ?? fetched?.networks;
+
+	// Basis Theory is constructed ONLY once a real key exists. Initializing it with a placeholder
+	// makes the SDK surface its own "Please enter a valid API key" toast to the buyer, which is
+	// both wrong and unsuppressable — so the key gates the runtime instead. While it resolves the
+	// fields render their skeleton, which is what they would show anyway.
+	if (!resolvedKey) {
+		return (
+			<CardFieldsContext.Provider
+				value={{
+					publicKey: undefined,
+					networks: resolvedNetworks,
+					layout,
+					bt: undefined,
+					loadError: configError,
+					brand: 'unknown',
+					funding: null,
+					complete: { number: false, expiry: false, cvc: false },
+					errors: {},
+					refs: PENDING_REFS,
+					report: noop,
+					tokenize: notReady,
+				}}
+			>
+				{children}
+			</CardFieldsContext.Provider>
+		);
+	}
+
+	return (
+		<CardFieldsRuntime
+			publicKey={resolvedKey}
+			networks={resolvedNetworks}
+			layout={layout}
+			configError={configError}
+			onChange={onChange}
+		>
+			{children}
+		</CardFieldsRuntime>
+	);
+}
+
+const PENDING_REFS = { current: { number: null, expiryDate: null, cvc: null } };
+const noop = () => undefined;
+const notReady = (): Promise<string> => {
+	throw new PaymentTokenizationError('card_fields_not_ready', 'The card tokenizer is not ready yet');
+};
+
+function CardFieldsRuntime({
+	publicKey,
+	networks,
+	layout,
+	configError,
+	children,
+	onChange,
+}: {
+	publicKey: string;
+	networks: CardNetworkArt[] | undefined;
+	layout: 'stacked' | 'compact';
+	configError: string | null;
+	children: ReactNode;
+	onChange?: (payload: CardFieldsChangePayload) => void;
+}) {
+	const store = usePaymentsStore();
+	const accountId = usePaymentsState((s) => s.accountId);
+	const { bt, error: btError } = useBasisTheory(publicKey);
+
+	const refs = useRef<{ number: unknown; expiryDate: unknown; cvc: unknown }>({
+		number: null,
+		expiryDate: null,
+		cvc: null,
+	});
+
+	const [brand, setBrand] = useState('unknown');
+	const [funding, setFunding] = useState<string | null>(null);
+	const [complete, setComplete] = useState({ number: false, expiry: false, cvc: false });
+	const [errors, setErrors] = useState<CardFieldFailures>({});
+
+	const latestChange = useRef(onChange);
+	latestChange.current = onChange;
+
+	const allComplete = complete.number && complete.expiry && complete.cvc;
+	useEffect(() => {
+		latestChange.current?.({ complete: allComplete, brand, funding });
+	}, [allComplete, brand, funding]);
+
+	const report = useCallback((field: 'number' | 'expiry' | 'cvc', event: FieldEvent) => {
+		setComplete((prev) => (prev[field] === event.complete ? prev : { ...prev, [field]: event.complete }));
+		if (event.brand !== undefined) setBrand(event.brand || 'unknown');
+		if (event.funding !== undefined) setFunding(event.funding ?? null);
+		// A field the buyer is fixing should not keep wearing the last failure.
+		setErrors((prev) => (prev[field] === undefined ? prev : { ...prev, [field]: undefined }));
+	}, []);
+
+	const tokenize = useCallback(async (): Promise<string> => {
+		if (!bt) {
+			throw new PaymentTokenizationError('card_fields_not_ready', 'The card tokenizer is not ready yet');
+		}
+		if (!accountId) {
+			throw new PaymentsRefusalError('CHARGE_CONFIG_MISSING', 'No seller account is in scope for this card unit');
+		}
+		const expiry = refs.current.expiryDate as { month?: () => unknown; year?: () => unknown } | null;
+		const result = await tokenizeCard(
+			bt,
+			{
+				number: refs.current.number,
+				expiryMonth: expiry?.month?.() ?? null,
+				expiryYear: expiry?.year?.() ?? null,
+				cvc: refs.current.cvc,
+			},
+			{ accountId, publicKey },
+			store.client,
+		);
+		if (!result.ok) {
+			if (result.fields) setErrors(result.fields);
+			throw new PaymentTokenizationError(result.code, result.message);
+		}
+		setErrors({});
+		return result.token;
+	}, [bt, accountId, store, publicKey]);
+
+	const value = useMemo<CardFieldsState>(
+		() => ({
+			publicKey,
+			networks,
+			layout,
+			bt,
+			loadError: configError ?? btError?.message ?? null,
+			brand,
+			funding,
+			complete,
+			errors,
+			refs,
+			report,
+			tokenize,
+		}),
+		[publicKey, networks, layout, bt, configError, btError, brand, funding, complete, errors, report, tokenize],
+	);
+
+	return <CardFieldsContext.Provider value={value}>{children}</CardFieldsContext.Provider>;
+}
+
+/**
+ * Registers the unit as the handle's collection surface. `card` and `cardFields` register under
+ * different kinds so the confirm cascade resolves the same order the web controller does.
+ */
+export function useCardCollection(kind: 'card' | 'cardFields'): void {
+	const store = usePaymentsStore();
+	const unit = useCardFields();
+	const latest = useRef(unit);
+	latest.current = unit;
+
+	useEffect(
+		() =>
+			store.registerSurface({
+				kind,
+				collect: async (input): Promise<CollectedPayment> => {
+					// A standalone CardElement is its own collection surface, with no payment element above
+					// it to fold the address in first — so it merges here for the same reason. The billing
+					// NAME comes from the address element and is otherwise merged only after collect
+					// returns, which rejected a name the form had already collected.
+					const seeded = validateBillingEmail(input?.billingDetails);
+					const settled = store.getSnapshot();
+					const billingDetails = settled.addressLive
+						? ((mergeBillingWithCollected(seeded, settled.addressCollected) as MintBillingDetails | undefined) ??
+							seeded)
+						: seeded;
+					assertCardBilling(billingDetails);
+					const token = await latest.current.tokenize();
+					return {
+						paymentMethod: { type: 'card', category: 'card', card: { token } },
+						billingDetails,
+					};
+				},
+			}),
+		[store, kind],
+	);
+}
+
+export type { CardFieldFailure };

package/src/elements/card-fields/fields.tsx

@@ -0,0 +1,281 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import {
+	CardExpirationDateElement,
+	CardNumberElement as BtCardNumberElement,
+	CardVerificationCodeElement,
+	type ElementEvent,
+} from '@basis-theory/react-native-elements';
+
+import type { PartName } from '../../theme/appearance';
+import { useT } from '../../i18n';
+import { alphaStep, step, useTheme } from '../../theme/provider';
+import { ElementFrame } from '../../ui/element-frame';
+import { FieldSkeleton, part, useFieldStyles } from '../../ui/primitives';
+import { type CardFieldFailure, useCardComposed, useCardFields } from './context';
+
+export interface CardFieldProps {
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}
+
+type Slot = 'number' | 'expiry' | 'cvc';
+
+/**
+ * Which corners a slot rounds depends on how the composing unit arranged it. A separately mounted
+ * field ignores the unit's layout and draws fully independent chrome, which is what the web
+ * element documents.
+ */
+function corners(slot: Slot, layout: 'stacked' | 'compact', standalone: boolean, radius: number): ViewStyle {
+	if (standalone) return { borderRadius: radius };
+	if (layout === 'compact') {
+		if (slot === 'number') return { borderTopLeftRadius: radius, borderBottomLeftRadius: radius };
+		if (slot === 'cvc') return { borderTopRightRadius: radius, borderBottomRightRadius: radius };
+		return {};
+	}
+	if (slot === 'number') return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
+	if (slot === 'expiry') return { borderBottomLeftRadius: radius };
+	return { borderBottomRightRadius: radius };
+}
+
+interface SlotShellProps {
+	slot: Slot;
+	label: string;
+	error: CardFieldFailure;
+	focused: boolean;
+	children: ReactNode;
+	trailing?: ReactNode;
+	partName: PartName;
+}
+
+function SlotShell({ slot, label, error, focused, children, trailing, partName }: SlotShellProps) {
+	const t = useT();
+	const s = useFieldStyles();
+	const theme = s.theme;
+	const unit = useCardFields();
+	const standalone = !useCardComposed();
+	const invalid = Boolean(error);
+
+	return (
+		<View style={{ gap: theme.tokens.spacing }}>
+			{standalone ? <Text style={[s.label, part(theme, 'whop-Label')]}>{label}</Text> : null}
+			<View
+				style={[
+					s.box({ focused, invalid, disabled: false }),
+					corners(slot, unit.layout, standalone, theme.tokens.radius),
+					styles.row,
+					part(theme, 'whop-Input'),
+					focused ? part(theme, 'whop-InputFocused') : null,
+					invalid ? part(theme, 'whop-InputInvalid') : null,
+					part(theme, partName),
+				]}
+			>
+				<View style={styles.grow}>{children}</View>
+				{trailing}
+			</View>
+			{invalid ? (
+				<Text style={[s.error, part(theme, 'whop-ErrorText')]}>
+					{error === 'incomplete' ? t('Complete this field') : t("That doesn't look right")}
+				</Text>
+			) : null}
+		</View>
+	);
+}
+
+/** The Basis Theory element owns its own text; the chrome around it is ours. */
+function useBtInputStyle() {
+	const s = useFieldStyles();
+	return {
+		color: s.input.color,
+		fontSize: s.input.fontSize,
+		fontFamily: s.input.fontFamily,
+		height: s.theme.tokens.controlHeight - 2,
+		padding: 0,
+	};
+}
+
+function useSlot(assign: (unit: ReturnType<typeof useCardFields>, ref: unknown) => void) {
+	const unit = useCardFields();
+	const [focused, setFocused] = useState(false);
+	const btRef = useRef<unknown>(null);
+
+	// The Basis Theory ref settles after the component's own first commit, so assigning on every
+	// render is what keeps the unit's handle live across a re-render.
+	useEffect(() => {
+		assign(unit, btRef.current);
+	});
+
+	return {
+		unit,
+		btRef,
+		focused,
+		setFocused,
+		ready: Boolean(unit.bt) || Boolean(unit.loadError),
+		error: unit.loadError ? { message: unit.loadError, code: 'CARD_TOKENIZER_UNAVAILABLE' } : null,
+	};
+}
+
+export function CardNumberElement({ style, fallback, onReady, onError }: CardFieldProps) {
+	const t = useT();
+	const theme = useTheme();
+	const inputStyle = useBtInputStyle();
+	const { unit, btRef, focused, setFocused, ready, error } = useSlot((u, ref) => {
+		u.refs.current.number = ref;
+	});
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={<FieldSkeleton />}
+			ready={ready}
+			error={error}
+			onReady={onReady}
+			onError={onError}
+		>
+			<SlotShell
+				slot="number"
+				label={t('Card number')}
+				error={unit.errors.number}
+				focused={focused}
+				partName="whop-CardNumberField"
+				trailing={<BrandArt brand={unit.brand} />}
+			>
+				<BtCardNumberElement
+					btRef={btRef as never}
+					placeholder="1234 1234 1234 1234"
+					placeholderTextColor={alphaStep(theme.gray, 10)}
+					style={inputStyle as never}
+					onFocus={() => setFocused(true)}
+					onBlur={() => setFocused(false)}
+					onChange={(event: ElementEvent) =>
+						unit.report('number', {
+							complete: event.complete,
+							brand: event.brand,
+							funding: event.binInfo?.funding ?? null,
+						})
+					}
+				/>
+			</SlotShell>
+		</ElementFrame>
+	);
+}
+
+export function CardExpiryElement({ style, fallback, onReady, onError }: CardFieldProps) {
+	const t = useT();
+	const theme = useTheme();
+	const inputStyle = useBtInputStyle();
+	const { unit, btRef, focused, setFocused, ready, error } = useSlot((u, ref) => {
+		u.refs.current.expiryDate = ref;
+	});
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={<FieldSkeleton />}
+			ready={ready}
+			error={error}
+			onReady={onReady}
+			onError={onError}
+		>
+			<SlotShell
+				slot="expiry"
+				label={t('Expiration')}
+				error={unit.errors.expiry}
+				focused={focused}
+				partName="whop-CardExpiryField"
+			>
+				<CardExpirationDateElement
+					btRef={btRef as never}
+					placeholder="MM / YY"
+					placeholderTextColor={alphaStep(theme.gray, 10)}
+					style={inputStyle as never}
+					onFocus={() => setFocused(true)}
+					onBlur={() => setFocused(false)}
+					onChange={(event: ElementEvent) => unit.report('expiry', { complete: event.complete })}
+				/>
+			</SlotShell>
+		</ElementFrame>
+	);
+}
+
+export function CardCvcElement({ style, fallback, onReady, onError }: CardFieldProps) {
+	const t = useT();
+	const theme = useTheme();
+	const inputStyle = useBtInputStyle();
+	const { unit, btRef, focused, setFocused, ready, error } = useSlot((u, ref) => {
+		u.refs.current.cvc = ref;
+	});
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={<FieldSkeleton />}
+			ready={ready}
+			error={error}
+			onReady={onReady}
+			onError={onError}
+		>
+			<SlotShell
+				slot="cvc"
+				label={t('Security code')}
+				error={unit.errors.cvc}
+				focused={focused}
+				partName="whop-CardCvcField"
+			>
+				<CardVerificationCodeElement
+					btRef={btRef as never}
+					// amex prints a four-digit code; every other network prints three.
+					placeholder={unit.brand === 'american-express' ? '1234' : '123'}
+					placeholderTextColor={alphaStep(theme.gray, 10)}
+					style={inputStyle as never}
+					onFocus={() => setFocused(true)}
+					onBlur={() => setFocused(false)}
+					onChange={(event: ElementEvent) => unit.report('cvc', { complete: event.complete })}
+				/>
+			</SlotShell>
+		</ElementFrame>
+	);
+}
+
+function BrandArt({ brand }: { brand: string }) {
+	const theme = useTheme();
+	if (!brand || brand === 'unknown') return null;
+	const label = BRAND_LABELS[brand] ?? brand.slice(0, 4).toUpperCase();
+	return (
+		<View
+			style={{
+				paddingHorizontal: 6,
+				paddingVertical: 2,
+				borderRadius: 4,
+				backgroundColor: alphaStep(theme.gray, 3),
+			}}
+		>
+			<Text style={{ fontSize: 11, fontWeight: '600', color: step(theme.gray, 11) }}>{label}</Text>
+		</View>
+	);
+}
+
+const BRAND_LABELS: Record<string, string> = {
+	visa: 'VISA',
+	mastercard: 'MC',
+	'american-express': 'AMEX',
+	discover: 'DISC',
+	'diners-club': 'DINERS',
+	jcb: 'JCB',
+	unionpay: 'UP',
+	maestro: 'MAESTRO',
+	elo: 'ELO',
+	mir: 'MIR',
+	hiper: 'HIPER',
+	hipercard: 'HIPER',
+};
+
+const styles = StyleSheet.create({
+	row: { flexDirection: 'row', alignItems: 'center' },
+	grow: { flex: 1 },
+});