@wirexapp/card-wallet-topup-web 0.1.0-beta.5 → 1.0.0

package/dist/walletElement.d.ts

@@ -0,0 +1,75 @@
+import type { PciAppearance, PciFrameStrings, PciWalletAvailability, PciWalletBrandingConfig, PciWalletButtonAppearance, PciWalletCheckoutState, PciWalletPaymentTokenDto, PciWalletProviderConfig, PciWalletQuote } from '@wirexapp/card-sdk-core';
+export type PciWalletPaymentToken = PciWalletPaymentTokenDto;
+export interface PciWalletTopUpElementConfig {
+    /** From your estimate call (a wallet `payment_method`, no card id). */
+    quote: PciWalletQuote;
+    /** The provider block of the app config's `topup` section, selected by the
+     *  ESTIMATE's `provider` field — passed to the frame verbatim. */
+    walletConfig: PciWalletProviderConfig;
+    appearance?: PciAppearance;
+    buttons?: PciWalletButtonAppearance;
+    /** `compact` when the host renders its own review UI — the frame shows only
+     *  the total headline, wallet button and countdown. Default `full`. */
+    layout?: 'full' | 'compact';
+    /** `popup` when the embedding domain is NOT Apple-verified: the Apple
+     *  button opens a same-origin popup on the frames domain that runs the
+     *  session and relays the token back — integration unchanged, one extra
+     *  click. Default `inline` (requires a verified embedding domain). */
+    applePayHandoff?: 'inline' | 'popup';
+    /** Logo slot + partner processing disclosure; see PciWalletBrandingConfig. */
+    branding?: PciWalletBrandingConfig;
+    strings?: PciFrameStrings;
+    /** Review screen rendered, buttons live. */
+    onReady?: () => void;
+    onStateChange?: (state: PciWalletCheckoutState) => void;
+    /** The user dismissed the wallet sheet — nothing was tokenized. */
+    onCancel?: () => void;
+    /** The sheet opened but produced no token (e.g. merchant validation
+     *  failure). `reason` is a stable slug for messaging/analytics. */
+    onAttemptFailed?: (reason: string) => void;
+    /** The quote expired in view. Re-estimate through your backend and call
+     *  `update()` with the fresh quote — no remount needed. */
+    onEstimationExpired?: () => void;
+    /**
+     * The payment sheet authorized. Relay `walletPaymentToken` VERBATIM as the
+     * execute call's `wallet_payment_token` (never parse, reshape or log it).
+     * The sheet has already closed successfully — its success means
+     * "tokenized"; the execute response and your status feed own the top-up
+     * outcome. `three_ds_state` is never present on a wallet top-up.
+     */
+    onToken: (token: PciWalletPaymentToken) => void;
+    /** DEV ONLY: arm the frame's diagnostics channel — in-frame JS errors and
+     *  console output arrive in `onDebug`. Never enable in production. */
+    debug?: boolean;
+    onDebug?: (level: 'log' | 'warn' | 'error', message: string) => void;
+}
+/**
+ * The wallet checkout element — review screen + wallet buttons in one
+ * Wirex-served iframe. `mount()` resolves when the frame has rendered the
+ * quote; payment attempts are user-gesture-driven inside the frame and
+ * surface through the config callbacks.
+ */
+export declare class PciWalletTopUpElement {
+    private readonly config;
+    private readonly channel;
+    /** One token per payment attempt; re-armed when a new sheet opens. */
+    private attemptSettled;
+    constructor(frameUrl: string, config: PciWalletTopUpElementConfig);
+    mount(container: HTMLElement): Promise<void>;
+    /** Re-arm a mounted element with a fresh quote (typically after
+     *  `onEstimationExpired`) — re-renders in place. Pass `walletConfig` when
+     *  the fresh estimate's `provider` selects a different config block. */
+    update(quote: PciWalletQuote, walletConfig?: PciWalletProviderConfig): Promise<void>;
+    destroy(): void;
+}
+/**
+ * Phase-A availability probe: mounts a hidden probe frame that runs
+ * `ApplePaySession.canMakePayments()` / Google Pay `isReadyToPay()`
+ * (cryptogram-only) and reports booleans. No transaction context, no backend
+ * calls. Pass the provider's wallet config when you have it (app config's
+ * `topup` block, `default_provider` entry) so the Google check mirrors the
+ * real tokenization parameters. Callers cache the result per page session —
+ * see `checkWalletAvailability` in `@wirexapp/card-wallet-topup-web`.
+ */
+export declare const probeWalletAvailability: (frameUrl: string, config?: PciWalletProviderConfig) => Promise<PciWalletAvailability>;
+//# sourceMappingURL=walletElement.d.ts.map

