npm - @artaio/arta-browser - Versions diffs - 2.21.0 → 2.23.0 - Mend

@artaio/arta-browser 2.21.0 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/pay.js ADDED Viewed

@@ -0,0 +1,336 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var messaging = require('./messaging.js');
+var payConfig = require('./payConfig.js');
+// Arta Pay checkout modal.
+//
+// Lifecycle: the constructor mounts the overlay + iframe immediately but
+// hidden, so the widget can handshake and validate the purchase request
+// context (`arta-pay:ready` -> `onReady`) before the seller enables its
+// button. `open()` reveals the overlay and tells the widget it is visible;
+// `close()` hides it without tearing anything down, so the widget keeps its
+// session and resumes where it was on the next `open()`. `destroy()` removes
+// the frame for good.
+//
+// Every message from the frame is accepted only when both the origin and the
+// source window match the iframe the SDK created; every message to the frame
+// is posted with the pinned pay origin.
+const HANDSHAKE_TIMEOUT_MS = 10_000;
+const OVERLAY_ID = 'arta-pay-overlay';
+const FRAME_MIN_HEIGHT_PX = 240;
+const RESIZE_DEAD_BAND_PX = 2;
+// Hidden means invisible and inert, not `display:none`: the iframe has to
+// keep loading and laying out so the widget can validate the context and
+// measure itself before the seller opens the modal.
+const overlayBaseCss = 'box-sizing:border-box;position:fixed;inset:0;display:flex;background:rgba(17,15,16,0.55);' +
+    'z-index:2147483000;visibility:hidden;pointer-events:none;';
+const overlayPositionCss = {
+    center: 'align-items:center;justify-content:center;',
+    full_screen: 'align-items:stretch;justify-content:stretch;',
+    left: 'align-items:stretch;justify-content:flex-start;',
+    right: 'align-items:stretch;justify-content:flex-end;',
+};
+// The widget reports its content height via arta-pay:resize; the centered
+// card follows it (capped to the viewport) while the side panels and full
+// screen take the full viewport height.
+// The centered height opens on the sign-in screen's own height, which the
+// widget holds from its first paint (.arta-pay-shell min-height); starting
+// anywhere else makes the frame resize once the widget reports itself.
+// content-box is pinned because seller pages commonly reset `* { box-sizing:
+// border-box }`, which would let the frame's border eat into the viewport the
+// widget measures itself against.
+const frameBaseCss = 'box-sizing:content-box;border:0;background:#fff;transition:height 0.15s ease;';
+const framePositionCss = {
+    center: 'width:min(576px, calc(100vw - 32px));height:min(539px, calc(100vh - 32px));' +
+        'border:1px solid #d2d2d2;border-radius:8px;' +
+        'box-shadow:0 24px 64px rgba(17,15,16,0.35);',
+    full_screen: 'width:100vw;height:100vh;',
+    left: 'width:min(460px, 100vw);height:100vh;border-right:1px solid #d2d2d2;' +
+        'box-shadow:24px 0 64px rgba(17,15,16,0.35);',
+    right: 'width:min(460px, 100vw);height:100vh;border-left:1px solid #d2d2d2;' +
+        'box-shadow:-24px 0 64px rgba(17,15,16,0.35);',
+};
+class Pay {
+    input;
+    callbacks;
+    config;
+    isReady = false;
+    isOpen = false;
+    overlay;
+    iframe;
+    handshakeTimer;
+    destroyed = false;
+    completed = false;
+    openWhenMounted = false;
+    lastFrameHeight;
+    payOrigin;
+    messageListener = (event) => this.handleMessage(event);
+    keydownListener = (event) => {
+        if (event.key === 'Escape' && this.isOpen) {
+            this.requestClose();
+        }
+    };
+    domReadyListener = () => this.mount();
+    constructor(input, callbacks, config) {
+        this.input = input;
+        this.callbacks = callbacks;
+        this.config = config;
+        this.payOrigin = config.payOrigin ?? payConfig.DEFAULT_PAY_ORIGIN;
+        if (document.body) {
+            this.mount();
+        }
+        else {
+            // Constructed from a <head> script: wait for the body to exist.
+            document.addEventListener('DOMContentLoaded', this.domReadyListener);
+        }
+    }
+    open() {
+        if (this.destroyed) {
+            throw new Error('This Arta Pay instance has been destroyed');
+        }
+        if (this.isOpen) {
+            return;
+        }
+        if (!this.overlay) {
+            this.openWhenMounted = true;
+            return;
+        }
+        this.reveal();
+    }
+    // Hides the overlay without tearing down the iframe, so the widget's
+    // session state survives close/reopen.
+    close() {
+        this.openWhenMounted = false;
+        if (this.overlay) {
+            this.overlay.style.visibility = 'hidden';
+            this.overlay.style.pointerEvents = 'none';
+        }
+        document.removeEventListener('keydown', this.keydownListener);
+        this.isOpen = false;
+    }
+    destroy() {
+        this.close();
+        document.removeEventListener('DOMContentLoaded', this.domReadyListener);
+        window.removeEventListener('message', this.messageListener);
+        this.clearHandshakeTimer();
+        this.overlay?.remove();
+        this.overlay = undefined;
+        this.iframe = undefined;
+        this.isReady = false;
+        this.destroyed = true;
+    }
+    mount() {
+        document.removeEventListener('DOMContentLoaded', this.domReadyListener);
+        if (this.destroyed || this.overlay) {
+            return;
+        }
+        window.addEventListener('message', this.messageListener);
+        const position = this.config.position;
+        this.overlay = document.createElement('div');
+        this.overlay.id = OVERLAY_ID;
+        this.overlay.style.cssText = overlayBaseCss + overlayPositionCss[position];
+        this.overlay.addEventListener('click', (event) => {
+            if (event.target === this.overlay) {
+                this.requestClose();
+            }
+        });
+        this.iframe = document.createElement('iframe');
+        this.iframe.style.cssText = frameBaseCss + framePositionCss[position];
+        this.iframe.setAttribute('title', 'Arta Pay');
+        // The public key is an identifier, not a credential — it rides the
+        // document request so the server can validate it (and, later, derive
+        // per-key restrictions such as allowed embedding domains) before
+        // serving the widget. The client token never goes in a URL.
+        this.iframe.src =
+            this.payOrigin +
+                '/artapay-widget/embed?prid=' +
+                encodeURIComponent(this.input.purchaseRequestId) +
+                '&pk=' +
+                encodeURIComponent(this.config.apiKey);
+        this.overlay.appendChild(this.iframe);
+        document.body.appendChild(this.overlay);
+        this.startHandshakeTimer();
+        if (this.openWhenMounted) {
+            this.openWhenMounted = false;
+            this.reveal();
+        }
+    }
+    reveal() {
+        if (!this.overlay) {
+            return;
+        }
+        this.overlay.style.visibility = 'visible';
+        this.overlay.style.pointerEvents = 'auto';
+        document.addEventListener('keydown', this.keydownListener);
+        this.isOpen = true;
+        this.postToFrame({ type: 'arta-pay:open' });
+    }
+    // The widget owns the close decision; the SDK only requests it. Before the
+    // handshake completes there is nobody to ask, so close directly.
+    requestClose() {
+        if (this.isReady) {
+            this.postToFrame({ type: 'arta-pay:close-request' });
+        }
+        else {
+            this.close();
+            this.callbacks.onClose?.({
+                purchaseRequestId: this.input.purchaseRequestId,
+                reason: 'customer',
+            });
+        }
+    }
+    handleMessage(event) {
+        if (event.origin !== this.payOrigin ||
+            !this.iframe ||
+            event.source !== this.iframe.contentWindow ||
+            !messaging.isPayInboundMessage(event.data)) {
+            return;
+        }
+        const data = event.data;
+        switch (data.type) {
+            case 'arta-pay:handshake':
+                this.handleHandshake();
+                break;
+            case 'arta-pay:ready':
+                this.handleReady();
+                break;
+            case 'arta-pay:resize':
+                this.handleResize(data);
+                break;
+            case 'arta-pay:complete':
+                this.handleComplete(data);
+                break;
+            case 'arta-pay:close':
+                this.close();
+                this.callbacks.onClose?.({
+                    purchaseRequestId: this.input.purchaseRequestId,
+                    reason: messaging.parseCloseReason(data),
+                });
+                break;
+            case 'arta-pay:error':
+                this.handleError(data);
+                break;
+        }
+    }
+    handleHandshake() {
+        // A handshake after ready means the frame reloaded: it has to validate
+        // the context again before the modal can be considered ready.
+        this.isReady = false;
+        this.startHandshakeTimer();
+        this.postToFrame({
+            type: 'arta-pay:init',
+            purchaseRequestId: this.input.purchaseRequestId,
+            clientToken: this.input.clientToken,
+            position: this.config.position,
+        });
+    }
+    handleReady() {
+        this.clearHandshakeTimer();
+        if (this.isReady) {
+            return;
+        }
+        this.isReady = true;
+        this.callbacks.onReady?.();
+    }
+    handleResize(data) {
+        // The side panels and full screen keep the full viewport height.
+        if (this.config.position !== 'center' || !this.iframe) {
+            return;
+        }
+        const height = messaging.parseResizeHeight(data);
+        if (height === undefined) {
+            return;
+        }
+        const px = Math.max(FRAME_MIN_HEIGHT_PX, Math.round(height));
+        // Sub-pixel layouts (zoom, display scaling) make a re-measured frame come
+        // back a pixel short; a dead band keeps that from ratcheting the height.
+        if (this.lastFrameHeight !== undefined &&
+            Math.abs(px - this.lastFrameHeight) < RESIZE_DEAD_BAND_PX) {
+            return;
+        }
+        this.lastFrameHeight = px;
+        this.iframe.style.height = `min(${px}px, calc(100vh - 32px))`;
+    }
+    // `onComplete` fires at most once per instance. The widget may re-render
+    // its outcome screen (and re-send `complete`) when the buyer reopens a
+    // finished checkout; the seller only hears about it the first time.
+    handleComplete(data) {
+        if (this.completed) {
+            return;
+        }
+        const completion = messaging.parseCompletion(data);
+        if (!completion ||
+            (completion.purchaseRequestId !== undefined &&
+                completion.purchaseRequestId !== this.input.purchaseRequestId)) {
+            // Not a v2 outcome (or an outcome for another purchase request). The
+            // buyer may well have finished, so the modal stays open; the seller
+            // must confirm server-side either way.
+            this.callbacks.onError?.({
+                code: 'protocol_error',
+                message: 'The Arta Pay widget reported an outcome this SDK does not understand; ' +
+                    'confirm the purchase request status server-side',
+                recoverable: true,
+            });
+            return;
+        }
+        this.completed = true;
+        const result = {
+            purchaseRequestId: this.input.purchaseRequestId,
+            status: completion.status,
+        };
+        if (completion.purchaseId !== undefined) {
+            result.purchaseId = completion.purchaseId;
+        }
+        this.callbacks.onComplete?.(result);
+    }
+    handleError(data) {
+        const error = messaging.parseError(data);
+        this.callbacks.onError?.(error);
+        if (!error.recoverable) {
+            this.abort();
+        }
+    }
+    handleHandshakeTimeout() {
+        this.handshakeTimer = undefined;
+        this.callbacks.onError?.({
+            code: 'frame_load_failed',
+            message: 'The Arta Pay widget did not respond in time',
+            recoverable: true,
+        });
+        this.abort();
+    }
+    // The widget cannot (currently) complete this purchase request. The modal
+    // goes away if it was showing, but the iframe stays mounted so a later
+    // `open()` shows the widget's own error screen instead of a blank frame.
+    abort() {
+        this.clearHandshakeTimer();
+        this.isReady = false;
+        if (this.isOpen) {
+            this.close();
+            this.callbacks.onClose?.({
+                purchaseRequestId: this.input.purchaseRequestId,
+                reason: 'error',
+            });
+        }
+    }
+    postToFrame(message) {
+        if (this.iframe?.contentWindow) {
+            messaging.postPayMessage(this.iframe.contentWindow, this.payOrigin, message);
+        }
+    }
+    startHandshakeTimer() {
+        this.clearHandshakeTimer();
+        this.handshakeTimer = window.setTimeout(() => this.handleHandshakeTimeout(), HANDSHAKE_TIMEOUT_MS);
+    }
+    clearHandshakeTimer() {
+        if (this.handshakeTimer !== undefined) {
+            window.clearTimeout(this.handshakeTimer);
+            this.handshakeTimer = undefined;
+        }
+    }
+}
+exports.default = Pay;

