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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brissoto Pay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,100 @@
-# Temporary Holding Version
+# @heyama/pay-react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Take payments in your Expo app through Brissoto Pay: a payment sheet slides up, the payer pays in it and never leaves the app. Pure JavaScript: it runs in Expo Go and any Expo app, with no native code and no rebuild.
+
+```sh
+npx expo install @heyama/pay-react-native convex expo-font react-native-webview
+```
+
+## 1. Create the payment on your server
+
+The payment is created on your server with [`@heyama/pay`](https://www.npmjs.com/package/@heyama/pay), as for the web. Its key stays there: the app only gets the payment id.
+
+```ts
+const payment = await pay.createPayment({
+  amount: 15000,
+  currency: 'XAF',
+  orderRef: order.id,
+  returnUrl: `kola://orders/${order.id}`, // your app's deep link
+  items: [{ name: 'Ndolé', quantity: 1, unitAmount: 15000 }],
+  payer: { phone: '+237690000000' },
+})
+
+res.json({ paymentId: payment.id })
+```
+
+## 2. Wrap the app in the provider
+
+```tsx
+import { BrissotoPayProvider } from '@heyama/pay-react-native'
+
+export default function RootLayout() {
+  return (
+    <BrissotoPayProvider>
+      <Stack />
+    </BrissotoPayProvider>
+  )
+}
+```
+
+## 3. Open the payment sheet
+
+```tsx
+import { usePaymentSheet } from '@heyama/pay-react-native'
+
+function PayButton({ orderId }: { orderId: string }) {
+  const { presentPayment } = usePaymentSheet()
+
+  const pay = async () => {
+    const { paymentId } = await api.post(`/orders/${orderId}/pay`)
+    const result = await presentPayment({ paymentId })
+    if (result.status === 'paid') router.push(`/orders/${orderId}`)
+  }
+
+  return <Button title="Pay" onPress={pay} />
+}
+```
+
+`presentPayment` resolves when the sheet closes. One sheet at a time: a second call while one is open rejects.
+
+## Results
+
+| `result.status` | When                                                                                      |
+| --------------- | ----------------------------------------------------------------------------------------- |
+| `paid`          | The payment is paid.                                                                      |
+| `pending`       | The payer closed the sheet while a prompt waited on their phone: it may still go through. |
+| `closed`        | The payer closed the sheet with the payment still open.                                   |
+| `cancelled`     | The payment was cancelled.                                                                |
+| `expired`       | The payment expired.                                                                      |
+| `locked`        | Too many failed tries: the payment can no longer be paid.                                 |
+
+When the sheet could not show the payment, `status` is `closed` and `result.error` says why: `not_found` (no payment has this id) or `network` (it could not load).
+
+**The result proves nothing.** It comes from the phone. Ship the order on the `payment.paid` webhook, or once `getPayment` on your server says `paid`. Use the result only to move the payer on.
+
+## Deep link return URL
+
+The sheet closes by itself; `returnUrl` brings the payer back when they pay on the checkout link (`checkoutUrl`) in a browser instead. Pass your app's deep link:
+
+1. Add your app's scheme (`scheme` in `app.json`) to the server's return URLs in the dashboard (Apps, your app, Integration), the scheme alone: `kola://`.
+2. Any link on it is then accepted: `kola://orders/12`.
+
+## Test with the Simulator
+
+A payment created with a `bp_test_…` key opens with a Test badge and the Simulator: pick what happens to it (Approve, Decline, Wrong PIN, Low balance…) and the sheet follows. No money moves and no provider is called. The app changes nothing: the payment decides.
+
+## Language and theme
+
+The sheet takes the payment's `language` and `theme`. Without them it follows the phone: French or English (English for any other language), light or dark.
+
+## Options
+
+`BrissotoPayProvider` takes:
+
+| Option | Default                        | What it is                                                                                              |
+| ------ | ------------------------------ | ------------------------------------------------------------------------------------------------------- |
+| `url`  | `https://api-pay.brissoto.com` | The Brissoto Pay backend. One serves Live and Test. Set it only to point the sheet at a dev deployment. |
+
+```tsx
+<BrissotoPayProvider url={process.env.EXPO_PUBLIC_BRISSOTO_PAY_URL}>
+```

