@heyama/pay-react-native 0.0.0-stage → 1.0.1

package/dist/checkout-core/models/checkout.view.utils.js

@@ -0,0 +1,205 @@
+import { CARD_LOGO, DIAL_CODES, OTP_PATTERN, PREVIEW_AMOUNT, PREVIEW_ORDER_REF, WAIT_SECONDS, } from "./checkout.constants.js";
+import { CheckoutPaymentStatusEnum, CheckoutScreenEnum, CheckoutTabEnum, MethodFlowEnum, MethodKindEnum, MethodStateEnum, SupportChannelEnum, } from "./checkout.enum.js";
+import { AttemptStatusEnum, CountryEnum, CurrencyEnum } from "./domain.enum.js";
+/** Countries with Mobile Money methods, in the order their first method comes. */
+export function countriesOf(methods) {
+    const countries = methods
+        .filter((method) => method.kind === MethodKindEnum.MOBILE_MONEY)
+        .map((method) => method.country);
+    return [...new Set(countries)];
+}
+/** The country whose dial code starts this E.164 number. */
+export function countryOfPhone(phone) {
+    const found = Object.entries(DIAL_CODES).find(([, dial]) => phone.startsWith(`+${dial}`));
+    return found ? found[0] : null;
+}
+/**
+ * The payer's country (docs/v1-plan.md, Checkout): the app's hint, then the
+ * phone's dial code, then the request's IP, then the browser's language
+ * (`fr-CM`). Only countries this payment can be paid in count; with none, the
+ * first country the gateway serves, for a page that has nothing to offer.
+ */
+export function pickCountry(view, clues, countries) {
+    const fromLanguages = clues.languages.map((tag) => tag.split('-')[1]?.toLowerCase());
+    const candidates = [
+        view.country,
+        view.payer.phone ? countryOfPhone(view.payer.phone) : null,
+        clues.ipCountry?.toLowerCase(),
+        ...fromLanguages,
+    ];
+    const found = candidates.find((candidate) => countries.includes(candidate));
+    return (found ??
+        countries.at(0) ??
+        Object.values(CountryEnum)[0]);
+}
+/**
+ * How the page opens: on the app's preferred method when it can be paid with,
+ * else on its preferred tab, with the list open.
+ */
+export function initialUi(view, clues) {
+    const countries = countriesOf(view.methods);
+    const preferred = view.methods.find((method) => method.id === view.preferredMethod &&
+        method.state === MethodStateEnum.AVAILABLE);
+    const base = {
+        tab: view.preferredTab ?? CheckoutTabEnum.MOBILE_MONEY,
+        country: pickCountry(view, clues, countries),
+        method: null,
+        code: '',
+        cardComplete: false,
+        cardPaying: false,
+        pickerOpen: true,
+        summaryOpen: false,
+        submitting: false,
+        dismissed: null,
+        redirecting: false,
+    };
+    if (preferred?.kind !== MethodKindEnum.MOBILE_MONEY)
+        return base;
+    return {
+        ...base,
+        tab: CheckoutTabEnum.MOBILE_MONEY,
+        country: preferred.country,
+        method: preferred.id,
+        pickerOpen: false,
+    };
+}
+const TERMINAL_SCREEN = {
+    [CheckoutPaymentStatusEnum.PAID]: CheckoutScreenEnum.SUCCESS,
+    [CheckoutPaymentStatusEnum.EXPIRED]: CheckoutScreenEnum.EXPIRED,
+    [CheckoutPaymentStatusEnum.CANCELLED]: CheckoutScreenEnum.CANCELLED,
+    [CheckoutPaymentStatusEnum.LOCKED]: CheckoutScreenEnum.LOCKED,
+};
+/** Which screen shows: the payment's status first, then what the payer is doing. */
+export function screenOf(view, ui) {
+    if (view === undefined)
+        return CheckoutScreenEnum.LOADING;
+    if (view === null)
+        return CheckoutScreenEnum.INVALID;
+    if (ui.redirecting)
+        return CheckoutScreenEnum.REDIRECT;
+    const terminal = TERMINAL_SCREEN[view.status];
+    if (terminal)
+        return terminal;
+    const { attempt } = view;
+    // A card's fields page is still paying: the form stays until it says how it went.
+    const shown = attempt && attempt.reference !== ui.dismissed && !ui.cardPaying
+        ? attempt.status
+        : null;
+    if (shown === AttemptStatusEnum.PENDING)
+        return CheckoutScreenEnum.WAITING;
+    // The app offers nothing any more: no form to fill, no other method to try.
+    if (view.methods.length === 0)
+        return CheckoutScreenEnum.NO_METHOD;
+    if (shown === AttemptStatusEnum.FAILED)
+        return CheckoutScreenEnum.FAILED;
+    return ui.submitting ? CheckoutScreenEnum.SUBMITTING : CheckoutScreenEnum.FORM;
+}
+/** The brand of a Mobile Money method, which a number's first digits can reveal. */
+export function brandOf(method) {
+    return method.logos[0];
+}
+/** Everything the picked method needs is in: the card, or the number and its payment code. */
+function readyToPay(method, ui, phone) {
+    if (method.flow === MethodFlowEnum.CARD_FIELDS)
+        return ui.cardComplete;
+    return (phone.valid &&
+        (method.flow !== MethodFlowEnum.OTP || OTP_PATTERN.test(ui.code)));
+}
+/** The tile of a method or an attempt: the generic card for cards, whatever networks they take. */
+export function logoOf(of) {
+    return of.flow === MethodFlowEnum.CARD_FIELDS ? CARD_LOGO : of.logos[0];
+}
+/** Works out what the screens show from the payment, the page and the number typed. */
+export function deriveCheckout(view, ui, phone) {
+    const wallets = view.methods.filter((method) => method.kind === MethodKindEnum.MOBILE_MONEY &&
+        method.country === ui.country);
+    const cards = view.methods.filter((method) => method.kind === MethodKindEnum.CARD);
+    const onCard = ui.tab === CheckoutTabEnum.CARD;
+    const picked = (onCard ? cards : wallets).find((method) => method.id === ui.method);
+    const selected = !ui.pickerOpen && picked?.state === MethodStateEnum.AVAILABLE
+        ? picked
+        : null;
+    const detected = phone.valid
+        ? (wallets.find((method) => method.state === MethodStateEnum.AVAILABLE &&
+            brandOf(method) === phone.operator) ?? null)
+        : null;
+    const failed = view.methods.find((method) => method.id === view.attempt?.method);
+    const suggestion = view.methods.find((method) => method.kind === MethodKindEnum.MOBILE_MONEY &&
+        method.state === MethodStateEnum.AVAILABLE &&
+        method.country === failed?.country &&
+        method.id !== failed.id) ?? null;
+    return {
+        screen: screenOf(view, ui),
+        countries: countriesOf(view.methods),
+        wallets,
+        cards,
+        selected,
+        canPay: !!selected &&
+            readyToPay(selected, ui, phone) &&
+            !ui.submitting &&
+            !ui.cardPaying,
+        // Only a Mobile Money method has a number to belong to another one.
+        mismatch: selected && !onCard && detected && detected.id !== selected.id
+            ? detected
+            : null,
+        suggestion,
+    };
+}
+/** Seconds left to approve an attempt started at `startedAt`. */
+export function waitLeftOf(startedAt, now) {
+    const elapsed = Math.floor((now - startedAt) / 1000);
+    return Math.min(WAIT_SECONDS, Math.max(0, WAIT_SECONDS - elapsed));
+}
+/** How payers reach the app's support, when it set any. */
+export function supportContactsOf(app) {
+    const contacts = [];
+    if (app.supportWhatsapp) {
+        contacts.push({
+            channel: SupportChannelEnum.WHATSAPP,
+            value: app.supportWhatsapp,
+            href: `https://wa.me/${app.supportWhatsapp.slice(1)}`,
+        });
+    }
+    if (app.supportEmail) {
+        contacts.push({
+            channel: SupportChannelEnum.EMAIL,
+            value: app.supportEmail,
+            href: `mailto:${app.supportEmail}`,
+        });
+    }
+    return contacts;
+}
+/** A pending test payment for the Branding tab's preview, branded as typed. */
+export function previewView(app, methods) {
+    return {
+        id: 'preview',
+        status: CheckoutPaymentStatusEnum.PENDING,
+        test: false,
+        amount: PREVIEW_AMOUNT,
+        currency: CurrencyEnum.XAF,
+        orderRef: PREVIEW_ORDER_REF,
+        items: [],
+        returnUrl: '',
+        expiresAt: 0,
+        paidAt: null,
+        payer: { name: null, phone: null, email: null },
+        country: null,
+        language: null,
+        theme: null,
+        preferredMethod: null,
+        preferredTab: null,
+        attemptsLeft: 0,
+        maxAttempts: 0,
+        // The preview offers no card: nothing loads from the site.
+        siteUrl: '',
+        app: {
+            ...app,
+            termsUrl: null,
+            privacyUrl: null,
+            supportEmail: null,
+            supportWhatsapp: null,
+        },
+        methods,
+        attempt: null,
+    };
+}

