@heyama/pay-react-native 1.0.7 → 1.1.0

package/dist/checkout-core/hooks/use-checkout-controller.d.ts

@@ -6,4 +6,4 @@ import type { CheckoutControllerOptions, CheckoutCore, CheckoutView } from '../m
  * clipboard, leaving for the app, the card fields page) comes in `platform`.
  * The language is not here: it comes from the IntlProvider around it.
  */
-export declare function useCheckoutController(view: CheckoutView | null | undefined, { clues, mutations, platform }: CheckoutControllerOptions): CheckoutCore;
+export declare function useCheckoutController(view: CheckoutView | null | undefined, { clues, calls, platform }: CheckoutControllerOptions): CheckoutCore;

package/dist/checkout-core/hooks/use-checkout-controller.js

@@ -31,8 +31,9 @@ const NO_PAYMENT_UI = {
  * clipboard, leaving for the app, the card fields page) comes in `platform`.
  * The language is not here: it comes from the IntlProvider around it.
  */
-export function useCheckoutController(view, { clues, mutations, platform }) {
+export function useCheckoutController(view, { clues, calls, platform }) {
     const t = useTranslations('checkout');
+    const mutations = calls?.mutations ?? null;
     const format = useFormatter();
     const lang = useLocale();
     const [patch, setPatch] = useState({});
@@ -131,12 +132,33 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         opened.current = paymentId;
         void mutations.open({ paymentId });
     }, [paymentId, mutations]);
-    // Coming back to the page or the app while waiting: ask the provider now (ADR 0001).
+    // Away from the page or the app while waiting, the payment is not followed
+    // live. Coming back asks the provider now (ADR 0001), then follows again.
+    const [away, setAway] = useState(false);
     useEffect(() => {
         if (!waiting || !paymentId || !mutations)
             return undefined;
-        return platform.onReturn(() => void mutations.checkNow({ paymentId }));
+        // Already away when the wait starts (off to the dialler): not followed until back.
+        if (platform.isAway())
+            setAway(true);
+        const stopLeave = platform.onLeave(() => setAway(true));
+        const stopReturn = platform.onReturn(() => void mutations
+            .checkNow({ paymentId })
+            .catch(() => null)
+            .then(() => setAway(false)));
+        return () => {
+            stopLeave();
+            stopReturn();
+            setAway(false);
+        };
     }, [waiting, paymentId, mutations, platform]);
+    // Followed live only on the waiting screen (ADR 0006).
+    const followed = waiting && !away;
+    const follow = calls?.follow;
+    useEffect(() => {
+        follow?.(followed);
+    }, [follow, followed]);
+    const refresh = calls?.refresh;
     const goBack = useCallback(() => update({ redirecting: true }), [update]);
     const countdown = useReturnCountdown(screen === CheckoutScreenEnum.SUCCESS, goBack);
     const returnUrl = view?.returnUrl;
@@ -161,9 +183,10 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
                         ...(message.complete ? {} : { cardPaying: false }),
                     });
                     break;
-                // The card is with its provider: the waiting screen follows the checks.
+                // The card is with its provider: read the attempt, the waiting screen follows the checks.
                 case CardFieldsMessageEnum.DONE:
                     update({ cardPaying: false });
+                    refresh?.();
                     break;
                 case CardFieldsMessageEnum.REFUSED:
                     update({ cardPaying: false });
@@ -172,7 +195,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             }
         };
         return platform.onCardMessage(onMessage);
-    }, [update, showToast, refusals, failedToast, platform]);
+    }, [update, showToast, refusals, failedToast, platform, refresh]);
     /* ---------------------------------------------------------- helpers */
     const reference = attempt?.reference ?? view?.id ?? '';
     const comingSoon = (name) => toast.show(t('toast.soon', { method: name }), CheckoutToastToneEnum.INFO);

package/dist/checkout-core/hooks/use-checkout-payment.d.ts

