@whop/elements-react-native 0.1.0

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { CardFieldsProvider, type CardFieldsChangePayload, useCardCollection } from './context';
+
+export interface CardFieldsProps {
+	/** Advanced Basis Theory publishable key. Omit it to fetch the key automatically. */
+	publicKey?: string;
+	/** `stacked` shapes composed fields as a number row above expiry and cvc. `compact` is one row.
+	 *  Separately mounted fields ignore this and render with full borders and rounded corners. */
+	layout?: 'stacked' | 'compact';
+	children: ReactNode;
+	onChange?: (payload: CardFieldsChangePayload) => void;
+}
+
+/**
+ * Three separately mountable, PCI-isolated card fields for custom layouts. Place each field where
+ * the design wants it, enable the pay button from `onChange`, and confirm with
+ * `payments.createConfirmationToken()`.
+ */
+export function CardFields({ publicKey, layout = 'stacked', children, onChange }: CardFieldsProps) {
+	return (
+		<CardFieldsProvider publicKey={publicKey} layout={layout} onChange={onChange}>
+			<CardFieldsCollection />
+			{children}
+		</CardFieldsProvider>
+	);
+}
+
+/** Registration lives in a child so it runs under the provider it registers for. */
+function CardFieldsCollection() {
+	useCardCollection('cardFields');
+	return null;
+}
+
+export { CardCvcElement, CardExpiryElement, CardNumberElement } from './fields';
+export type { CardFieldProps } from './fields';
+export type { CardFieldsChangePayload } from './context';

package/src/elements/card.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/provider';
+import { part } from '../ui/primitives';
+import {
+	CardComposed,
+	type CardFieldsChangePayload,
+	CardFieldsProvider,
+	useCardCollection,
+} from './card-fields/context';
+import { CardCvcElement, CardExpiryElement, CardNumberElement } from './card-fields/fields';
+
+export interface CardElementProps {
+	/** `stacked` places the number above expiry and cvc. `compact` places all three in one row. */
+	layout?: 'stacked' | 'compact';
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onChange?: (payload: CardFieldsChangePayload) => void;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}
+
+/**
+ * Prearranged fields for card number, expiration, and security code. Card numbers stay inside the
+ * PCI-isolated Basis Theory components; this element only arranges them.
+ */
+export function CardElement({ layout = 'stacked', style, fallback, onChange, onReady, onError }: CardElementProps) {
+	return (
+		<CardFieldsProvider layout={layout} onChange={onChange}>
+			<CardComposed>
+				<CardCollection />
+				<CardGroup layout={layout} style={style} fallback={fallback} onReady={onReady} onError={onError} />
+			</CardComposed>
+		</CardFieldsProvider>
+	);
+}
+
+function CardCollection() {
+	useCardCollection('card');
+	return null;
+}
+
+function CardGroup({
+	layout,
+	style,
+	fallback,
+	onReady,
+	onError,
+}: {
+	layout: 'stacked' | 'compact';
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}) {
+	const theme = useTheme();
+
+	// Every field draws its own rounded border, so the group needs a real gap between them: flush
+	// fields read as one mis-rendered box rather than three inputs.
+	const seam = { gap: theme.tokens.spacing * 2 };
+
+	// Only the number reports ready for the group; the other two settle with it, and reporting all
+	// three would make the grouped latch wait on three identical signals.
+	if (layout === 'compact') {
+		return (
+			<View style={[styles.row, seam, part(theme, 'whop-CardFieldGroup'), style]}>
+				<View style={styles.number}>
+					<CardNumberElement fallback={fallback} onReady={onReady} onError={onError} />
+				</View>
+				<View style={styles.short}>
+					<CardExpiryElement />
+				</View>
+				<View style={styles.short}>
+					<CardCvcElement />
+				</View>
+			</View>
+		);
+	}
+
+	return (
+		<View style={[seam, part(theme, 'whop-CardFieldGroup'), style]}>
+			<CardNumberElement fallback={fallback} onReady={onReady} onError={onError} />
+			<View style={[styles.row, seam]}>
+				<View style={styles.grow}>
+					<CardExpiryElement />
+				</View>
+				<View style={styles.grow}>
+					<CardCvcElement />
+				</View>
+			</View>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	row: { flexDirection: 'row' },
+	grow: { flex: 1 },
+	number: { flex: 2 },
+	short: { flex: 1 },
+});