package/dist/checkout-core/models/domain.enum.d.ts

@@ -0,0 +1,56 @@
+/** Domain enums the checkout core needs; `src/models` re-exports them for the rest of the app. */
+/** Values are the file names in `public/logo/`, without the extension. */
+/** A brand tile in `public/logo/`: one per brand a payer recognises (see `docs/design-system.md`, Logos). */
+export declare enum ProviderLogoEnum {
+    ORANGE = "orange",
+    MTN = "mtn",
+    MOOV = "moov",
+    WAVE = "wave",
+    MIXX = "mixx",
+    VISA = "visa",
+    MASTERCARD = "mastercard",
+    PAYPAL = "paypal",
+    CARD = "card",
+    APPLE_PAY = "apple-pay",
+    GOOGLE_PAY = "google-pay"
+}
+/** Declared in the order the Providers page lists its country groups. */
+export declare enum CountryEnum {
+    CAMEROON = "cm",
+    COTE_D_IVOIRE = "ci",
+    SENEGAL = "sn",
+    BENIN = "bj",
+    TOGO = "tg",
+    BURKINA_FASO = "bf",
+    INTERNATIONAL = "intl"
+}
+export declare enum CurrencyEnum {
+    XAF = "XAF",
+    XOF = "XOF",
+    EUR = "EUR",
+    USD = "USD"
+}
+/** Why an attempt failed. The first five are the payer's and count toward the lock. */
+export declare enum FailureReasonEnum {
+    DECLINED = "declined",
+    INSUFFICIENT_FUNDS = "insufficient_funds",
+    /** No mobile money account on this number. */
+    NO_ACCOUNT = "no_account",
+    WRONG_PIN = "wrong_pin",
+    /** An OTP method: the payment code was wrong or had expired. */
+    WRONG_CODE = "wrong_code",
+    PROVIDER_ERROR = "provider_error",
+    TIMEOUT = "timeout",
+    MISMATCH = "mismatch"
+}
+/** GLOSSARY: Attempt. */
+export declare enum AttemptStatusEnum {
+    PENDING = "pending",
+    SUCCEEDED = "succeeded",
+    FAILED = "failed"
+}
+/** Interface languages. Values are the URL prefix and the saved cookie value. */
+export declare enum LangEnum {
+    FR = "fr",
+    EN = "en"
+}

