@whop/elements-react-native 0.1.0

package/src/controller/store.ts

@@ -0,0 +1,201 @@
+import { WhopClient, type WhopEnvironment } from '../api/client';
+import type { CollectedAddressSnapshot } from '../core/payments/billing-merge';
+import type { CheckoutSurface, MatrixEntry, WalletAvailability } from '../core/payments/detail';
+import {
+	type ChargeProps,
+	type ChargeState,
+	chargeless,
+	resolveCharge,
+	UNCONFIGURED_CHARGE,
+} from '../core/payments/plan';
+import type { CollectedPayment } from '../core/payments/mint';
+
+export interface PaymentsOptions extends ChargeProps {
+	accountId?: string;
+	returnUrl?: string;
+	applePayMerchantId?: string;
+	googlePayMerchantName?: string;
+	/** The method-tile order, Stripe's `paymentMethodOrder` semantics. */
+	order?: string[];
+	analytics?: false | { writeKey: string };
+}
+
+/**
+ * The collection surface a `createConfirmationToken` call delegates to.
+ *
+ * Exactly one is live at a time — the fused card face, the exploded card fields, or the payment
+ * element's selected tile — and each registers itself on mount. This is the React Native shape of
+ * the web controller's confirm cascade, which resolves the same three in the same order.
+ */
+export interface CollectionSurface {
+	kind: 'payment' | 'card' | 'cardFields';
+	collect: (input: { billingDetails?: Partial<{ email: string; name: string }> }) => Promise<CollectedPayment>;
+}
+
+export interface PaymentsState {
+	charge: ChargeState;
+	chargeError: Error | null;
+	accountId: string | undefined;
+	returnUrl: string | undefined;
+
+	matrix: MatrixEntry[];
+	matrixLoading: boolean;
+	matrixError: Error | null;
+	walletAvailability: WalletAvailability | undefined;
+
+	selectedType: string | undefined;
+	selectedCategory: string | undefined;
+	selectedTemplate: string | undefined;
+	selectedComplete: boolean;
+
+	buyerEmail: string;
+	addressCollected: CollectedAddressSnapshot | undefined;
+	addressLive: boolean;
+	/** The billing-country constraint a picked method imposes; null while unconstrained. */
+	methodCountries: string[] | null;
+
+	brandingMounted: boolean;
+	confirmInFlight: boolean;
+	nextActionInFlight: boolean;
+}
+
+const INITIAL: PaymentsState = {
+	charge: UNCONFIGURED_CHARGE,
+	chargeError: null,
+	accountId: undefined,
+	returnUrl: undefined,
+	matrix: [],
+	matrixLoading: false,
+	matrixError: null,
+	walletAvailability: undefined,
+	selectedType: undefined,
+	selectedCategory: undefined,
+	selectedTemplate: undefined,
+	selectedComplete: false,
+	buyerEmail: '',
+	addressCollected: undefined,
+	addressLive: false,
+	methodCountries: null,
+	brandingMounted: false,
+	confirmInFlight: false,
+	nextActionInFlight: false,
+};
+
+export const SURFACE_KEY = 'payments';
+
+/**
+ * The controller, as a plain store.
+ *
+ * The web controller runs in its own iframe because the embedding page is a different origin. A
+ * React Native app has no such boundary — the SDK's JS and the app's JS are the same binary — so
+ * the same state lives here in-process. What does not live here is the card number: that stays
+ * inside Basis Theory's own components and reaches the vault without passing through this object.
+ */
+export class PaymentsStore {
+	readonly client: WhopClient;
+	readonly surface: CheckoutSurface = 'direct_checkout';
+
+	private state: PaymentsState = INITIAL;
+	private readonly listeners = new Set<() => void>();
+	private readonly surfaces = new Map<CollectionSurface['kind'], CollectionSurface>();
+	private options: PaymentsOptions;
+	private chargeToken = 0;
+	private destroyed = false;
+
+	constructor(options: PaymentsOptions, environment: WhopEnvironment, getToken?: () => Promise<string | null | undefined>) {
+		this.options = options;
+		this.client = new WhopClient({ environment, getToken });
+		this.state = { ...INITIAL, accountId: options.accountId, returnUrl: options.returnUrl };
+		void this.resolveChargeState();
+	}
+
+	getSnapshot = (): PaymentsState => this.state;
+
+	subscribe = (listener: () => void): (() => void) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+
+	getOptions(): PaymentsOptions {
+		return this.options;
+	}
+
+	patch(partial: Partial<PaymentsState>): void {
+		if (this.destroyed) return;
+		let changed = false;
+		const next = { ...this.state };
+		for (const [key, value] of Object.entries(partial) as [keyof PaymentsState, never][]) {
+			if (!Object.is(next[key], value)) {
+				next[key] = value;
+				changed = true;
+			}
+		}
+		if (!changed) return;
+		this.state = next;
+		for (const listener of this.listeners) listener();
+	}
+
+	/** `handle.update()` — re-derives the charge when a charge-bearing option moved. */
+	update(options: PaymentsOptions): void {
+		const previous = this.options;
+		this.options = { ...previous, ...options };
+		this.patch({ accountId: this.options.accountId, returnUrl: this.options.returnUrl });
+		const chargeKeys: (keyof ChargeProps)[] = [
+			'accountId',
+			'plan',
+			'currency',
+			'amount',
+			'setupFutureUsage',
+			'paymentMethodConfiguration',
+		];
+		if (chargeKeys.some((key) => !Object.is(previous[key], this.options[key]))) {
+			void this.resolveChargeState();
+		}
+	}
+
+	destroy(): void {
+		this.destroyed = true;
+		this.listeners.clear();
+		this.surfaces.clear();
+	}
+
+	registerSurface(surface: CollectionSurface): () => void {
+		this.surfaces.set(surface.kind, surface);
+		return () => {
+			if (this.surfaces.get(surface.kind) === surface) this.surfaces.delete(surface.kind);
+		};
+	}
+
+	/** The confirm cascade's order: a mounted payment element owns the selection, then the fused
+	 *  card face, then the exploded fields. */
+	liveSurface(): CollectionSurface | undefined {
+		return this.surfaces.get('payment') ?? this.surfaces.get('card') ?? this.surfaces.get('cardFields');
+	}
+
+	/** One specific surface. The payment element's card tile reaches its own composed CardElement
+	 *  through this — `liveSurface()` would hand it back itself and recurse. */
+	surfaceOf(kind: CollectionSurface['kind']): CollectionSurface | undefined {
+		return this.surfaces.get(kind);
+	}
+
+	private async resolveChargeState(): Promise<void> {
+		const token = ++this.chargeToken;
+		if (chargeless(this.options)) {
+			this.patch({ charge: UNCONFIGURED_CHARGE, chargeError: null });
+			return;
+		}
+		try {
+			const charge = await resolveCharge(this.client, this.options);
+			// A later update superseded this resolve; its answer is stale by definition.
+			if (token !== this.chargeToken) return;
+			this.patch({ charge, chargeError: null });
+		} catch (err) {
+			if (token !== this.chargeToken) return;
+			// Keep the last good charge: a failed RE-resolve degrades to stale rather than empty,
+			// matching the controller-source contract on the web.
+			this.patch({ chargeError: err instanceof Error ? err : new Error(String(err)) });
+		}
+	}
+}