package/dist/walletElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletElement.d.ts","sourceRoot":"","sources":["../src/walletElement.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,WAAW,2BAA2B;IAC1C,uEAAuE;IACvE,KAAK,EAAE,cAAc,CAAC;IACtB;sEACkE;IAClE,YAAY,EAAE,uBAAuB,CAAC;IACtC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC;2EACuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B;;;0EAGsE;IACtE,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACrC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACxD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;uEACmE;IACnE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;+DAC2D;IAC3D,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;;;;OAMG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;0EACsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtE;AAED;;;;;GAKG;AACH,qBAAa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;IAC1C,sEAAsE;IACtE,OAAO,CAAC,cAAc,CAAS;gBAEnB,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,2BAA2B;IAgC3D,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAoBlD;;4EAEwE;IAClE,MAAM,CAAC,KAAK,EAAE,cAAc,EAAE,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1F,OAAO,IAAI,IAAI;CAGhB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,SAAS,uBAAuB,KAC/B,OAAO,CAAC,qBAAqB,CAqB/B,CAAC"}

package/dist/walletElement.js

@@ -0,0 +1,121 @@
+/**
+ * Wallet top-up (Apple Pay / Google Pay) host-side machinery: the checkout
+ * element that mounts the Wirex-hosted wallet frame, and the availability
+ * probe. Design: docs/WALLET-TOPUP-DESIGN.md, on the confirmed backend
+ * contract ("Wallet Top-Ups Integration").
+ *
+ * Unlike collect/reveal this is not CHD isolation — wallet tokens are
+ * encrypted, gateway-bound blobs. The frame exists for Apple Pay's origin
+ * binding: the wallet JS must run on a Wirex-registered domain, so partners
+ * skip Apple onboarding entirely. The frame TOKENIZES AND RETURNS: the sheet's
+ * encrypted payload arrives in `onToken`, and the HOST calls the execute
+ * endpoint with it (`wallet_payment_token`). There is no 3DS on this path.
+ */
+import { PciFrameChannel } from '@wirexapp/card-sdk-core';
+/**
+ * The wallet checkout element — review screen + wallet buttons in one
+ * Wirex-served iframe. `mount()` resolves when the frame has rendered the
+ * quote; payment attempts are user-gesture-driven inside the frame and
+ * surface through the config callbacks.
+ */
+export class PciWalletTopUpElement {
+    constructor(frameUrl, config) {
+        /** One token per payment attempt; re-armed when a new sheet opens. */
+        this.attemptSettled = false;
+        this.config = config;
+        this.channel = new PciFrameChannel(frameUrl, {}, { allowPayment: true });
+        this.channel.onMessage(message => {
+            switch (message.type) {
+                case 'wallet-state':
+                    if (message.state === 'sheet-open')
+                        this.attemptSettled = false;
+                    this.config.onStateChange?.(message.state);
+                    break;
+                case 'wallet-debug':
+                    this.config.onDebug?.(message.level, message.message);
+                    break;
+                case 'wallet-cancelled':
+                    this.config.onCancel?.();
+                    break;
+                case 'wallet-attempt-failed':
+                    this.config.onAttemptFailed?.(message.reason);
+                    break;
+                case 'wallet-estimation-expired':
+                    this.config.onEstimationExpired?.();
+                    break;
+                case 'wallet-token':
+                    if (this.attemptSettled)
+                        break;
+                    this.attemptSettled = true;
+                    this.config.onToken(message.token);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    async mount(container) {
+        await this.channel.mount(container);
+        await this.channel.request({
+            type: 'init',
+            config: {
+                mode: 'wallet-checkout',
+                layout: this.config.layout,
+                applePayHandoff: this.config.applePayHandoff,
+                quote: this.config.quote,
+                config: this.config.walletConfig,
+                appearance: this.config.appearance,
+                buttons: this.config.buttons,
+                branding: this.config.branding,
+                strings: this.config.strings,
+                debug: this.config.debug,
+            },
+        });
+        this.config.onReady?.();
+    }
+    /** Re-arm a mounted element with a fresh quote (typically after
+     *  `onEstimationExpired`) — re-renders in place. Pass `walletConfig` when
+     *  the fresh estimate's `provider` selects a different config block. */
+    async update(quote, walletConfig) {
+        await this.channel.request({
+            type: 'wallet-update',
+            quote,
+            config: walletConfig ?? this.config.walletConfig,
+        });
+    }
+    destroy() {
+        this.channel.destroy();
+    }
+}
+/**
+ * Phase-A availability probe: mounts a hidden probe frame that runs
+ * `ApplePaySession.canMakePayments()` / Google Pay `isReadyToPay()`
+ * (cryptogram-only) and reports booleans. No transaction context, no backend
+ * calls. Pass the provider's wallet config when you have it (app config's
+ * `topup` block, `default_provider` entry) so the Google check mirrors the
+ * real tokenization parameters. Callers cache the result per page session —
+ * see `checkWalletAvailability` in `@wirexapp/card-wallet-topup-web`.
+ */
+export const probeWalletAvailability = async (frameUrl, config) => {
+    // Zero-sized but not display:none/visibility:hidden — some wallet
+    // availability checks report unavailable inside hidden documents.
+    const container = document.createElement('div');
+    container.style.position = 'fixed';
+    container.style.width = '0';
+    container.style.height = '0';
+    container.style.overflow = 'hidden';
+    document.body.appendChild(container);
+    const channel = new PciFrameChannel(frameUrl, {}, { allowPayment: true });
+    try {
+        await channel.mount(container);
+        return await channel.request({
+            type: 'init',
+            config: { mode: 'wallet-probe', config },
+        });
+    }
+    finally {
+        channel.destroy();
+        container.remove();
+    }
+};
+//# sourceMappingURL=walletElement.js.map

package/dist/walletElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletElement.js","sourceRoot":"","sources":["../src/walletElement.ts"],"names":[],"mappings":"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"}

package/dist/walletPopup.d.ts

@@ -0,0 +1,32 @@
+import type { PciWalletTopUpElementConfig } from './walletElement.js';
+export interface PciWalletTopUpPopupConfig extends Omit<PciWalletTopUpElementConfig, 'quote' | 'walletConfig'> {
+    /** The quote may be OMITTED at open time: `window.open` must run
+     *  synchronously inside the click handler, while the estimate is usually
+     *  still in flight — open first, then call `arm(quote, walletConfig)` when
+     *  the estimate lands. Providing both here arms immediately. */
+    quote?: PciWalletTopUpElementConfig['quote'];
+    walletConfig?: PciWalletTopUpElementConfig['walletConfig'];
+    /** The popup was closed (by the user or programmatically) without a token.
+     *  Not fired after `onToken` — a token hand-off closes the popup too. */
+    onClose?: () => void;
+    /** The popup failed to boot: blocked by the browser (call `open` from a
+     *  click handler), or the frame never became ready. */
+    onMountError?: (error: Error) => void;
+}
+export interface PciWalletTopUpPopup {
+    /** Deliver the quote when it wasn't available at open time (the estimate
+     *  resolved after the click). First call initializes the checkout; later
+     *  calls behave like `update`. No-op after the popup closed. */
+    arm(quote: PciWalletTopUpElementConfig['quote'], walletConfig: PciWalletTopUpElementConfig['walletConfig']): void;
+    /** Re-arm with a fresh quote (after `onEstimationExpired`) — re-renders in
+     *  place, the popup stays open. */
+    update(quote: PciWalletTopUpElementConfig['quote'], walletConfig?: PciWalletTopUpElementConfig['walletConfig']): Promise<void>;
+    /** Close the popup. Fires `onClose` if nothing was tokenized yet. */
+    close(): void;
+}
+/**
+ * Opens the wallet checkout in a popup. MUST be called synchronously from a
+ * user gesture (click handler) or browsers will block the window.
+ */
+export declare const openWalletTopUpPopup: (frameUrl: string, config: PciWalletTopUpPopupConfig) => PciWalletTopUpPopup;
+//# sourceMappingURL=walletPopup.d.ts.map

package/dist/walletPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletPopup.d.ts","sourceRoot":"","sources":["../src/walletPopup.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;AAgBnE,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,2BAA2B,EAAE,OAAO,GAAG,cAAc,CAAC;IAC5G;;;oEAGgE;IAChE,KAAK,CAAC,EAAE,2BAA2B,CAAC,OAAO,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,2BAA2B,CAAC,cAAc,CAAC,CAAC;IAC3D;6EACyE;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;2DACuD;IACvD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC;;oEAEgE;IAChE,GAAG,CAAC,KAAK,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,2BAA2B,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAClH;uCACmC;IACnC,MAAM,CAAC,KAAK,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,EAAE,2BAA2B,CAAC,cAAc,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/H,qEAAqE;IACrE,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,UAAU,MAAM,EAChB,QAAQ,yBAAyB,KAChC,mBA+KF,CAAC"}

package/dist/walletPopup.js

@@ -0,0 +1,211 @@
+/**
+ * Wallet checkout POPUP (Mode B): the same wallet-checkout document, opened
+ * TOP-LEVEL on the frames domain via `window.open`, driven over
+ * `window.opener` postMessage with the same channel + origin checks as the
+ * iframe transport (`openerTransport` in the frame's bridge).
+ *
+ * Why this mode exists: Apple binds merchant sessions to the TOP-LEVEL
+ * page's domain. Embedded as an iframe, that is the PARTNER's domain — which
+ * must be registered + verified under Wirex's Apple merchant ID and host the
+ * domain-association file. In a popup the top-level domain is the frames
+ * origin itself, which is already verified — partners need NO Apple steps at
+ * all. The trade-off is the user briefly leaving the host page.
+ *
+ * The tokenize-and-return contract is unchanged: the sheet's encrypted
+ * payload arrives in `onToken` and the HOST calls execute; the popup closes
+ * itself once the token is handed off.
+ */
+import { PCI_PROTOCOL_VERSION } from '@wirexapp/card-sdk-core';
+const READY_TIMEOUT_MS = 15000;
+const REQUEST_TIMEOUT_MS = 30000;
+const CLOSE_POLL_MS = 400;
+/** ~mobile-sheet proportions, centered by the browser. */
+const POPUP_FEATURES = 'popup=yes,width=430,height=780,resizable=yes,scrollbars=yes';
+/** The checkout renders on a transparent surface for iframes; a top-level
+ *  popup needs an opaque ground. Overridable via appearance.surfaceColor. */
+const POPUP_DEFAULT_SURFACE = '#141414';
+const randomId = () => typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+/**
+ * Opens the wallet checkout in a popup. MUST be called synchronously from a
+ * user gesture (click handler) or browsers will block the window.
+ */
+export const openWalletTopUpPopup = (frameUrl, config) => {
+    const frameOrigin = new URL(frameUrl, window.location.href).origin;
+    const channelId = randomId();
+    const url = `${frameUrl}#channel=${channelId}&parent=${encodeURIComponent(window.location.origin)}`;
+    const popup = window.open(url, '_blank', POPUP_FEATURES);
+    const pending = new Map();
+    let settled = false; // a token was handed off
+    let closed = false;
+    let closePoll = null;
+    let readyTimer = null;
+    /** One payment attempt per sheet opening (mirrors the element). */
+    let attemptSettled = false;
+    // Deferred-arm state: the frame may report ready before the host has a
+    // quote (estimate in flight), or the quote may arrive first — init is sent
+    // once BOTH are true.
+    let frameReady = false;
+    let initialized = false;
+    let armedQuote = config.quote ?? null;
+    let armedWalletConfig = config.walletConfig ?? null;
+    const cleanup = () => {
+        if (closed)
+            return;
+        closed = true;
+        if (closePoll)
+            clearInterval(closePoll);
+        if (readyTimer)
+            clearTimeout(readyTimer);
+        window.removeEventListener('message', onWindowMessage);
+        for (const [, entry] of pending) {
+            clearTimeout(entry.timer);
+            entry.reject(new Error('Wallet popup closed'));
+        }
+        pending.clear();
+    };
+    const closePopup = () => {
+        const wasSettled = settled;
+        cleanup();
+        if (popup && !popup.closed)
+            popup.close();
+        if (!wasSettled)
+            config.onClose?.();
+    };
+    const request = (message) => {
+        if (!popup || popup.closed || closed)
+            return Promise.reject(new Error('Wallet popup is not open'));
+        const requestId = randomId();
+        const promise = new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                pending.delete(requestId);
+                reject(new Error('Wallet popup request timed out'));
+            }, REQUEST_TIMEOUT_MS);
+            pending.set(requestId, { resolve: resolve, reject, timer });
+        });
+        popup.postMessage({ ...message, requestId, v: PCI_PROTOCOL_VERSION, channel: channelId }, frameOrigin);
+        return promise;
+    };
+    const sendInit = () => {
+        if (initialized || !frameReady || !armedQuote || !armedWalletConfig)
+            return;
+        initialized = true;
+        request({
+            type: 'init',
+            config: {
+                mode: 'wallet-checkout',
+                layout: config.layout,
+                quote: armedQuote,
+                config: armedWalletConfig,
+                appearance: {
+                    ...config.appearance,
+                    variables: { surfaceColor: POPUP_DEFAULT_SURFACE, ...config.appearance?.variables },
+                },
+                buttons: config.buttons,
+                branding: config.branding,
+                strings: config.strings,
+                debug: config.debug,
+            },
+        })
+            .then(() => config.onReady?.())
+            .catch((error) => config.onMountError?.(error));
+    };
+    const onWindowMessage = (event) => {
+        // Provenance: our popup window + the frames origin + our channel id.
+        if (!popup || event.source !== popup)
+            return;
+        if (event.origin !== frameOrigin)
+            return;
+        const message = event.data;
+        if (!message || message.v !== PCI_PROTOCOL_VERSION || message.channel !== channelId)
+            return;
+        switch (message.type) {
+            case 'ready':
+                if (readyTimer)
+                    clearTimeout(readyTimer);
+                readyTimer = null;
+                frameReady = true;
+                sendInit();
+                break;
+            case 'result': {
+                const entry = pending.get(message.requestId);
+                if (!entry)
+                    break;
+                pending.delete(message.requestId);
+                clearTimeout(entry.timer);
+                if (message.ok)
+                    entry.resolve(message.data);
+                else
+                    entry.reject(new Error(message.error?.message ?? 'Wallet popup request failed'));
+                break;
+            }
+            case 'wallet-state':
+                if (message.state === 'sheet-open')
+                    attemptSettled = false;
+                config.onStateChange?.(message.state);
+                break;
+            case 'wallet-debug':
+                config.onDebug?.(message.level, message.message);
+                break;
+            case 'wallet-cancelled':
+                config.onCancel?.();
+                break;
+            case 'wallet-attempt-failed':
+                config.onAttemptFailed?.(message.reason);
+                break;
+            case 'wallet-estimation-expired':
+                config.onEstimationExpired?.();
+                break;
+            case 'wallet-token':
+                if (attemptSettled)
+                    break;
+                attemptSettled = true;
+                settled = true;
+                // Hand the token to the host FIRST, then close — the host executes.
+                config.onToken(message.token);
+                closePopup();
+                break;
+            default:
+                break;
+        }
+    };
+    if (!popup) {
+        // Blocked: window.open returned null (not called from a user gesture, or
+        // a popup blocker). Report async so the caller's flow stays uniform.
+        setTimeout(() => config.onMountError?.(new Error('Wallet popup was blocked — open it from a click handler')), 0);
+        return {
+            arm: () => { },
+            update: () => Promise.reject(new Error('Wallet popup was blocked')),
+            close: () => { },
+        };
+    }
+    window.addEventListener('message', onWindowMessage);
+    readyTimer = setTimeout(() => {
+        config.onMountError?.(new Error('Wallet popup did not become ready in time'));
+        closePopup();
+    }, READY_TIMEOUT_MS);
+    closePoll = setInterval(() => {
+        if (popup.closed)
+            closePopup();
+    }, CLOSE_POLL_MS);
+    return {
+        arm: (quote, walletConfig) => {
+            if (closed)
+                return;
+            if (initialized) {
+                // Already armed once — behave like update (fresh estimate).
+                armedQuote = quote;
+                armedWalletConfig = walletConfig;
+                void request({ type: 'wallet-update', quote, config: walletConfig }).catch(() => undefined);
+                return;
+            }
+            armedQuote = quote;
+            armedWalletConfig = walletConfig;
+            sendInit();
+        },
+        update: (quote, walletConfig) => request({ type: 'wallet-update', quote, config: walletConfig ?? armedWalletConfig ?? undefined }).then(() => undefined),
+        close: closePopup,
+    };
+};
+//# sourceMappingURL=walletPopup.js.map

package/dist/walletPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletPopup.js","sourceRoot":"","sources":["../src/walletPopup.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirexapp/card-wallet-topup-web",
-  "version": "0.1.0-beta.5",
+  "version": "1.0.0",
   "type": "module",
   "description": "Top up via Apple Pay / Google Pay inside a Wirex-served checkout iframe — review screen + wallet buttons under Wirex's merchant identity; the payment sheet's encrypted token is returned to the host, which executes the top-up. No wallet onboarding on the partner side.",
   "license": "UNLICENSED",
@@ -37,6 +37,6 @@
     "prepublishOnly": "yarn clean && yarn build"
   },
   "dependencies": {
-    "@wirexapp/card-sdk-core": "0.1.0-beta.5"
+    "@wirexapp/card-sdk-core": "1.0.0"
   }
 }