package/dist/checkout-core/models/domain.enum.js

@@ -0,0 +1,62 @@
+/** Domain enums the checkout core needs; `src/models` re-exports them for the rest of the app. */
+/** Values are the file names in `public/logo/`, without the extension. */
+/** A brand tile in `public/logo/`: one per brand a payer recognises (see `docs/design-system.md`, Logos). */
+export var ProviderLogoEnum;
+(function (ProviderLogoEnum) {
+    ProviderLogoEnum["ORANGE"] = "orange";
+    ProviderLogoEnum["MTN"] = "mtn";
+    ProviderLogoEnum["MOOV"] = "moov";
+    ProviderLogoEnum["WAVE"] = "wave";
+    ProviderLogoEnum["MIXX"] = "mixx";
+    ProviderLogoEnum["VISA"] = "visa";
+    ProviderLogoEnum["MASTERCARD"] = "mastercard";
+    ProviderLogoEnum["PAYPAL"] = "paypal";
+    ProviderLogoEnum["CARD"] = "card";
+    ProviderLogoEnum["APPLE_PAY"] = "apple-pay";
+    ProviderLogoEnum["GOOGLE_PAY"] = "google-pay";
+})(ProviderLogoEnum || (ProviderLogoEnum = {}));
+/** Declared in the order the Providers page lists its country groups. */
+export var CountryEnum;
+(function (CountryEnum) {
+    CountryEnum["CAMEROON"] = "cm";
+    CountryEnum["COTE_D_IVOIRE"] = "ci";
+    CountryEnum["SENEGAL"] = "sn";
+    CountryEnum["BENIN"] = "bj";
+    CountryEnum["TOGO"] = "tg";
+    CountryEnum["BURKINA_FASO"] = "bf";
+    CountryEnum["INTERNATIONAL"] = "intl";
+})(CountryEnum || (CountryEnum = {}));
+export var CurrencyEnum;
+(function (CurrencyEnum) {
+    CurrencyEnum["XAF"] = "XAF";
+    CurrencyEnum["XOF"] = "XOF";
+    CurrencyEnum["EUR"] = "EUR";
+    CurrencyEnum["USD"] = "USD";
+})(CurrencyEnum || (CurrencyEnum = {}));
+/** Why an attempt failed. The first five are the payer's and count toward the lock. */
+export var FailureReasonEnum;
+(function (FailureReasonEnum) {
+    FailureReasonEnum["DECLINED"] = "declined";
+    FailureReasonEnum["INSUFFICIENT_FUNDS"] = "insufficient_funds";
+    /** No mobile money account on this number. */
+    FailureReasonEnum["NO_ACCOUNT"] = "no_account";
+    FailureReasonEnum["WRONG_PIN"] = "wrong_pin";
+    /** An OTP method: the payment code was wrong or had expired. */
+    FailureReasonEnum["WRONG_CODE"] = "wrong_code";
+    FailureReasonEnum["PROVIDER_ERROR"] = "provider_error";
+    FailureReasonEnum["TIMEOUT"] = "timeout";
+    FailureReasonEnum["MISMATCH"] = "mismatch";
+})(FailureReasonEnum || (FailureReasonEnum = {}));
+/** GLOSSARY: Attempt. */
+export var AttemptStatusEnum;
+(function (AttemptStatusEnum) {
+    AttemptStatusEnum["PENDING"] = "pending";
+    AttemptStatusEnum["SUCCEEDED"] = "succeeded";
+    AttemptStatusEnum["FAILED"] = "failed";
+})(AttemptStatusEnum || (AttemptStatusEnum = {}));
+/** Interface languages. Values are the URL prefix and the saved cookie value. */
+export var LangEnum;
+(function (LangEnum) {
+    LangEnum["FR"] = "fr";
+    LangEnum["EN"] = "en";
+})(LangEnum || (LangEnum = {}));