package/dist/payConfig.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { type ArtaJsFullConfig } from './arta';
+export interface PayInput {
+    purchaseRequestId: string;
+    clientToken: string;
+}
+export declare const PAY_COMPLETION_STATUSES: readonly ["confirmed", "processing", "declined"];
+export type PayCompletionStatus = typeof PAY_COMPLETION_STATUSES[number];
+export interface PayCompletion {
+    purchaseRequestId: string;
+    purchaseId?: string;
+    status: PayCompletionStatus;
+}
+export declare const PAY_CLOSE_REASONS: readonly ["customer", "complete", "error"];
+export type PayCloseReason = typeof PAY_CLOSE_REASONS[number];
+export interface PayCloseEvent {
+    purchaseRequestId: string;
+    reason: PayCloseReason;
+}
+export interface PayError {
+    code: string;
+    message: string;
+    recoverable: boolean;
+    requestId?: string;
+}
+export interface PayCallbacks {
+    onReady?: () => void;
+    onComplete?: (result: PayCompletion) => void;
+    onClose?: (event: PayCloseEvent) => void;
+    onError?: (error: PayError) => void;
+}
+export type PayPosition = 'center' | 'full_screen' | 'left' | 'right';
+export interface PayConfig {
+    position: PayPosition;
+}
+export type PartialPayConfig = Partial<PayConfig>;
+export interface PayFullConfig extends PayConfig, ArtaJsFullConfig {
+}
+export declare const getFullPayConfig: (artaConfig: ArtaJsFullConfig, payConfig?: PartialPayConfig) => PayFullConfig;
+export declare const DEFAULT_PAY_ORIGIN = "https://collectors.arta.io";

