@foxy.io/sdk 1.11.3 → 1.12.0

package/dist/cjs/customer/PaymentCardEmbed.js

@@ -0,0 +1,170 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentCardEmbed = void 0;
+/**
+ * A convenience wrapper for the payment card embed iframe. You don't have to use
+ * this class to embed the payment card iframe, but it provides a more convenient
+ * way to interact with the iframe and listen to its events.
+ *
+ * @example
+ * const embed = new PaymentCardEmbed({
+ *   url: 'https://embed.foxy.io/v1.html?template_set_id=123'
+ * });
+ *
+ * await embed.mount(document.body);
+ * console.log('Token:', await embed.tokenize());
+ */
+class PaymentCardEmbed {
+    constructor(_a) {
+        var { url } = _a, config = __rest(_a, ["url"]);
+        /**
+         * An event handler that is triggered when Enter is pressed in the card form.
+         * This feature is not available for template sets configured with the `stripe_connect`
+         * hosted payment gateway due to the limitations of Stripe.js.
+         */
+        this.onsubmit = null;
+        this.__tokenizationRequests = [];
+        this.__iframeMessageHandler = (evt) => {
+            var _a, _b;
+            const data = JSON.parse(evt.data);
+            switch (data.type) {
+                case 'tokenization_response': {
+                    const request = this.__tokenizationRequests.find(r => r.id === data.id);
+                    data.token ? request === null || request === void 0 ? void 0 : request.resolve(data.token) : request === null || request === void 0 ? void 0 : request.reject();
+                    this.__tokenizationRequests = this.__tokenizationRequests.filter(r => r.id !== data.id);
+                    break;
+                }
+                case 'submit': {
+                    (_a = this.onsubmit) === null || _a === void 0 ? void 0 : _a.call(this);
+                    break;
+                }
+                case 'resize': {
+                    if (this.__iframe)
+                        this.__iframe.style.height = data.height;
+                    break;
+                }
+                case 'ready': {
+                    this.configure(this.__config);
+                    (_b = this.__mountingTask) === null || _b === void 0 ? void 0 : _b.resolve();
+                    break;
+                }
+            }
+        };
+        this.__iframeLoadHandler = (evt) => {
+            if (this.__channel) {
+                const contentWindow = evt.currentTarget.contentWindow;
+                if (!contentWindow)
+                    throw new Error('Content window is not available.');
+                contentWindow.postMessage('connect', '*', [this.__channel.port2]);
+            }
+        };
+        this.__mountingTask = null;
+        this.__channel = null;
+        this.__iframe = null;
+        this.__config = config;
+        this.__url = url;
+    }
+    /**
+     * Updates the configuration of the payment card embed.
+     * You can change style, translations, language and interactivity settings.
+     * To change the URL of the payment card embed, you need to create a new instance.
+     * You are not required to provide the full configuration object, only the properties you want to change.
+     *
+     * @param config - The new configuration.
+     */
+    configure(config) {
+        var _a;
+        this.__config = config;
+        const message = Object.assign({ type: 'config' }, config);
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.postMessage(JSON.stringify(message));
+    }
+    /**
+     * Requests the tokenization of the card data.
+     *
+     * @returns A promise that resolves with the tokenized card data.
+     */
+    tokenize() {
+        return new Promise((resolve, reject) => {
+            if (this.__channel) {
+                const id = this._createId();
+                this.__tokenizationRequests.push({ id, reject, resolve });
+                this.__channel.port1.postMessage(JSON.stringify({ id, type: 'tokenization_request' }));
+            }
+            else {
+                reject();
+            }
+        });
+    }
+    /**
+     * Safely removes the embed iframe from the parent node,
+     * closing the message channel and cleaning up event listeners.
+     */
+    unmount() {
+        var _a, _b, _c, _d, _e, _f;
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.removeEventListener('message', this.__iframeMessageHandler);
+        (_b = this.__channel) === null || _b === void 0 ? void 0 : _b.port1.close();
+        (_c = this.__channel) === null || _c === void 0 ? void 0 : _c.port2.close();
+        this.__channel = null;
+        (_d = this.__iframe) === null || _d === void 0 ? void 0 : _d.removeEventListener('load', this.__iframeLoadHandler);
+        (_e = this.__iframe) === null || _e === void 0 ? void 0 : _e.remove();
+        this.__iframe = null;
+        (_f = this.__mountingTask) === null || _f === void 0 ? void 0 : _f.reject();
+        this.__mountingTask = null;
+    }
+    /**
+     * Mounts the payment card embed in the given root element. If the embed is already mounted,
+     * it will be unmounted first.
+     *
+     * @param root - The root element to mount the embed in.
+     * @returns A promise that resolves when the embed is mounted.
+     */
+    mount(root) {
+        this.unmount();
+        this.__channel = this._createMessageChannel();
+        this.__channel.port1.addEventListener('message', this.__iframeMessageHandler);
+        this.__channel.port1.start();
+        this.__iframe = this._createIframe(root);
+        this.__iframe.addEventListener('load', this.__iframeLoadHandler);
+        this.__iframe.style.transition = 'height 0.15s ease';
+        this.__iframe.style.margin = '-2px';
+        this.__iframe.style.height = '100px';
+        this.__iframe.style.width = 'calc(100% + 4px)';
+        this.__iframe.src = this.__url;
+        root.append(this.__iframe);
+        return new Promise((resolve, reject) => {
+            this.__mountingTask = { reject, resolve };
+        });
+    }
+    /**
+     * Clears the card data from the embed.
+     * No-op if the embed is not mounted.
+     */
+    clear() {
+        var _a;
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.postMessage(JSON.stringify({ type: 'clear' }));
+    }
+    /* v8 ignore next */
+    _createMessageChannel() {
+        return new MessageChannel();
+    }
+    /* v8 ignore next */
+    _createIframe(root) {
+        return root.ownerDocument.createElement('iframe');
+    }
+    /* v8 ignore next */
+    _createId() {
+        return `${Date.now()}${Math.random().toFixed(6).slice(2)}`;
+    }
+}
+exports.PaymentCardEmbed = PaymentCardEmbed;