package/src/elements/email.tsx

@@ -0,0 +1,100 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useT } from '../i18n';
+import { usePaymentsStore } from '../namespace';
+import { ElementFrame } from '../ui/element-frame';
+import { Field, FieldSkeleton } from '../ui/primitives';
+
+/** The same plausibility bar the web element applies — a shape check, never a deliverability one. */
+const PLAUSIBLE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+export interface EmailChangePayload {
+	email: string;
+	complete: boolean;
+}
+
+export interface EmailElementProps {
+	/** Seed value applied once at mount. */
+	defaultValue?: string;
+	/** Shows the localized label. Set false when supplying your own; the input keeps its a11y label. */
+	label?: boolean;
+	/** Empty renders `you@example.com`. */
+	placeholder?: string;
+	style?: StyleProp<ViewStyle>;
+	fallback?: ReactNode;
+	onChange?: (payload: EmailChangePayload) => void;
+	onReady?: () => void;
+	onError?: (error: { message: string; code?: string }) => void;
+}
+
+/**
+ * Collects the buyer's email and feeds it to `createConfirmationToken()` while mounted. An explicit
+ * `billingDetails.email` still wins.
+ *
+ * Account recognition and code sign-in are not in this release, so no sign-in affordance renders —
+ * nothing appears that cannot work.
+ */
+export function EmailElement({
+	defaultValue = '',
+	label = true,
+	placeholder = '',
+	style,
+	fallback,
+	onChange,
+	onReady,
+	onError,
+}: EmailElementProps) {
+	const t = useT();
+	const store = usePaymentsStore();
+	const [value, setValue] = useState(defaultValue);
+	const [touched, setTouched] = useState(false);
+
+	const latestChange = useRef(onChange);
+	latestChange.current = onChange;
+
+	useEffect(() => {
+		const email = value.trim();
+		const complete = PLAUSIBLE.test(email);
+		// Only a plausible address counts as collected. Publishing every keystroke meant a half-typed
+		// address read as an email the form had: the wallet sheet stopped asking for one, and the
+		// mint sent the fragment.
+		store.patch({ buyerEmail: complete ? email : '' });
+		latestChange.current?.({ email, complete });
+	}, [value, store]);
+
+	// The value must not outlive the element. Left behind, an unmounted email element still answers
+	// for a form that no longer collects one.
+	useEffect(() => () => store.patch({ buyerEmail: '' }), [store]);
+
+	const invalid = touched && value.trim().length > 0 && !PLAUSIBLE.test(value.trim());
+
+	return (
+		<ElementFrame
+			style={style}
+			fallback={fallback}
+			skeleton={<FieldSkeleton label={label} />}
+			ready
+			onReady={onReady}
+			onError={onError}
+		>
+			<Field
+				label={label ? t('Email') : undefined}
+				accessibilityLabel={t('Email')}
+				value={value}
+				onChangeText={setValue}
+				onBlur={() => setTouched(true)}
+				placeholder={placeholder || 'you@example.com'}
+				error={invalid ? t('Enter a valid email address') : undefined}
+				keyboardType="email-address"
+				autoCapitalize="none"
+				autoCorrect={false}
+				autoComplete="email"
+				textContentType="username"
+				inputMode="email"
+				returnKeyType="next"
+				partName="whop-Input"
+			/>
+		</ElementFrame>
+	);
+}

package/src/elements/payment/declared-fields.tsx