package/dist/payConfig.js ADDED Viewed

@@ -0,0 +1,24 @@
+'use strict';
+// Outcome vocabulary shared with the widget (protocol v2) and the seller
+// integration reference. `confirmed` = deposit charged, purchase active;
+// `processing` = deposit charge still settling (ACH); `declined` is reserved
+// and not emitted by the widget yet.
+const PAY_COMPLETION_STATUSES = [
+    'confirmed',
+    'processing',
+    'declined',
+];
+const PAY_CLOSE_REASONS = ['customer', 'complete', 'error'];
+const defaultPayConfig = {
+    position: 'center',
+};
+const getFullPayConfig = (artaConfig, payConfig = {}) => {
+    return Object.assign({}, defaultPayConfig, artaConfig, payConfig);
+};
+const DEFAULT_PAY_ORIGIN = 'https://collectors.arta.io';
+exports.DEFAULT_PAY_ORIGIN = DEFAULT_PAY_ORIGIN;
+exports.PAY_CLOSE_REASONS = PAY_CLOSE_REASONS;
+exports.PAY_COMPLETION_STATUSES = PAY_COMPLETION_STATUSES;
+exports.getFullPayConfig = getFullPayConfig;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@artaio/arta-browser",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "description": "",
   "source": "lib/index.ts",
   "main": "./dist/index.js",
@@ -12,6 +12,7 @@
   },
   "scripts": {
     "test": "npm run lint",
+    "typecheck": "tsc --noEmit",
     "build": "rollup -c && copyfiles -u 1 \"./lib/**/*.css\" \"./dist/\"",
     "lint": "eslint .",
     "lint:fix": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|tsx|jsx|json)\"",
@@ -26,6 +27,7 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.40.1",