package/dist/cjs/customer/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNextTransactionDate = exports.getTimeFromFrequency = exports.getNextTransactionDateConstraints = exports.getAllowedFrequencies = exports.API = void 0;
+exports.PaymentCardEmbed = exports.isNextTransactionDate = exports.getTimeFromFrequency = exports.getNextTransactionDateConstraints = exports.getAllowedFrequencies = exports.API = void 0;
 var API_js_1 = require("./API.js");
 Object.defineProperty(exports, "API", { enumerable: true, get: function () { return API_js_1.API; } });
 var getAllowedFrequencies_js_1 = require("./getAllowedFrequencies.js");
@@ -11,3 +11,5 @@ var getTimeFromFrequency_js_1 = require("../backend/getTimeFromFrequency.js");
 Object.defineProperty(exports, "getTimeFromFrequency", { enumerable: true, get: function () { return getTimeFromFrequency_js_1.getTimeFromFrequency; } });
 var isNextTransactionDate_js_1 = require("./isNextTransactionDate.js");
 Object.defineProperty(exports, "isNextTransactionDate", { enumerable: true, get: function () { return isNextTransactionDate_js_1.isNextTransactionDate; } });
+var PaymentCardEmbed_js_1 = require("./PaymentCardEmbed.js");
+Object.defineProperty(exports, "PaymentCardEmbed", { enumerable: true, get: function () { return PaymentCardEmbed_js_1.PaymentCardEmbed; } });

package/dist/esm/customer/PaymentCardEmbed.js