@@ -0,0 +1,9 @@
+import type { CheckoutConnection, CheckoutPayment } from '../models/checkout.interface.js';
+/**
+ * One payment for a checkout (ADR 0006): read once over plain calls, read
+ * again after each call that changes it, and followed live only between
+ * `follow(true)` and `follow(false)`, which the controller says while the
+ * payer is on the waiting screen. Once `paymentId` is cleared (a sheet
+ * closing) the last answer stays.
+ */
+export declare function useCheckoutPayment(connection: CheckoutConnection, paymentId: string | null): CheckoutPayment;

package/dist/checkout-core/hooks/use-checkout-payment.js

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/**
+ * One payment for a checkout (ADR 0006): read once over plain calls, read
+ * again after each call that changes it, and followed live only between
+ * `follow(true)` and `follow(false)`, which the controller says while the
+ * payer is on the waiting screen. Once `paymentId` is cleared (a sheet
+ * closing) the last answer stays.
+ */
+export function useCheckoutPayment(connection, paymentId) {
+    const [held, setHeld] = useState({
+        view: undefined,
+        failed: false,
+    });
+    const [following, setFollowing] = useState(false);
+    /** Opened again after a failure: once, then the calls read over HTTP. */
+    const [reopened, setReopened] = useState(0);
+    const failures = useRef(0);
+    /** Followed live: the connection brings each change, nothing is read again. */
+    const followingNow = useRef(false);
+    /** The payment held, and the newest answer shown: an older one never replaces it. */
+    const holding = useRef(paymentId);
+    const counter = useRef(0);
+    const shown = useRef(0);
+    const show = useCallback((ticket, next) => {
+        if (ticket < shown.current)
+            return;
+        shown.current = ticket;
+        setHeld(next);
+    }, []);
+    const read = useCallback((id) => {
+        const ticket = ++counter.current;
+        return connection.load(id).then((view) => {
+            if (holding.current === id)
+                show(ticket, () => ({ view, failed: false }));
+        }, 
+        // A failed read keeps what was shown.
+        () => {
+            if (holding.current === id)
+                show(ticket, (previous) => ({ ...previous, failed: true }));
+        });
+    }, [connection, show]);
+    useEffect(() => {
+        holding.current = paymentId;
+        if (paymentId)
+            void read(paymentId);
+    }, [paymentId, read]);
+    useEffect(() => {
+        followingNow.current = following;
+    }, [following]);
+    useEffect(() => {
+        if (!following || !paymentId)
+            return undefined;
+        return connection.follow(paymentId, (view) => {
+            failures.current = 0;
+            show(++counter.current, () => ({ view, failed: false }));
+        }, 
+        // A broken connection is read over HTTP and opened once more; broken
+        // again, it stays closed and the calls read over HTTP.
+        () => {
+            setHeld((previous) => ({ ...previous, failed: true }));
+            failures.current += 1;
+            if (failures.current > 1) {
+                setFollowing(false);
+                return;
+            }
+            void read(paymentId);
+            setReopened((count) => count + 1);
+        });
+    }, [following, reopened, paymentId, connection, show, read]);
+    const mutations = useMemo(() => {
+        const { open, ...changing } = connection.mutations;
+        /**
+         * The call, then the payment read again, then the call's answer. Not
+         * read while followed live, nor after a refusal: nothing changed.
+         */
+        const reading = (call) => async (args) => {
+            const result = await call(args);
+            const refused = result?.ok === false;
+            if (!followingNow.current && !refused)
+                await read(args.paymentId);
+            return result;
+        };
+        return {
+            open,
+            pay: reading(changing.pay),
+            payWithCode: reading(changing.payWithCode),
+            checkNow: reading(changing.checkNow),
+            cancel: reading(changing.cancel),
+            resend: reading(changing.resend),
+            simulate: reading(changing.simulate),
+        };
+    }, [connection, read]);
+    const refresh = useCallback(() => {
+        if (paymentId)
+            void read(paymentId);
+    }, [paymentId, read]);
+    const calls = useMemo(() => ({ mutations, follow: setFollowing, refresh }), [mutations, refresh]);
+    return { ...held, calls };
+}