@@ -0,0 +1,238 @@
+import { type MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TextElement, useBasisTheory } from '@basis-theory/react-native-elements';
+
+import type { RequiredField } from '../../api/types';
+import type { BasisTheoryElements } from '../../core/payments/bt';
+import { fieldLabel, fieldMatches, type MatrixEntry, methodTokenizerKey } from '../../core/payments/detail';
+import { tokenizeSecureFields } from '../../core/payments/secure-fields';
+import { useT } from '../../i18n';
+import { alphaStep } from '../../theme/provider';
+import { Field, FieldShell, Stack, useFieldStyles } from '../../ui/primitives';
+
+export interface DeclaredFieldValues {
+	/** Fields the method wants on its own category payload. */
+	paymentMethod: Record<string, string>;
+	/** Fields the method wants on `billing_details`. */
+	billingExtra: Record<string, string>;
+	/** One token intent standing in for every `secure: true` field, keyed by field name. */
+	secureTokenIntent: string | undefined;
+}
+
+export interface DeclaredFieldsState {
+	fields: RequiredField[];
+	values: Record<string, string>;
+	setValue: (name: string, value: string) => void;
+	errorFor: (field: RequiredField) => 'required' | 'invalid' | undefined;
+	complete: boolean;
+	collect: () => Promise<DeclaredFieldValues>;
+	showErrors: boolean;
+	revealErrors: () => void;
+	secureRefs: MutableRefObject<Record<string, unknown>>;
+	/** The tokenizer key for this method's secure fields, if it declares any. */
+	tokenizerKey: string | undefined;
+	btRef: MutableRefObject<BasisTheoryElements | undefined>;
+	/** A hosted field's instance settles after its own first commit; this re-derives completeness
+	 *  when it does, since a ref assignment is invisible to React. */
+	noteSecureComplete: (key: string, complete: boolean) => void;
+	secureKey: (name: string) => string;
+}
+
+/**
+ * A method's `required_fields`, rendered generically from what the matrix publishes.
+ *
+ * A `secure: true` field renders as a Basis Theory hosted text element, so the raw value never
+ * exists in this JavaScript. At collect time every secure instance is tokenized into ONE token
+ * intent keyed by field name, and the category payload carries `{ token_intent }` — the shape the
+ * web element produces and the backend already reads.
+ */
+export function useDeclaredFields(entry: MatrixEntry | undefined, country: string | undefined): DeclaredFieldsState {
+	const fields = useMemo(() => entry?.required_fields ?? [], [entry]);
+	// A method's secure fields tokenize under ITS OWN config-block key, which is a different Basis
+	// Theory application from the card one — the card key cannot mint token intents at all.
+	//
+	// The client is NOT constructed here: most methods declare no secure field, and constructing
+	// Basis Theory with a missing key makes its SDK show a "Please enter a valid API key" toast to
+	// the buyer. `SecureTokenizer` below mounts only when a secure field and a key both exist, and
+	// hands the instance back through this ref.
+	const btRef = useRef<BasisTheoryElements | undefined>(undefined);
+	const [values, setValues] = useState<Record<string, string>>({});
+	const [showErrors, setShowErrors] = useState(false);
+	const [secureComplete, setSecureComplete] = useState<Record<string, boolean>>({});
+	const secureRefs = useRef<Record<string, unknown>>({});
+
+	// Declared fields belong to the METHOD, and this state is keyed by field NAME — so two methods
+	// that both declare `bank_account` shared everything: a value typed for one, and its secure
+	// completeness, carried into the other and reported it ready before the buyer touched it.
+	const entryKey = entry?.type;
+	useEffect(() => {
+		setValues({});
+		setShowErrors(false);
+		secureRefs.current = {};
+	}, [entryKey]);
+
+	const setValue = useCallback((name: string, value: string) => {
+		setValues((prev) => (prev[name] === value ? prev : { ...prev, [name]: value }));
+	}, []);
+
+	const errorFor = useCallback(
+		(field: RequiredField): 'required' | 'invalid' | undefined => {
+			if (field.secure) return undefined;
+			const value = values[field.name] ?? '';
+			if (!value.trim()) return 'required';
+			// `input_formats` is what a buyer may TYPE; `formats` is the stored electronic value. The
+			// typing tolerance wins where the matrix publishes it.
+			const patterns = field.input_formats ?? field.formats;
+			return fieldMatches(patterns, country, value) ? undefined : 'invalid';
+		},
+		[values, country],
+	);
+
+	const complete = useMemo(
+		() =>
+			// A MOUNTED tokenizer field is not a filled one. Keying off the ref meant completeness
+			// flipped true the moment the element attached and stayed true after the buyer cleared it,
+			// so the form reported itself ready to submit values that were never entered.
+			fields.every((field) =>
+				field.secure ? secureComplete[`${entryKey ?? ''}:${field.name}`] === true : !errorFor(field),
+			),
+		[fields, errorFor, secureComplete, entryKey],
+	);
+
+	const collect = useCallback(async (): Promise<DeclaredFieldValues> => {
+		const paymentMethod: Record<string, string> = {};
+		const billingExtra: Record<string, string> = {};
+		const secure: Record<string, unknown> = {};
+
+		for (const field of fields) {
+			if (field.secure) {
+				const instance = secureRefs.current[field.name];
+				if (instance) secure[field.name] = instance;
+				continue;
+			}
+			const value = (values[field.name] ?? '').trim();
+			if (field.kind === 'billing_details') billingExtra[field.name] = value;
+			else paymentMethod[field.name] = value;
+		}
+
+		let secureTokenIntent: string | undefined;
+		if (Object.keys(secure).length > 0) {
+			const key = entry ? methodTokenizerKey(entry) : undefined;
+			if (!key) throw new Error('This payment method is missing its tokenizer key');
+			// The values live inside the hosted elements, so the SDK has to interpolate them. A raw
+			// REST post would serialize the element objects instead of what the buyer typed — that
+			// path exists only for the wallet sheets, whose payload really is plain data.
+			secureTokenIntent = await tokenizeSecureFields(btRef.current, secure, key);
+		}
+
+		return { paymentMethod, billingExtra, secureTokenIntent };
+	}, [fields, values, entry]);
+
+	return {
+		fields,
+		values,
+		setValue,
+		errorFor,
+		complete,
+		collect,
+		showErrors,
+		revealErrors: () => setShowErrors(true),
+		secureRefs,
+		tokenizerKey: fields.some((field) => field.secure) && entry ? methodTokenizerKey(entry) : undefined,
+		btRef,
+		noteSecureComplete: (key: string, value: boolean) =>
+			setSecureComplete((previous) => (previous[key] === value ? previous : { ...previous, [key]: value })),
+		secureKey: (name: string) => `${entryKey ?? ''}:${name}`,
+	};
+}
+
+export function DeclaredFields({ state }: { state: DeclaredFieldsState }) {
+	const t = useT();
+
+	if (state.fields.length === 0) return null;
+
+	return (
+		<Stack>
+			{state.tokenizerKey ? <SecureTokenizer publicKey={state.tokenizerKey} btRef={state.btRef} /> : null}
+			{state.fields.map((field) => {
+				const label = fieldLabel(field.name);
+				const code = state.showErrors ? state.errorFor(field) : undefined;
+				const error =
+					code === 'required' ? t('Required') : code === 'invalid' ? t("That doesn't look right") : undefined;
+
+				if (field.secure) {
+					return <SecureField key={field.name} field={field} label={label} state={state} />;
+				}
+
+				return (
+					<Field
+						key={field.name}
+						label={label}
+						accessibilityLabel={label}
+						value={state.values[field.name] ?? ''}
+						onChangeText={(value) => state.setValue(field.name, value)}
+						placeholder={field.placeholder}
+						error={error}
+						autoCapitalize="characters"
+						autoCorrect={false}
+					/>
+				);
+			})}
+		</Stack>
+	);
+}
+
+/** Constructs the Basis Theory client for a method that actually declares a secure field. */
+function SecureTokenizer({
+	publicKey,
+	btRef,
+}: {
+	publicKey: string;
+	btRef: MutableRefObject<BasisTheoryElements | undefined>;
+}) {
+	const { bt } = useBasisTheory(publicKey);
+	btRef.current = bt;
+	return null;
+}
+
+function SecureField({
+	field,
+	label,
+	state,
+}: {
+	field: RequiredField;
+	label: string;
+	state: DeclaredFieldsState;
+}) {
+	const s = useFieldStyles();
+	const [focused, setFocused] = useState(false);
+	const note = state.noteSecureComplete;
+
+	return (
+		<FieldShell label={label} focused={focused}>
+			<TextElement
+				btRef={
+					((instance: unknown) => {
+						state.secureRefs.current[field.name] = instance;
+						if (!instance) note(state.secureKey(field.name), false);
+					}) as never
+				}
+				onChange={
+					((event: { complete?: boolean }) => note(state.secureKey(field.name), event?.complete === true)) as never
+				}
+				placeholder={field.placeholder}
+				placeholderTextColor={alphaStep(s.theme.gray, 10)}
+				style={
+					{
+						color: s.input.color,
+						fontSize: s.input.fontSize,
+						fontFamily: s.input.fontFamily,
+						height: s.theme.tokens.controlHeight - 2,
+						padding: 0,
+					} as never
+				}
+				onFocus={() => setFocused(true)}
+				onBlur={() => setFocused(false)}
+			/>
+		</FieldShell>
+	);
+}