package/assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -0,0 +1,9 @@
+import type { CheckoutControllerOptions, CheckoutCore, CheckoutView } from '../models/checkout.interface.js';
+/**
+ * The whole checkout for one payment, on any platform: the gateway's live
+ * view of it, what the payer does, the number, the clocks, and every action
+ * the screens can take. What only a platform can do (coming back, the
+ * 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;

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

@@ -0,0 +1,319 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFormatter, useTranslations } from 'use-intl';
+import { COPIED_MS, FLOW_TRAITS, OTP_MAX_LENGTH, OTP_PATTERN, } from "../models/checkout.constants.js";
+import { CardFieldsMessageEnum, CheckoutScreenEnum, CheckoutTabEnum, MethodFlowEnum, MethodStateEnum, PayRefusalEnum, } from "../models/checkout.enum.js";
+import { CountryEnum } from "../models/domain.enum.js";
+import { cardLabel } from "../models/checkout.card.utils.js";
+import { formatMoney } from "../models/checkout.money.utils.js";
+import { maskE164 } from "../models/checkout.phone.utils.js";
+import { countriesOf, deriveCheckout, initialUi, screenOf, waitLeftOf, } from "../models/checkout.view.utils.js";
+import { useNow, useReturnCountdown, useToast } from "./use-checkout-timers.js";
+import { usePhoneNumber } from "./use-phone-number.js";
+/** Before the payment has loaded, or for a link that matches none. */
+const NO_PAYMENT_UI = {
+    tab: CheckoutTabEnum.MOBILE_MONEY,
+    country: CountryEnum.CAMEROON,
+    method: null,
+    code: '',
+    cardComplete: false,
+    cardPaying: false,
+    pickerOpen: true,
+    summaryOpen: false,
+    submitting: false,
+    dismissed: null,
+    redirecting: false,
+};
+/**
+ * The whole checkout for one payment, on any platform: the gateway's live
+ * view of it, what the payer does, the number, the clocks, and every action
+ * the screens can take. What only a platform can do (coming back, the
+ * 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 }) {
+    const t = useTranslations('checkout');
+    const format = useFormatter();
+    const [patch, setPatch] = useState({});
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const copiedTimer = useRef(undefined);
+    /** A Pay press is on its way: a second tap must not start another attempt. */
+    const paying = useRef(false);
+    const [cardHeight, setCardHeight] = useState(null);
+    const toast = useToast();
+    const ui = {
+        ...(view ? initialUi(view, clues) : NO_PAYMENT_UI),
+        ...patch,
+    };
+    const update = useCallback((next) => setPatch((previous) => ({ ...previous, ...next })), []);
+    const countries = view ? countriesOf(view.methods) : [];
+    const phone = usePhoneNumber({
+        country: ui.country,
+        countries,
+        // A full number of another country moves the page there.
+        onCountryChange: (country) => update({ country, method: null, pickerOpen: true }),
+    });
+    const derived = view
+        ? deriveCheckout(view, ui, phone.status)
+        : {
+            screen: screenOf(view, ui),
+            countries,
+            wallets: [],
+            cards: [],
+            selected: null,
+            canPay: false,
+            mismatch: null,
+            suggestion: null,
+        };
+    const { screen } = derived;
+    const attempt = view?.attempt ?? null;
+    // The payer's number from the app, once the field exists.
+    const prefill = view?.payer.phone;
+    const { fill } = phone;
+    useEffect(() => {
+        if (prefill)
+            fill(prefill);
+    }, [prefill, fill]);
+    const waiting = screen === CheckoutScreenEnum.WAITING;
+    const now = useNow(waiting);
+    const waitLeft = attempt ? waitLeftOf(attempt.startedAt, now) : 0;
+    const attemptReference = attempt?.reference;
+    const noAnswer = t('toast.no_answer');
+    const showToast = toast.show;
+    useEffect(() => {
+        if (!waiting || waitLeft > 0)
+            return;
+        update({ dismissed: attemptReference });
+        showToast(noAnswer);
+    }, [waiting, waitLeft, attemptReference, noAnswer, showToast, update]);
+    const paymentId = view?.id;
+    // A payer opened the link, said once per page (the dashboard's preview has no mutations).
+    const opened = useRef(null);
+    useEffect(() => {
+        if (!paymentId || !mutations || opened.current === paymentId)
+            return;
+        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).
+    useEffect(() => {
+        if (!waiting || !paymentId || !mutations)
+            return undefined;
+        return platform.onReturn(() => void mutations.checkNow({ paymentId }));
+    }, [waiting, paymentId, mutations, platform]);
+    const goBack = useCallback(() => update({ redirecting: true }), [update]);
+    const countdown = useReturnCountdown(screen === CheckoutScreenEnum.SUCCESS, goBack);
+    const returnUrl = view?.returnUrl;
+    useEffect(() => {
+        if (ui.redirecting && returnUrl)
+            platform.openUrl(returnUrl);
+    }, [ui.redirecting, returnUrl, platform]);
+    useEffect(() => () => clearTimeout(copiedTimer.current), []);
+    const failedToast = t('toast.failed');
+    const refusals = useCallback((reason) => t(`refusals.${reason}`), [t]);
+    // The card fields page says how it stands; the card itself never comes here.
+    useEffect(() => {
+        const onMessage = (message) => {
+            switch (message.type) {
+                case CardFieldsMessageEnum.HEIGHT:
+                    setCardHeight(message.height);
+                    break;
+                case CardFieldsMessageEnum.STATE:
+                    // Incomplete on Pay: the fields say what is missing, the form stays.
+                    update({
+                        cardComplete: message.complete,
+                        ...(message.complete ? {} : { cardPaying: false }),
+                    });
+                    break;
+                // The card is with its provider: the waiting screen follows the checks.
+                case CardFieldsMessageEnum.DONE:
+                    update({ cardPaying: false });
+                    break;
+                case CardFieldsMessageEnum.REFUSED:
+                    update({ cardPaying: false });
+                    showToast(message.reason ? refusals(message.reason) : failedToast);
+                    break;
+            }
+        };
+        return platform.onCardMessage(onMessage);
+    }, [update, showToast, refusals, failedToast, platform]);
+    /* ---------------------------------------------------------- helpers */
+    const reference = attempt?.reference ?? view?.id ?? '';
+    const comingSoon = (name) => toast.show(t('toast.soon', { method: name }));
+    /**
+     * Starts an attempt with the number, and the payment code of an OTP
+     * method; a second tap while one is on its way does nothing.
+     */
+    const submit = (method, { phone: e164, otp }) => {
+        if (paying.current)
+            return;
+        paying.current = true;
+        update({ submitting: true });
+        const args = { paymentId: view.id, method, phone: e164 };
+        void (otp === undefined
+            ? mutations.pay(args)
+            : mutations.payWithCode({ ...args, otp }))
+            .then((result) => {
+            if (!result.ok)
+                toast.show(t(`refusals.${result.reason}`));
+        })
+            .catch(() => toast.show(t('toast.failed')))
+            .finally(() => {
+            paying.current = false;
+            update({ submitting: false });
+        });
+    };
+    const receiptText = (payment) => [
+        t('receipt_title'),
+        '',
+        payment.app.name,
+        `${t('amount')}: ${formatMoney(payment.amount, payment.currency)}`,
+        `${t('method')}: ${attempt.methodName}`,
+        // A card paid by hand may come without what its provider reported.
+        ...(attempt.phone
+            ? [`${t('number')}: ${maskE164(attempt.phone)}`]
+            : attempt.card
+                ? [`${t('card')}: ${cardLabel(attempt.card)}`]
+                : []),
+        `${t('date')}: ${format.dateTime(payment.paidAt, { dateStyle: 'medium', timeStyle: 'short' })}`,
+        `${t('reference')}: ${reference}`,
+    ].join('\n');
+    /* ---------------------------------------------------------- actions */
+    const actions = {
+        toggleSummary: () => update({ summaryOpen: !ui.summaryOpen }),
+        setTab: (tab) => update({ tab }),
+        setCountry: (country) => update({ country, method: null, pickerOpen: true }),
+        selectMethod: (method) => {
+            if (method.state === MethodStateEnum.SOON) {
+                comingSoon(method.name);
+            }
+            else if (method.state === MethodStateEnum.MAINTENANCE) {
+                toast.show(method.note ?? t('toast.unavailable', { method: method.name }));
+            }
+            else {
+                update({
+                    method: method.id,
+                    pickerOpen: false,
+                    code: '',
+                    cardComplete: false,
+                });
+            }
+        },
+        comingSoon,
+        openPicker: () => update({ pickerOpen: true }),
+        // Only offered while the number belongs to another method.
+        switchToDetected: () => {
+            const detected = derived.mismatch;
+            update({ method: detected.id });
+            toast.show(t('toast.switched', { method: detected.name }));
+        },
+        pay: () => {
+            const { selected } = derived;
+            if (!selected)
+                return;
+            // The preview offers no card: it shows Mobile Money only.
+            if (selected.flow === MethodFlowEnum.CARD_FIELDS) {
+                // The fields page pays with its provider, then says how it went.
+                update({ cardPaying: true });
+                platform.submitCard();
+                return;
+            }
+            if (!phone.status.valid) {
+                phone.reject();
+                platform.onPhoneRejected();
+                return;
+            }
+            const otp = selected.flow === MethodFlowEnum.OTP;
+            if (otp && !OTP_PATTERN.test(ui.code)) {
+                toast.show(t(`refusals.${PayRefusalEnum.CODE}`));
+                return;
+            }
+            if (!mutations) {
+                toast.show(t('toast.preview'));
+                return;
+            }
+            submit(selected.id, {
+                phone: phone.e164,
+                ...(otp ? { otp: ui.code } : {}),
+            });
+        },
+        // Only offered while an OTP method, which always has its code, is picked.
+        cannotDial: () => {
+            const method = derived.selected;
+            toast.show(t('toast.dial', { code: method.otpCode, method: method.name }));
+        },
+        // Only on the failure screen, which the preview never shows.
+        retry: () => {
+            // A payment code works once, a card is typed again: back to the form.
+            const traits = FLOW_TRAITS[attempt.flow];
+            if (!traits.prompt) {
+                update({
+                    dismissed: attempt.reference,
+                    tab: traits.tab,
+                    method: attempt.method,
+                    pickerOpen: false,
+                    code: '',
+                    cardComplete: false,
+                });
+                return;
+            }
+            submit(attempt.method, { phone: attempt.phone });
+        },
+        setCode: (code) => update({ code: code.replace(/\D/g, '').slice(0, OTP_MAX_LENGTH) }),
+        useAnother: () => {
+            const { suggestion } = derived;
+            update({
+                dismissed: attempt.reference,
+                tab: CheckoutTabEnum.MOBILE_MONEY,
+                country: suggestion?.country ?? ui.country,
+                method: suggestion?.id ?? null,
+                pickerOpen: !suggestion,
+            });
+        },
+        resend: () => {
+            void mutations
+                .resend({ paymentId: view.id })
+                .then((result) => toast.show(result.ok
+                ? t('toast.resent', { phone: maskE164(attempt.phone) })
+                : t('toast.resend_wait')))
+                .catch(() => toast.show(t('toast.failed')));
+        },
+        cancel: () => {
+            void mutations
+                .cancel({ paymentId: view.id })
+                .catch(() => toast.show(t('toast.failed')));
+        },
+        returnNow: goBack,
+        stayHere: countdown.stop,
+        openHelp: () => setHelpOpen(true),
+        closeHelp: () => setHelpOpen(false),
+        copyReference: () => {
+            platform.copyText(reference);
+            clearTimeout(copiedTimer.current);
+            setCopied(true);
+            copiedTimer.current = setTimeout(() => setCopied(false), COPIED_MS);
+            toast.show(t('toast.copied'));
+        },
+        downloadReceipt: () => {
+            platform.saveReceipt(`receipt-${reference}.txt`, receiptText(view));
+            toast.show(t('toast.downloaded'));
+        },
+        simulate: (outcome) => {
+            void mutations.simulate({ paymentId: view.id, outcome });
+        },
+    };
+    return {
+        view: view ?? null,
+        ui,
+        derived,
+        phone,
+        waitLeft,
+        returnLeft: countdown.left,
+        helpOpen,
+        toastMessage: toast.message,
+        copied,
+        preview: !mutations,
+        cardHeight,
+        actions,
+    };
+}

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