package/dist/checkout-core/models/checkout.interface.d.ts

@@ -308,6 +308,10 @@ export interface CheckoutCore {
 export interface CheckoutPlatform {
     /** Calls `listener` each time the payer comes back to the page or the app; answers how to stop. */
     onReturn: (listener: () => void) => () => void;
+    /** Calls `listener` each time the payer leaves the page or the app; answers how to stop. */
+    onLeave: (listener: () => void) => () => void;
+    /** The payer is away from the page or the app right now. */
+    isAway: () => boolean;
     copyText: (text: string) => void;
     /** Leaves for the app's return URL. */
     openUrl: (url: string) => void;
@@ -323,9 +327,47 @@ export interface CheckoutPlatform {
 export interface CheckoutControllerOptions {
     clues: CountryClues;
     /** Null on the Branding tab's preview: nothing is paid there. */
-    mutations: CheckoutMutations | null;
+    calls: CheckoutCalls | null;
     platform: CheckoutPlatform;
 }
+/** What a checkout asks of the gateway about its payment, from `useCheckoutPayment`. */
+export interface CheckoutCalls {
+    /** Each call that changes the payment reads it again before it answers. */
+    mutations: CheckoutMutations;
+    /** Opens or closes the live connection: open only while the payer is on the waiting screen. */
+    follow: (on: boolean) => void;
+    /** Reads the payment again: the card fields page started an attempt the checkout did not. */
+    refresh: () => void;
+}
+/**
+ * How a checkout reaches the gateway (ADR 0006): plain calls, and a live
+ * connection to one payment only while the payer waits on it.
+ */
+export interface CheckoutConnection {
+    /** The payment's checkout view, read once; null: no payment has this id. */
+    load: (paymentId: string) => Promise<CheckoutView | null>;
+    /**
+     * Opens a live connection to one payment: `onView` with each answer,
+     * `onError` when it cannot load. Answers how to close it.
+     */
+    follow: (paymentId: string, onView: (view: CheckoutView | null) => void, onError: () => void) => () => void;
+    mutations: CheckoutMutations;
+}
+/** What a checkout last heard of its payment. */
+export interface HeldPayment {
+    /** `undefined` while loading, null for a link that matches none. */
+    view: CheckoutView | null | undefined;
+    /** The last read failed. */
+    failed: boolean;
+}
+/** One payment as a checkout holds it, from `useCheckoutPayment`. */
+export interface CheckoutPayment extends HeldPayment {
+    calls: CheckoutCalls;
+}
+/** What a gateway call answers when it can refuse (Pay, Send again). */
+export interface MaybeRefused {
+    ok?: boolean;
+}
 /** What Pay answers: refused with a reason, or an attempt started. */
 export interface PayResult {
     ok: boolean;

package/dist/components/BrissotoPayProvider.d.ts

@@ -1,6 +1,7 @@
 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.
+ * Around the app: the calls to Brissoto Pay and the one payment sheet
+ * `usePaymentSheet().presentPayment` opens. Nothing stays connected: a
+ * sheet follows its payment live only while the payer waits on it.
  */
 export declare function BrissotoPayProvider({ url, children, }: BrissotoPayProviderProps): import("react").JSX.Element;

package/dist/components/BrissotoPayProvider.js

@@ -1,22 +1,16 @@
 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 { useCallback, 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 { convexCheckoutConnection } 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.
+ * Around the app: the calls to Brissoto Pay and the one payment sheet
+ * `usePaymentSheet().presentPayment` opens. Nothing stays connected: a
+ * sheet follows its payment live only while the payer waits on it.
  */
 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 connection = useMemo(() => convexCheckoutConnection(url), [url]);
     const [request, setRequest] = useState(null);
     /** Sheets opened, so each gets a fresh one. */
     const [count, setCount] = useState(0);
@@ -37,5 +31,5 @@ export function BrissotoPayProvider({ url = DEFAULT_URL, children, }) {
         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))] }));