package/dist/components/BrissotoPayProvider.d.ts

@@ -0,0 +1,6 @@
+import type { BrissotoPayProviderProps } from '../models/sheet.interface.js';
+/**
+ * Around the app: holds the connection to Brissoto Pay and the one payment
+ * sheet `usePaymentSheet().presentPayment` opens.
+ */
+export declare function BrissotoPayProvider({ url, children, }: BrissotoPayProviderProps): import("react").JSX.Element;

package/dist/components/BrissotoPayProvider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConvexReactClient } from 'convex/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PaymentSheetContext } from "../hooks/use-payment-sheet.js";
+import { DEFAULT_URL } from "../models/sheet.constants.js";
+import { convexCheckoutCalls } from "../services/checkout.service.js";
+import { PaymentSheetModal } from "./PaymentSheetModal.js";
+/**
+ * Around the app: holds the connection to Brissoto Pay and the one payment
+ * sheet `usePaymentSheet().presentPayment` opens.
+ */
+export function BrissotoPayProvider({ url = DEFAULT_URL, children, }) {
+    const [client, setClient] = useState(null);
+    useEffect(() => {
+        const next = new ConvexReactClient(url, { unsavedChangesWarning: false });
+        setClient(next);
+        return () => void next.close();
+    }, [url]);
+    const calls = useMemo(() => client && convexCheckoutCalls(client), [client]);
+    const [request, setRequest] = useState(null);
+    /** Sheets opened, so each gets a fresh one. */
+    const [count, setCount] = useState(0);
+    const busy = useRef(false);
+    const presentPayment = useCallback(({ paymentId }) => {
+        if (busy.current) {
+            return Promise.reject(new Error('A payment sheet is already open.'));
+        }
+        busy.current = true;
+        return new Promise((resolve) => {
+            setCount((previous) => previous + 1);
+            setRequest({ paymentId, open: true, resolve });
+        });
+    }, []);
+    const sheet = useMemo(() => ({ presentPayment }), [presentPayment]);
+    const close = (closing, result) => {
+        busy.current = false;
+        setRequest({ ...closing, open: false });
+        closing.resolve(result);
+    };
+    return (_jsxs(PaymentSheetContext, { value: sheet, children: [children, calls && request && (_jsx(PaymentSheetModal, { calls: calls, request: request, onClose: (result) => close(request, result) }, count))] }));
+}