@@ -0,0 +1,166 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * A convenience wrapper for the payment card embed iframe. You don't have to use
+ * this class to embed the payment card iframe, but it provides a more convenient
+ * way to interact with the iframe and listen to its events.
+ *
+ * @example
+ * const embed = new PaymentCardEmbed({
+ *   url: 'https://embed.foxy.io/v1.html?template_set_id=123'
+ * });
+ *
+ * await embed.mount(document.body);
+ * console.log('Token:', await embed.tokenize());
+ */
+export class PaymentCardEmbed {
+    constructor(_a) {
+        var { url } = _a, config = __rest(_a, ["url"]);
+        /**
+         * An event handler that is triggered when Enter is pressed in the card form.
+         * This feature is not available for template sets configured with the `stripe_connect`
+         * hosted payment gateway due to the limitations of Stripe.js.
+         */
+        this.onsubmit = null;
+        this.__tokenizationRequests = [];
+        this.__iframeMessageHandler = (evt) => {
+            var _a, _b;
+            const data = JSON.parse(evt.data);
+            switch (data.type) {
+                case 'tokenization_response': {
+                    const request = this.__tokenizationRequests.find(r => r.id === data.id);
+                    data.token ? request === null || request === void 0 ? void 0 : request.resolve(data.token) : request === null || request === void 0 ? void 0 : request.reject();
+                    this.__tokenizationRequests = this.__tokenizationRequests.filter(r => r.id !== data.id);
+                    break;
+                }
+                case 'submit': {
+                    (_a = this.onsubmit) === null || _a === void 0 ? void 0 : _a.call(this);
+                    break;
+                }
+                case 'resize': {
+                    if (this.__iframe)
+                        this.__iframe.style.height = data.height;
+                    break;
+                }
+                case 'ready': {
+                    this.configure(this.__config);
+                    (_b = this.__mountingTask) === null || _b === void 0 ? void 0 : _b.resolve();
+                    break;
+                }
+            }
+        };
+        this.__iframeLoadHandler = (evt) => {
+            if (this.__channel) {
+                const contentWindow = evt.currentTarget.contentWindow;
+                if (!contentWindow)
+                    throw new Error('Content window is not available.');
+                contentWindow.postMessage('connect', '*', [this.__channel.port2]);
+            }
+        };
+        this.__mountingTask = null;
+        this.__channel = null;
+        this.__iframe = null;
+        this.__config = config;
+        this.__url = url;
+    }
+    /**
+     * Updates the configuration of the payment card embed.
+     * You can change style, translations, language and interactivity settings.
+     * To change the URL of the payment card embed, you need to create a new instance.
+     * You are not required to provide the full configuration object, only the properties you want to change.
+     *
+     * @param config - The new configuration.
+     */
+    configure(config) {
+        var _a;
+        this.__config = config;
+        const message = Object.assign({ type: 'config' }, config);
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.postMessage(JSON.stringify(message));
+    }
+    /**
+     * Requests the tokenization of the card data.
+     *
+     * @returns A promise that resolves with the tokenized card data.
+     */
+    tokenize() {
+        return new Promise((resolve, reject) => {
+            if (this.__channel) {
+                const id = this._createId();
+                this.__tokenizationRequests.push({ id, reject, resolve });
+                this.__channel.port1.postMessage(JSON.stringify({ id, type: 'tokenization_request' }));
+            }
+            else {
+                reject();
+            }
+        });
+    }
+    /**
+     * Safely removes the embed iframe from the parent node,
+     * closing the message channel and cleaning up event listeners.
+     */
+    unmount() {
+        var _a, _b, _c, _d, _e, _f;
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.removeEventListener('message', this.__iframeMessageHandler);
+        (_b = this.__channel) === null || _b === void 0 ? void 0 : _b.port1.close();
+        (_c = this.__channel) === null || _c === void 0 ? void 0 : _c.port2.close();
+        this.__channel = null;
+        (_d = this.__iframe) === null || _d === void 0 ? void 0 : _d.removeEventListener('load', this.__iframeLoadHandler);
+        (_e = this.__iframe) === null || _e === void 0 ? void 0 : _e.remove();
+        this.__iframe = null;
+        (_f = this.__mountingTask) === null || _f === void 0 ? void 0 : _f.reject();
+        this.__mountingTask = null;
+    }
+    /**
+     * Mounts the payment card embed in the given root element. If the embed is already mounted,
+     * it will be unmounted first.
+     *
+     * @param root - The root element to mount the embed in.
+     * @returns A promise that resolves when the embed is mounted.
+     */
+    mount(root) {
+        this.unmount();
+        this.__channel = this._createMessageChannel();
+        this.__channel.port1.addEventListener('message', this.__iframeMessageHandler);
+        this.__channel.port1.start();
+        this.__iframe = this._createIframe(root);
+        this.__iframe.addEventListener('load', this.__iframeLoadHandler);
+        this.__iframe.style.transition = 'height 0.15s ease';
+        this.__iframe.style.margin = '-2px';
+        this.__iframe.style.height = '100px';
+        this.__iframe.style.width = 'calc(100% + 4px)';
+        this.__iframe.src = this.__url;
+        root.append(this.__iframe);
+        return new Promise((resolve, reject) => {
+            this.__mountingTask = { reject, resolve };
+        });
+    }
+    /**
+     * Clears the card data from the embed.
+     * No-op if the embed is not mounted.
+     */
+    clear() {
+        var _a;
+        (_a = this.__channel) === null || _a === void 0 ? void 0 : _a.port1.postMessage(JSON.stringify({ type: 'clear' }));
+    }
+    /* v8 ignore next */
+    _createMessageChannel() {
+        return new MessageChannel();
+    }
+    /* v8 ignore next */
+    _createIframe(root) {
+        return root.ownerDocument.createElement('iframe');
+    }
+    /* v8 ignore next */
+    _createId() {
+        return `${Date.now()}${Math.random().toFixed(6).slice(2)}`;
+    }
+}