+    return (_jsxs(PaymentSheetContext, { value: sheet, children: [children, request && (_jsx(PaymentSheetModal, { connection: connection, request: request, onClose: (result) => close(request, result) }, count))] }));
 }

package/dist/components/PaymentSheetModal.d.ts

@@ -5,4 +5,4 @@ import type { PaymentSheetModalProps } from '../models/sheet.interface.js';
  * 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;
+export declare function PaymentSheetModal({ connection, request, onClose, }: PaymentSheetModalProps): import("react").JSX.Element;

package/dist/components/PaymentSheetModal.js

@@ -4,9 +4,9 @@ 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 { useCheckoutPayment } from "../checkout-core/hooks/use-checkout-payment.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";
@@ -17,9 +17,9 @@ import { SheetContent } from "./SheetContent.js";
  * 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;
+export function PaymentSheetModal({ connection, request, onClose, }) {
+    const payment = useCheckoutPayment(connection, request.open ? request.paymentId : null);
+    const { view } = payment;
     const scheme = useColorScheme();
     const [deviceLocale] = useState(() => Intl.DateTimeFormat().resolvedOptions().locale);
     const [fontsLoaded, fontsError] = useFonts(FIGTREE_FILES);
@@ -32,7 +32,7 @@ export function PaymentSheetModal({ calls, request, onClose, }) {
         dark,
     }), [dark, color]);
     const close = () => {
-        const result = sheetResult(view, watched.failed);
+        const result = sheetResult(view, payment.failed);
         if (result.status !== 'pending') {
             onClose(result);
             return;
@@ -63,7 +63,7 @@ export function PaymentSheetModal({ calls, request, onClose, }) {
                     ], 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 }) }) })] }) }) })] }) }));
+                                    ] }), _jsx(IntlProvider, { locale: lang, messages: MESSAGES[lang], timeZone: TIME_ZONE, children: _jsx(SheetThemeContext, { value: theme, children: _jsx(SheetContent, { payment: payment, fontsReady: fontsLoaded || fontsError !== null, deviceLocale: deviceLocale, onClose: close, dragHandlers: motion.dragHandlers }) }) })] }) }) })] }) }));
 }
 const styles = StyleSheet.create({
     screen: { flex: 1 },

package/dist/components/SheetContent.d.ts

@@ -1,3 +1,3 @@
 import type { SheetContentProps } from '../models/sheet.interface.js';
 /** The sheet's screens, driven by the shared checkout controller. */
-export declare function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose, dragHandlers, }: SheetContentProps): import("react").JSX.Element;
+export declare function SheetContent({ payment, fontsReady, deviceLocale, onClose, dragHandlers, }: SheetContentProps): import("react").JSX.Element;

package/dist/components/SheetContent.js

@@ -28,7 +28,7 @@ const TERMINAL_KIND = {
     [CheckoutScreenEnum.NO_METHOD]: TerminalKindEnum.NO_METHOD,
 };
 /** The sheet's screens, driven by the shared checkout controller. */