package/dist/components/PaymentSheetModal.d.ts

@@ -0,0 +1,8 @@
+import type { PaymentSheetModalProps } from '../models/sheet.interface.js';
+/**
+ * One payment in a bottom sheet over the dimmed app, as tall as what it
+ * shows, in the payment's language and theme, else the device's. Close,
+ * a swipe down, a tap on the app behind, back or escape leave it; leaving
+ * while a prompt waits on the phone asks first, and resolves `pending`.
+ */
+export declare function PaymentSheetModal({ calls, request, onClose, }: PaymentSheetModalProps): import("react").JSX.Element;

package/dist/components/PaymentSheetModal.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFonts } from 'expo-font';
+import { useMemo, useState } from 'react';
+import { Alert, Animated, KeyboardAvoidingView, Modal, Pressable, StyleSheet, View, useColorScheme, } from 'react-native';
+import { IntlProvider, createTranslator } from 'use-intl';
+import { CHECKOUT_COLORS, INVALID_BRAND_DARK, INVALID_BRAND_LIGHT, } from "../checkout-core/models/checkout.constants.js";
+import { CheckoutThemeEnum } from "../checkout-core/models/checkout.enum.js";
+import { useSheetMotion } from "../hooks/use-sheet-motion.js";
+import { useWatchedPayment } from "../hooks/use-watched-payment.js";
+import { SheetThemeContext } from "../hooks/use-sheet-theme.js";
+import { FIGTREE_FILES, MESSAGES, TIME_ZONE, } from "../models/sheet.constants.js";
+import { sheetLanguage, sheetResult, sheetTheme, } from "../models/sheet.utils.js";
+import { SheetContent } from "./SheetContent.js";
+/**
+ * One payment in a bottom sheet over the dimmed app, as tall as what it
+ * shows, in the payment's language and theme, else the device's. Close,
+ * a swipe down, a tap on the app behind, back or escape leave it; leaving
+ * while a prompt waits on the phone asks first, and resolves `pending`.
+ */
+export function PaymentSheetModal({ calls, request, onClose, }) {
+    const watched = useWatchedPayment(calls, request.open ? request.paymentId : null);
+    const { view } = watched;
+    const scheme = useColorScheme();
+    const [deviceLocale] = useState(() => Intl.DateTimeFormat().resolvedOptions().locale);
+    const [fontsLoaded, fontsError] = useFonts(FIGTREE_FILES);
+    const lang = sheetLanguage(view?.language ?? null, deviceLocale);
+    const dark = sheetTheme(view?.theme ?? null, scheme) === CheckoutThemeEnum.DARK;
+    const color = view?.app.color;
+    const theme = useMemo(() => ({
+        colors: CHECKOUT_COLORS[dark ? CheckoutThemeEnum.DARK : CheckoutThemeEnum.LIGHT],
+        brand: color ?? (dark ? INVALID_BRAND_DARK : INVALID_BRAND_LIGHT),
+        dark,
+    }), [dark, color]);
+    const close = () => {
+        const result = sheetResult(view, watched.failed);
+        if (result.status !== 'pending') {
+            onClose(result);
+            return;
+        }
+        // A prompt still waits: approved later, the payment goes through.
+        const t = createTranslator({
+            locale: lang,
+            messages: MESSAGES[lang],
+            namespace: 'checkout.sheet',
+        });
+        Alert.alert(t('close_title'), t('close_body'), [
+            { text: t('keep_waiting'), style: 'cancel' },
+            {
+                text: MESSAGES[lang].checkout.close,
+                style: 'destructive',
+                onPress: () => onClose(result),
+            },
+        ]);
+    };
+    const motion = useSheetMotion(request.open, close);
+    return (_jsx(Modal, { testID: "payment-sheet-modal", visible: motion.shown, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: close, children: _jsxs(View, { style: [styles.screen, !request.open && styles.leaving], children: [_jsx(Pressable, { testID: "payment-sheet-backdrop", accessible: false, onPress: close, style: StyleSheet.absoluteFill, children: _jsx(Animated.View, { style: [
+                            StyleSheet.absoluteFill,
+                            styles.dim,
+                            { opacity: motion.dim },
+                        ] }) }), _jsx(Animated.View, { style: [
+                        styles.stage,
+                        { transform: [{ translateY: motion.translateY }] },
+                    ], children: _jsx(View, { style: [styles.stage, { paddingTop: motion.topGap }], children: _jsxs(KeyboardAvoidingView, { behavior: "padding", style: styles.sheet, children: [_jsx(View, { testID: "payment-sheet-floor", style: [
+                                        styles.floor,
+                                        { backgroundColor: theme.colors.surface },
+                                    ] }), _jsx(IntlProvider, { locale: lang, messages: MESSAGES[lang], timeZone: TIME_ZONE, children: _jsx(SheetThemeContext, { value: theme, children: _jsx(SheetContent, { calls: calls, watched: watched, fontsReady: fontsLoaded || fontsError !== null, deviceLocale: deviceLocale, onClose: close, dragHandlers: motion.dragHandlers }) }) })] }) }) })] }) }));
+}
+const styles = StyleSheet.create({
+    screen: { flex: 1 },
+    leaving: { pointerEvents: 'none' },
+    dim: { backgroundColor: 'black' },
+    // The app's dim shows through around the sheet.
+    stage: { flex: 1, justifyContent: 'flex-end', pointerEvents: 'box-none' },
+    sheet: { flexShrink: 1 },
+    // Under the sheet's rounded top, down to the screen's bottom.
+    floor: { position: 'absolute', top: 14, right: 0, bottom: 0, left: 0 },
+});