@@ -0,0 +1,15 @@
+/** The time now, moving once a second while `running`: the waiting screen's clock. */
+export declare function useNow(running: boolean): number;
+/**
+ * The success screen's countdown back to the app: from 5 while `running`,
+ * calling `onDone` at 0. `stop` leaves the payer on the page.
+ */
+export declare function useReturnCountdown(running: boolean, onDone: () => void): {
+    left: number | null;
+    stop: () => void;
+};
+/** One short message at a time at the top of the page. */
+export declare function useToast(): {
+    message: string | null;
+    show: (next: string) => void;
+};

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

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RETURN_SECONDS, TICK_MS, TOAST_MS, } from "../models/checkout.constants.js";
+/** The time now, moving once a second while `running`: the waiting screen's clock. */
+export function useNow(running) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!running)
+            return undefined;
+        setNow(Date.now());
+        const tick = setInterval(() => setNow(Date.now()), TICK_MS);
+        return () => clearInterval(tick);
+    }, [running]);
+    return now;
+}
+/**
+ * The success screen's countdown back to the app: from 5 while `running`,
+ * calling `onDone` at 0. `stop` leaves the payer on the page.
+ */
+export function useReturnCountdown(running, onDone) {
+    const [left, setLeft] = useState(RETURN_SECONDS);
+    useEffect(() => {
+        if (!running || left === null)
+            return undefined;
+        if (left === 0) {
+            onDone();
+            return undefined;
+        }
+        const tick = setTimeout(() => setLeft(left - 1), TICK_MS);
+        return () => clearTimeout(tick);
+    }, [running, left, onDone]);
+    return { left, stop: () => setLeft(null) };
+}
+/** One short message at a time at the top of the page. */
+export function useToast() {
+    const [message, setMessage] = useState(null);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const show = useCallback((next) => {
+        clearTimeout(timer.current);
+        setMessage(next);
+        timer.current = setTimeout(() => setMessage(null), TOAST_MS);
+    }, []);
+    return { message, show };
+}

package/dist/checkout-core/hooks/use-phone-number.d.ts

@@ -0,0 +1,7 @@
+import type { PhoneNumber, PhoneNumberOptions } from '../models/checkout.interface.js';
+/**
+ * The Mobile Money number, checked by the country's own rules
+ * (libphonenumber-js) and grouped as the payer types. A space deleted takes
+ * the digit before it. The field itself is the platform's.
+ */
+export declare function usePhoneNumber({ country, countries, onCountryChange, }: PhoneNumberOptions): PhoneNumber;