package/dist/esm/customer/index.js

@@ -3,3 +3,4 @@ export { getAllowedFrequencies } from './getAllowedFrequencies.js';
 export { getNextTransactionDateConstraints } from './getNextTransactionDateConstraints.js';
 export { getTimeFromFrequency } from '../backend/getTimeFromFrequency.js';
 export { isNextTransactionDate } from './isNextTransactionDate.js';
+export { PaymentCardEmbed } from './PaymentCardEmbed.js';

package/dist/types/backend/Graph/default_payment_method.d.ts

@@ -19,6 +19,8 @@ export interface DefaultPaymentMethod extends Graph {
     save_cc: boolean;
     /** The credit card or debit card type. This will be determined automatically once the payment card is saved. */
     cc_type: string | null;
+    /** Token returned by our Tokenization Embed. Send this field with PATCH to update customer's payment method. */
+    cc_token?: string;
     /** The payment card number. This property will not be displayed as part of this resource, but can be used to modify this payment method. */
     cc_number?: number;
     /** A masked version of this payment card showing only the last 4 digits. */

package/dist/types/customer/Graph/default_payment_method.d.ts

@@ -15,8 +15,8 @@ export interface DefaultPaymentMethod extends Graph {
     save_cc: boolean;
     /** The credit card or debit card type. This will be determined automatically once the payment card is saved. */
     cc_type: string | null;
-    /** The payment card number. This property will not be displayed as part of this resource, but can be used to modify this payment method. */
-    cc_number?: number;
+    /** Token returned by our Tokenization Embed. Send this field with PATCH to update customer's payment method. */
+    cc_token?: string;
     /** A masked version of this payment card showing only the last 4 digits. */
     cc_number_masked: string | null;
     /** The payment card expiration month in the MM format. */

package/dist/types/customer/PaymentCardEmbed.d.ts

@@ -0,0 +1,69 @@
+import type { PaymentCardEmbedConfig } from './types';
+/**
+ * A convenience wrapper for the payment card embed iframe. You don't have to use
+ * this class to embed the payment card iframe, but it provides a more convenient
+ * way to interact with the iframe and listen to its events.
+ *
+ * @example
+ * const embed = new PaymentCardEmbed({
+ *   url: 'https://embed.foxy.io/v1.html?template_set_id=123'
+ * });
+ *
+ * await embed.mount(document.body);
+ * console.log('Token:', await embed.tokenize());
+ */
+export declare class PaymentCardEmbed {
+    /**
+     * An event handler that is triggered when Enter is pressed in the card form.
+     * This feature is not available for template sets configured with the `stripe_connect`
+     * hosted payment gateway due to the limitations of Stripe.js.
+     */
+    onsubmit: (() => void) | null;
+    private __tokenizationRequests;
+    private __iframeMessageHandler;
+    private __iframeLoadHandler;
+    private __mountingTask;
+    private __channel;
+    private __iframe;
+    private __config;
+    private __url;
+    constructor({ url, ...config }: {
+        url: string;
+    } & PaymentCardEmbedConfig);
+    /**
+     * Updates the configuration of the payment card embed.
+     * You can change style, translations, language and interactivity settings.
+     * To change the URL of the payment card embed, you need to create a new instance.
+     * You are not required to provide the full configuration object, only the properties you want to change.
+     *
+     * @param config - The new configuration.
+     */
+    configure(config: PaymentCardEmbedConfig): void;
+    /**
+     * Requests the tokenization of the card data.
+     *
+     * @returns A promise that resolves with the tokenized card data.
+     */
+    tokenize(): Promise<string>;
+    /**
+     * Safely removes the embed iframe from the parent node,
+     * closing the message channel and cleaning up event listeners.
+     */
+    unmount(): void;
+    /**
+     * Mounts the payment card embed in the given root element. If the embed is already mounted,
+     * it will be unmounted first.
+     *
+     * @param root - The root element to mount the embed in.
+     * @returns A promise that resolves when the embed is mounted.
+     */
+    mount(root: Element): Promise<void>;
+    /**
+     * Clears the card data from the embed.
+     * No-op if the embed is not mounted.
+     */
+    clear(): void;
+    protected _createMessageChannel(): MessageChannel;
+    protected _createIframe(root: Element): HTMLIFrameElement;
+    protected _createId(): string;
+}

package/dist/types/customer/index.d.ts

@@ -3,6 +3,7 @@ export { getAllowedFrequencies } from './getAllowedFrequencies.js';
 export { getNextTransactionDateConstraints } from './getNextTransactionDateConstraints.js';
 export { getTimeFromFrequency } from '../backend/getTimeFromFrequency.js';
 export { isNextTransactionDate } from './isNextTransactionDate.js';
+export { PaymentCardEmbed } from './PaymentCardEmbed.js';
 import type * as Rels from './Rels';
 export type { Graph } from './Graph';
 export type { Rels };

package/dist/types/customer/types.d.ts

@@ -1,3 +1,87 @@
+/** Tokenization embed configuration that can be updated any time after mount. */
+export type PaymentCardEmbedConfig = Partial<{
+  /** Translations. Note that Stripe and Square provide their own translations that can't be customized. */
+  translations: {
+    stripe?: {
+      label?: string;
+      status?: {
+        idle?: string;
+        busy?: string;
+        fail?: string;
+      };
+    };
+    square?: {
+      label?: string;
+      status?: {
+        idle?: string;
+        busy?: string;
+        fail?: string;
+      };
+    };
+    default?: {
+      'cc-number'?: {
+        label?: string;
+        placeholder?: string;
+        v8n_required?: string;
+        v8n_invalid?: string;
+        v8n_unsupported?: string;
+      };
+      'cc-exp'?: {
+        label?: string;
+        placeholder?: string;
+        v8n_required?: string;
+        v8n_invalid?: string;
+        v8n_expired?: string;
+      };
+      'cc-csc'?: {
+        label?: string;
+        placeholder?: string;
+        v8n_required?: string;
+        v8n_invalid?: string;
+      };
+      'status'?: {
+        idle?: string;
+        busy?: string;
+        fail?: string;
+        misconfigured?: string;
+      };
+    };
+  };
+  /** If true, all fields inside the embed will be disabled. */
+  disabled: boolean;
+  /** If true, all fields inside the embed will be set to be read-only. For Stripe and Square the fields will be disabled and styled as readonly. */
+  readonly: boolean;
+  /** Appearance settings. */
+  style: Partial<{
+    '--lumo-space-m': string;
+    '--lumo-space-s': string;
+    '--lumo-contrast-5pct': string;
+    '--lumo-contrast-10pct': string;
+    '--lumo-contrast-50pct': string;
+    '--lumo-size-m': string;
+    '--lumo-size-xs': string;
+    '--lumo-border-radius-m': string;
+    '--lumo-border-radius-s': string;
+    '--lumo-font-family': string;
+    '--lumo-font-size-m': string;
+    '--lumo-font-size-s': string;
+    '--lumo-font-size-xs': string;
+    '--lumo-primary-color': string;
+    '--lumo-primary-text-color': string;
+    '--lumo-primary-color-50pct': string;
+    '--lumo-secondary-text-color': string;
+    '--lumo-disabled-text-color': string;
+    '--lumo-body-text-color': string;
+    '--lumo-error-text-color': string;
+    '--lumo-error-color-10pct': string;
+    '--lumo-error-color-50pct': string;
+    '--lumo-line-height-xs': string;
+    '--lumo-base-color': string;
+  }>;
+  /** Locale to use with Stripe or Square. Has no effect on the default UI. */
+  lang: string;
+}>;
+
 /** User credentials for authentication. */
 export interface Credentials {
   /** Email address associated with an account. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/sdk",
   "type": "commonjs",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "Universal SDK for a full server-side and a limited in-browser access to Foxy hAPI.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",