package/dist/components/SheetBone.d.ts

@@ -0,0 +1,3 @@
+import type { BoneProps } from '../models/sheet.interface.js';
+/** A rounded block standing in for what is loading, sized like it. */
+export declare function SheetBone({ width, height, radius }: BoneProps): import("react").JSX.Element;

package/dist/components/SheetBone.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+/** A rounded block standing in for what is loading, sized like it. */
+export function SheetBone({ width, height, radius = 6 }) {
+    const { colors } = useSheetTheme();
+    return (_jsx(View, { style: [
+            styles.bone,
+            { width, height, borderRadius: radius, backgroundColor: colors.fill },
+        ] }));
+}
+const styles = StyleSheet.create({ bone: { flex: 0 } });

package/dist/components/SheetButton.d.ts

@@ -0,0 +1,3 @@
+import type { SheetButtonProps } from '../models/sheet.interface.js';
+/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest. */
+export declare function SheetButton({ label, onPress, variant, busy, disabled, inactive, }: SheetButtonProps): import("react").JSX.Element;

package/dist/components/SheetButton.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIndicator, StyleSheet, TouchableOpacity } from 'react-native';
+import { CheckoutButtonVariantEnum } from "../checkout-core/models/checkout.enum.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest. */
+export function SheetButton({ label, onPress, variant = CheckoutButtonVariantEnum.PRIMARY, busy = false, disabled = false, inactive = false, }) {
+    const { colors, brand } = useSheetTheme();
+    const primary = variant === CheckoutButtonVariantEnum.PRIMARY;
+    const ink = primary ? 'white' : colors.ink;
+    const off = disabled || busy;
+    return (_jsxs(TouchableOpacity, { onPress: onPress, disabled: off, activeOpacity: 0.8, accessibilityRole: "button", accessibilityState: { disabled: off, busy }, style: [
+            styles.button,
+            primary
+                ? { backgroundColor: brand }
+                : { borderWidth: 1, borderColor: colors.line3 },
+            (disabled || inactive) && styles.disabled,
+        ], children: [busy && _jsx(ActivityIndicator, { color: ink }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 16, color: ink, style: styles.label, children: label })] }));
+}
+const styles = StyleSheet.create({
+    button: {
+        minHeight: 50,
+        borderRadius: 14,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 10,
+        paddingHorizontal: 16,
+    },
+    label: { textAlign: 'center', fontVariant: ['tabular-nums'] },
+    disabled: { opacity: 0.5 },
+});