-export function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose, dragHandlers, }) {
+export function SheetContent({ payment, fontsReady, deviceLocale, onClose, dragHandlers, }) {
     const t = useTranslations('checkout');
     const { colors } = useSheetTheme();
     const [clues] = useState(() => ({
@@ -37,16 +37,16 @@ export function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose
     }));
     const phoneRef = useRef(null);
     const { platform, cardFields } = useNativePlatform(onClose, phoneRef);
-    const { view } = watched;
+    const { view } = payment;
     const core = useCheckoutController(view, {
         clues,
-        mutations: calls.mutations,
+        calls: payment.calls,
         platform,
     });
     const { ui, derived, actions } = core;
     const { screen } = derived;
     // A payment that could not load is not loading any more.
-    const failed = watched.failed && view === undefined;
+    const failed = payment.failed && view === undefined;
     const loading = !fontsReady || (screen === CheckoutScreenEnum.LOADING && !failed);
     const terminal = TERMINAL_KIND[screen];
     useSheetResize([

package/dist/hooks/use-native-platform.js

@@ -22,6 +22,15 @@ export function useNativePlatform(onLeave, phoneField) {
             });
             return () => subscription.remove();
         },
+        // Inactive (a notification pulled down) is not leaving.
+        onLeave: (listener) => {
+            const subscription = AppState.addEventListener('change', (state) => {
+                if (state === 'background')
+                    listener();
+            });
+            return () => subscription.remove();
+        },
+        isAway: () => AppState.currentState === 'background',
         // No clipboard in React Native itself: the share sheet offers Copy.
         copyText: (text) => {
             void Share.share({ message: text }).catch(() => undefined);

package/dist/models/sheet.interface.d.ts

@@ -3,7 +3,7 @@ import type { Animated, DimensionValue, GestureResponderHandlers, StyleProp, Tex
 import type { WebView } from 'react-native-webview';
 import type { CheckoutButtonVariantEnum, TerminalKindEnum } from '../checkout-core/models/checkout.enum.js';
 import type { LangEnum, ProviderLogoEnum } from '../checkout-core/models/domain.enum.js';
-import type { CardFieldsMessage, CheckoutColors, CheckoutCore, CheckoutToast, CheckoutMutations, CheckoutPlatform, CheckoutView } from '../checkout-core/models/checkout.interface.js';
+import type { CardFieldsMessage, CheckoutColors, CheckoutCore, CheckoutToast, CheckoutConnection, CheckoutPayment, CheckoutPlatform, CheckoutView } from '../checkout-core/models/checkout.interface.js';
 import type { FigtreeEnum, SheetIconEnum } from './sheet.enum.js';
 /**
  * How the sheet ended. `closed`: the payer closed it with the payment still
@@ -29,15 +29,6 @@ export interface BrissotoPayProviderProps {
     url?: string;
     children?: ReactNode;
 }
-/** The checkout's gateway calls, one interface for the sheet whatever client is behind it. */
-export interface CheckoutCalls {
-    /**
-     * Follows one payment's checkout view live: `onView` with each answer
-     * (null: no payment has this id), `onError` when it cannot load. Answers how to stop.
-     */
-    watch: (paymentId: string, onView: (view: CheckoutView | null) => void, onError: () => void) => () => void;
-    mutations: CheckoutMutations;
-}
 /** The sheet the app asked for, and how to answer it. */
 export interface SheetRequest {
     paymentId: string;
@@ -45,20 +36,13 @@ export interface SheetRequest {
     open: boolean;
     resolve: (result: PaymentSheetResult) => void;
 }
-/** A payment as the sheet follows it: undefined while loading, null for an id that matches none. */
-export interface WatchedPayment {
-    view: CheckoutView | null | undefined;
-    /** It could not load. */
-    failed: boolean;
-}
 export interface PaymentSheetModalProps {
-    calls: CheckoutCalls;
+    connection: CheckoutConnection;
     request: SheetRequest;
     onClose: (result: PaymentSheetResult) => void;
 }
 export interface SheetContentProps {
-    calls: CheckoutCalls;
-    watched: WatchedPayment;
+    payment: CheckoutPayment;
     /** Fonts still loading: the sheet shows its skeleton. */
     fontsReady: boolean;
     deviceLocale: string;

package/dist/services/checkout.service.d.ts

@@ -1,7 +1,8 @@
-import type { ConvexReactClient } from 'convex/react';
-import type { CheckoutCalls } from '../models/sheet.interface.js';
+import type { CheckoutConnection } from '../checkout-core/models/checkout.interface.js';
 /**
- * The checkout's calls over the Convex client: the same public functions the
- * web checkout calls, by path, so the package needs none of the backend's code.
+ * The checkout's calls to the gateway at `url` (ADR 0006): plain HTTP calls,
+ * by path, to the same public functions the web checkout calls, so the
+ * package needs none of the backend's code. A live connection is opened only
+ * to follow one payment, and closed with it.
  */
-export declare function convexCheckoutCalls(client: ConvexReactClient): CheckoutCalls;
+export declare function convexCheckoutConnection(url: string): CheckoutConnection;

package/dist/services/checkout.service.js

@@ -1,12 +1,17 @@
+import { ConvexClient, ConvexHttpClient } from 'convex/browser';
 import { makeFunctionReference } from 'convex/server';
 import { CHECKOUT_FUNCTIONS } from "../models/sheet.constants.js";
 /**
- * The checkout's calls over the Convex client: the same public functions the
- * web checkout calls, by path, so the package needs none of the backend's code.
+ * The checkout's calls to the gateway at `url` (ADR 0006): plain HTTP calls,
+ * by path, to the same public functions the web checkout calls, so the
+ * package needs none of the backend's code. A live connection is opened only
+ * to follow one payment, and closed with it.
  */
-export function convexCheckoutCalls(client) {
-    const mutation = (path) => (args) => client.mutation(makeFunctionReference(path), args);
-    const action = (path) => (args) => client.action(makeFunctionReference(path), args);
+export function convexCheckoutConnection(url) {
+    const http = new ConvexHttpClient(url);
+    const mutation = (path) => (args) => http.mutation(makeFunctionReference(path), args);
+    const action = (path) => (args) => http.action(makeFunctionReference(path), args);
+    const get = makeFunctionReference(CHECKOUT_FUNCTIONS.get);
     const mutations = {
         pay: mutation(CHECKOUT_FUNCTIONS.pay),
         payWithCode: action(CHECKOUT_FUNCTIONS.payWithCode),
@@ -17,22 +22,14 @@ export function convexCheckoutCalls(client) {
         simulate: mutation(CHECKOUT_FUNCTIONS.simulate),
     };
     return {
-        watch: (paymentId, onView, onError) => {
-            const watch = client.watchQuery(makeFunctionReference(CHECKOUT_FUNCTIONS.get), { paymentId });
-            const read = () => {
-                let view;
-                try {
-                    view = watch.localQueryResult();
-                }
-                catch {
-                    onError();
-                    return;
-                }
-                if (view !== undefined)
-                    onView(view);
+        load: (paymentId) => http.query(get, { paymentId }),
+        follow: (paymentId, onView, onError) => {
+            const socket = new ConvexClient(url, { unsavedChangesWarning: false });
+            const stop = socket.onUpdate(get, { paymentId }, (view) => onView(view), () => onError());
+            return () => {
+                stop();
+                void socket.close();
             };
-            read();
-            return watch.onUpdate(read);
         },
         mutations,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyama/pay-react-native",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Brissoto Pay for Expo and React Native apps: the payment sheet.",
   "license": "MIT",
   "sideEffects": false,

package/dist/hooks/use-watched-payment.d.ts

@@ -1,6 +0,0 @@
-import type { CheckoutCalls, WatchedPayment } from '../models/sheet.interface.js';
-/**
- * One payment, live, while `paymentId` is set. Once it is cleared (the sheet
- * closing) the last answer stays, so the sheet slides away unchanged.
- */
-export declare function useWatchedPayment(calls: CheckoutCalls, paymentId: string | null): WatchedPayment;

package/dist/hooks/use-watched-payment.js

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-/**
- * One payment, live, while `paymentId` is set. Once it is cleared (the sheet
- * closing) the last answer stays, so the sheet slides away unchanged.
- */
-export function useWatchedPayment(calls, paymentId) {
-    const [watched, setWatched] = useState({
-        view: undefined,
-        failed: false,
-    });
-    useEffect(() => {
-        if (!paymentId)
-            return undefined;
-        return calls.watch(paymentId, (view) => setWatched({ view, failed: false }), () => setWatched((previous) => ({ ...previous, failed: true })));
-    }, [calls, paymentId]);
-    return watched;
-}