package/dist/components/SheetCardFields.d.ts

@@ -0,0 +1,8 @@
+import type { SheetCardFieldsProps } from '../models/sheet.interface.js';
+/**
+ * A card method: its provider's card fields page, and only it, in a WebView
+ * sized to it. The card is typed there and goes from there to the provider;
+ * the sheet only hears, from that page's origin, how it went. The labels and
+ * bones stand in until the page says how tall it is.
+ */
+export declare function SheetCardFields({ core, bridge }: SheetCardFieldsProps): import("react").JSX.Element;

package/dist/components/SheetCardFields.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { useLocale, useTranslations } from 'use-intl';
+import { CARD_FIELDS_HEIGHT } from "../checkout-core/models/checkout.constants.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { cardFieldsBridge, cardFieldsMessageOf, cardFieldsUrl, isCardFieldsPage, originOf, } from "../models/sheet.utils.js";
+import { SheetBone } from "./SheetBone.js";
+import { SheetText } from "./SheetText.js";
+/** Every load goes through `mayLoad`: none is handed to the phone's browser. */
+const ANY_ORIGIN = ['*'];
+/**
+ * A card method: its provider's card fields page, and only it, in a WebView
+ * sized to it. The card is typed there and goes from there to the provider;
+ * the sheet only hears, from that page's origin, how it went. The labels and
+ * bones stand in until the page says how tall it is.
+ */
+export function SheetCardFields({ core, bridge }) {
+    const t = useTranslations('checkout.card_fields');
+    const lang = useLocale();
+    const { colors, dark } = useSheetTheme();
+    const { view, derived, cardHeight } = core;
+    // Shown only while a card method is picked, and they all come with their page.
+    const method = derived.selected;
+    const uri = cardFieldsUrl({
+        siteUrl: view.siteUrl,
+        path: method.cardFieldsPath,
+        paymentId: view.id,
+        method: method.id,
+        color: view.app.color,
+        dark,
+        lang,
+    });
+    const source = useMemo(() => ({ uri }), [uri]);
+    const loaded = cardHeight !== null;
+    // The page itself, in either language; the provider's own frames inside it.
+    const mayLoad = (request) => request.isTopFrame === false || isCardFieldsPage(request.url, uri);
+    // Only what comes from the card fields page's origin reaches the core.
+    const hear = ({ nativeEvent }) => {
+        if (originOf(nativeEvent.url) !== originOf(uri))
+            return;
+        const message = cardFieldsMessageOf(nativeEvent.data);
+        if (message)
+            bridge.receive(message);
+    };
+    const label = (text) => (_jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 13, style: styles.label, children: text }));
+    return (_jsxs(View, { style: styles.section, children: [!loaded && (_jsxs(View, { style: styles.bones, children: [_jsxs(View, { children: [label(t('number')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] }), _jsxs(View, { style: styles.row, children: [_jsxs(View, { style: styles.grow, children: [label(t('expiry')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] }), _jsxs(View, { style: styles.grow, children: [label(t('cvc')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] })] })] })), _jsx(WebView, { ref: bridge.page, source: source, accessibilityLabel: t('title'), originWhitelist: ANY_ORIGIN, onShouldStartLoadWithRequest: mayLoad, injectedJavaScriptBeforeContentLoaded: cardFieldsBridge(), onMessage: hear, setSupportMultipleWindows: false, scrollEnabled: false, style: [
+                    styles.page,
+                    {
+                        height: cardHeight ?? CARD_FIELDS_HEIGHT,
+                        backgroundColor: colors.surface,
+                    },
+                    !loaded && styles.hidden,
+                ] })] }));
+}
+const styles = StyleSheet.create({
+    section: { marginTop: 14 },
+    bones: { gap: 14, height: CARD_FIELDS_HEIGHT },
+    label: { marginBottom: 8 },
+    row: { flexDirection: 'row', gap: 12 },
+    grow: { flex: 1 },
+    page: { width: '100%' },
+    hidden: { position: 'absolute', top: 0, left: 0, right: 0, opacity: 0 },
+});

package/dist/components/SheetChosenMethod.d.ts

@@ -0,0 +1,3 @@
+import type { ChosenMethodProps } from '../models/sheet.interface.js';
+/** The method picked, on one row, with Change back to the list: as on the web checkout. */
+export declare function SheetChosenMethod({ logo, name, sub, onChange, }: ChosenMethodProps): import("react").JSX.Element;

package/dist/components/SheetChosenMethod.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { LOGO_SIZE } from "../checkout-core/models/checkout.constants.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetLogo } from "./SheetLogo.js";
+import { SheetText } from "./SheetText.js";
+/** The method picked, on one row, with Change back to the list: as on the web checkout. */
+export function SheetChosenMethod({ logo, name, sub, onChange, }) {
+    const t = useTranslations('checkout');
+    const { colors, brand } = useSheetTheme();
+    return (_jsxs(View, { testID: "chosen-method", style: [
+            styles.row,
+            { borderColor: colors.line2, backgroundColor: colors.surface },
+        ], children: [_jsxs(View, { children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW }), _jsx(View, { style: [
+                            styles.badge,
+                            { borderColor: colors.surface, backgroundColor: brand },
+                        ], children: _jsx(View, { style: styles.check }) })] }), _jsxs(View, { style: styles.text, children: [_jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 14, numberOfLines: 1, children: name }), _jsx(SheetText, { size: 12, color: colors.muted, numberOfLines: 1, children: sub })] }), _jsx(TouchableOpacity, { onPress: onChange, activeOpacity: 0.7, accessibilityRole: "button", accessibilityLabel: t('change'), hitSlop: 6, style: styles.change, children: _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 12, color: brand, children: t('change') }) })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        height: 48,
+        marginTop: 12,
+        borderWidth: 1,
+        borderRadius: 12,
+        paddingLeft: 8,
+        paddingRight: 6,
+    },
+    badge: {
+        position: 'absolute',
+        right: -4,
+        bottom: -4,
+        width: 16,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderRadius: 8,
+    },
+    check: {
+        width: 3.5,
+        height: 6.5,
+        marginTop: -1,
+        borderColor: 'white',
+        borderRightWidth: 1.6,
+        borderBottomWidth: 1.6,
+        transform: [{ rotate: '45deg' }],
+    },
+    text: { flex: 1, minWidth: 0 },
+    change: {
+        height: 32,
+        justifyContent: 'center',
+        borderRadius: 8,
+        paddingHorizontal: 10,
+    },
+});