@verbb/formie-browser 1.0.0

package/src/js/modules/payments/moneris.ts

@@ -0,0 +1,216 @@
+import { definePaymentModule } from '#modules/payments/api';
+
+type MonerisProviderOptions = {
+    endpointUrl?: string;
+};
+
+type MonerisTokenResult = {
+    token: string;
+    error: string;
+};
+
+type MonerisFieldState = Element & {
+    __formieMonerisAuthorizeCleanup?: (() => void) | null;
+    __formieMonerisAuthorizeRequestId?: number;
+};
+
+const MONERIS_RESPONSE_MESSAGES: Record<string, string> = {
+    '940': 'Invalid profile ID (tokenization request).',
+    '941': 'Error generating token.',
+    '942': 'Invalid Profile ID or source URL.',
+    '943': 'Card data is invalid.',
+    '944': 'Invalid expiration date.',
+    '945': 'Invalid CVD.',
+};
+
+const extractMonerisToken = (payload: unknown): MonerisTokenResult => {
+    const fromObject = (value: Record<string, unknown>): MonerisTokenResult => {
+        const token = String(value.dataKey ?? value.data_key ?? '').trim();
+        const responseCode = String(value.responseCode ?? value.response_code ?? '').trim();
+        const responseMessage = String(value.responseMessage ?? value.response_message ?? '').trim();
+        const error = String(value.error ?? value.errorMessage ?? value.message ?? '').trim();
+
+        if (token) {
+            return { token, error: '' };
+        }
+
+        if (responseCode && responseCode !== '001') {
+            const codeMessage = MONERIS_RESPONSE_MESSAGES[responseCode] || `Moneris response code ${responseCode}.`;
+
+            return { token: '', error: responseMessage || codeMessage };
+        }
+
+        return { token: '', error };
+    };
+
+    if (payload && typeof payload === 'object') {
+        return fromObject(payload as Record<string, unknown>);
+    }
+
+    if (typeof payload !== 'string') {
+        return { token: '', error: '' };
+    }
+
+    const value = payload.trim();
+
+    if (!value) {
+        return { token: '', error: '' };
+    }
+
+    try {
+        const decoded = JSON.parse(value);
+
+        if (decoded && typeof decoded === 'object') {
+            return fromObject(decoded as Record<string, unknown>);
+        }
+    } catch {
+        // Continue parsing other known payload shapes.
+    }
+
+    if (value.includes('=')) {
+        const params = new URLSearchParams(value);
+        const token = (params.get('dataKey') || params.get('data_key') || '').trim();
+        const responseCode = (params.get('responseCode') || params.get('response_code') || '').trim();
+        const responseMessage = (params.get('responseMessage') || params.get('response_message') || '').trim();
+        const error = (params.get('error') || params.get('message') || '').trim();
+
+        if (token) {
+            return { token, error: '' };
+        }
+
+        if (responseCode && responseCode !== '001') {
+            const codeMessage = MONERIS_RESPONSE_MESSAGES[responseCode] || `Moneris response code ${responseCode}.`;
+
+            return { token: '', error: responseMessage || codeMessage };
+        }
+
+        return { token: '', error };
+    }
+
+    // Moneris can return a raw token string. Accept only token-like values.
+    if (/^[A-Za-z0-9._-]{8,}$/.test(value)) {
+        return { token: value, error: '' };
+    }
+
+    return { token: '', error: '' };
+};
+
+export const monerisModule = definePaymentModule<MonerisProviderOptions, null, null>({
+    id: 'moneris',
+    defaultRequiredInputSuffixes: ['monerisTokenId'],
+    load: async() => null,
+    onBeforeAuthorize: async(args) => {
+        const { field, services, options } = args;
+        const fieldState = field as MonerisFieldState;
+        const provider = options.provider as MonerisProviderOptions;
+        const endpointUrl = (provider.endpointUrl || '').trim();
+        const iframe = field.querySelector<HTMLIFrameElement>('[data-formie-moneris-frame]');
+        let endpointOrigin = '';
+
+        try {
+            endpointOrigin = new URL(endpointUrl, window.location.origin).origin;
+        } catch {
+            endpointOrigin = '';
+        }
+
+        if (!iframe?.contentWindow || !endpointOrigin) {
+            services.addError('Moneris frame or endpoint is missing.');
+
+            return false;
+        }
+
+        // Defensive cleanup if an earlier authorize attempt left handlers behind.
+        fieldState.__formieMonerisAuthorizeCleanup?.();
+        const requestId = (fieldState.__formieMonerisAuthorizeRequestId || 0) + 1;
+        fieldState.__formieMonerisAuthorizeRequestId = requestId;
+
+        return new Promise<boolean>((resolve) => {
+            let resolved = false;
+            let lastError = '';
+            let timeout = 0;
+
+            const cleanup = () => {
+                window.removeEventListener('message', messageHandler);
+                window.clearTimeout(timeout);
+
+                if (fieldState.__formieMonerisAuthorizeCleanup === cleanup) {
+                    fieldState.__formieMonerisAuthorizeCleanup = null;
+                }
+            };
+
+            const messageHandler = (event: MessageEvent) => {
+                if (resolved || requestId !== fieldState.__formieMonerisAuthorizeRequestId) {
+                    return;
+                }
+
+                if (event.origin !== endpointOrigin) {
+                    return;
+                }
+
+                const result = extractMonerisToken(event.data);
+
+                if (result.token) {
+                    resolved = true;
+                    cleanup();
+                    services.updateInputs('monerisTokenId', result.token);
+
+                    resolve(true);
+                } else if (result.error) {
+                    lastError = result.error;
+                }
+            };
+
+            fieldState.__formieMonerisAuthorizeCleanup = cleanup;
+
+            timeout = window.setTimeout(() => {
+                if (resolved) {
+                    return;
+                }
+
+                resolved = true;
+                cleanup();
+                services.addError(lastError || 'Moneris tokenization timed out. Please try again.');
+                resolve(false);
+            }, 10000);
+
+            window.addEventListener('message', messageHandler);
+            try {
+                iframe.contentWindow?.postMessage('tokenize', endpointOrigin);
+            } catch {
+                resolved = true;
+                cleanup();
+                services.addError('Moneris tokenization could not be started.');
+                resolve(false);
+            }
+        });
+    },
+    setup: async(ctx) => {
+        const { services } = ctx;
+
+        const messageHandler = (event: MessageEvent) => {
+            if (!event.origin.includes('moneris')) {
+                return;
+            }
+
+            const result = extractMonerisToken(event.data);
+
+            if (result.token) {
+                services.updateInputs('monerisTokenId', result.token);
+            }
+        };
+
+        const unbind = services.events.onRoot('message', messageHandler as EventListener);
+
+        return {
+            destroy: () => {
+                unbind();
+                const fieldState = ctx.target as MonerisFieldState;
+                fieldState.__formieMonerisAuthorizeCleanup?.();
+                fieldState.__formieMonerisAuthorizeCleanup = null;
+            },
+        };
+    },
+    onAfterSubmit: async({ services }) => {
+        services.updateInputs('monerisTokenId', '');
+    },
+});

package/src/js/modules/payments/opayo.ts

@@ -0,0 +1,272 @@
+import { definePaymentModule } from '#modules/payments/api';
+import { createDebug } from '#utils/debug';
+import { getPaymentProviderActionEventName } from '#utils/event-names';
+import { loadScriptAndEnsureGlobal } from '#utils/scripts';
+
+type SagePayTokeniseResult = {
+    success: boolean;
+    cardIdentifier?: string;
+    errors?: Array<{ message: string }>;
+};
+
+type SagePayGlobal = {
+    (opts: { merchantSessionKey: string }): {
+        tokeniseCardDetails: (opts: {
+            cardDetails: Record<string, string>;
+            onTokenised: (result: SagePayTokeniseResult) => void;
+        }) => void;
+    };
+};
+
+declare global {
+    interface Window {
+        sagepayOwnForm?: SagePayGlobal;
+    }
+}
+
+type OpayoProviderOptions = {
+    useSandbox?: boolean;
+    handle?: string;
+    sessionToken?: string | null;
+};
+
+const SCRIPT_ID = 'FORMIE_OPAYO_SCRIPT';
+const SCRIPT_SRC_LIVE = 'https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js';
+const SCRIPT_SRC_SANDBOX = 'https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js';
+const debug = createDebug('payments', 'opayo');
+const CHALLENGE_EVENT = getPaymentProviderActionEventName('opayo', 'challenge');
+const CHALLENGE_RESPONSE_MESSAGE = 'formie:payment:opayo:challenge:response';
+
+export const opayoModule = definePaymentModule<OpayoProviderOptions, null, null>({
+    id: 'opayo',
+    defaultRequiredInputSuffixes: ['opayoTokenId'],
+    load: async(ctx) => {
+        const { provider } = ctx.options;
+        const useSandbox = Boolean(provider.useSandbox);
+        const src = useSandbox ? SCRIPT_SRC_SANDBOX : SCRIPT_SRC_LIVE;
+
+        await loadScriptAndEnsureGlobal<Window['sagepayOwnForm']>('sagepayOwnForm', {
+            id: SCRIPT_ID,
+            src,
+            timeoutMs: 10000,
+        });
+
+        return null;
+    },
+    onBeforeAuthorize: async(args) => {
+        const { field, services, options } = args;
+        const provider = options.provider as OpayoProviderOptions;
+        const handle = (provider.handle || 'opayo') as string;
+        const form = services.form;
+
+        if (!form?.action) {
+            services.addError('Form action is missing.');
+            debug.warn('Missing form action before authorize.');
+
+            return false;
+        }
+
+        const sagepayOwnForm = (window as Window).sagepayOwnForm;
+
+        if (!sagepayOwnForm) {
+            services.addError('Opayo script failed to load.');
+            debug.warn('sagepayOwnForm global not available.');
+
+            return false;
+        }
+
+        const cardholderName = field.querySelector<HTMLInputElement>('[data-opayo-card="cardholder-name"]')?.value ?? '';
+        let cardNumber = field.querySelector<HTMLInputElement>('[data-opayo-card="card-number"]')?.value ?? '';
+        let expiryDate = field.querySelector<HTMLInputElement>('[data-opayo-card="expiry-date"]')?.value ?? '';
+        const securityCode = field.querySelector<HTMLInputElement>('[data-opayo-card="security-code"]')?.value ?? '';
+
+        cardNumber = cardNumber.replace(/[\s/]/g, '');
+        expiryDate = expiryDate.replace(/[\s/]/g, '');
+
+        return new Promise<boolean>((resolve) => {
+            const formData = new FormData();
+            formData.append('action', 'formie/payment-webhooks/process-callback');
+            formData.append('merchantSessionKey', 'true');
+            formData.append('handle', handle);
+            formData.append('sessionToken', provider.sessionToken || '');
+
+            fetch(form.action, {
+                method: 'POST',
+                body: formData,
+            }).then(async(res) => {
+                if (res.status < 200 || res.status >= 300) {
+                    services.addError(`${res.status}: ${res.statusText}`);
+                    debug.warn('Merchant session request failed.', {
+                        status: res.status,
+                        statusText: res.statusText,
+                    });
+                    resolve(false);
+
+                    return;
+                }
+
+                try {
+                    const response = await res.json();
+                    const merchantSessionKey = response.merchantSessionKey;
+
+                    if (!merchantSessionKey) {
+                        services.addError('Unable to get merchant session.');
+                        debug.warn('merchantSessionKey missing in callback response.');
+                        resolve(false);
+
+                        return;
+                    }
+
+                    sagepayOwnForm({ merchantSessionKey }).tokeniseCardDetails({
+                        cardDetails: {
+                            cardholderName,
+                            cardNumber,
+                            expiryDate,
+                            securityCode,
+                        },
+                        onTokenised: (result) => {
+                            if (result.success && result.cardIdentifier) {
+                                services.updateInputs('opayoTokenId', result.cardIdentifier);
+                                services.updateInputs('opayoSessionKey', merchantSessionKey);
+                                debug.log('Tokenization succeeded.', {
+                                    hasCardIdentifier: !!result.cardIdentifier,
+                                });
+
+                                resolve(true);
+                            } else {
+                                services.addError(result.errors?.[0]?.message || 'Tokenization failed.');
+                                debug.warn('Tokenization failed.', result);
+                                resolve(false);
+                            }
+                        },
+                    });
+                } catch {
+                    services.addError('Unable to parse merchant session response.');
+                    debug.warn('Failed to parse merchant session response.');
+                    resolve(false);
+                }
+            }).catch(() => {
+                services.addError('Network error. Please try again.');
+                debug.warn('Network error requesting merchant session.');
+                resolve(false);
+            });
+        });
+    },
+    setup: async(ctx) => {
+        const { services } = ctx;
+        const field = ctx.target;
+
+        type Opayo3DSData = {
+            acsUrl?: string;
+            creq?: string;
+            threeDSSessionData?: string;
+            returnUrl?: string;
+            redirectUrl?: string;
+        };
+
+        let activeDialog: HTMLElement | null = null;
+        let handling3DSResponse = false;
+
+        const closeDialog = () => {
+            if (activeDialog?.parentNode) {
+                activeDialog.parentNode.removeChild(activeDialog);
+            }
+
+            activeDialog = null;
+        };
+
+        const unbind3DS = services.events.onForm(CHALLENGE_EVENT, ((event: CustomEvent<{ data?: Opayo3DSData }>) => {
+            const data = event.detail?.data;
+            if (!data?.acsUrl || !data?.creq) return;
+            handling3DSResponse = false;
+            debug.log('Received payment challenge event.', {
+                hasAcsUrl: !!data.acsUrl,
+                hasCreq: !!data.creq,
+            });
+
+            const form = services.form;
+            const sessionInput = form?.querySelector<HTMLInputElement>('input[name*="opayoSessionKey"]');
+            const md = sessionInput?.value || '';
+
+            const dialog = document.createElement('div');
+            dialog.className = 'formie-modal';
+            dialog.id = `formie-opayo-dialog-${Math.random().toString(36).slice(2, 9)}`;
+            dialog.innerHTML = `
+                <div class="formie-modal-backdrop" data-dialog-close></div>
+                <div class="formie-modal-content">
+                    <div class="formie-loading formie-loading-large" style="--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;"></div>
+                    <iframe width="100%" height="100%" style="width: 100%; height: 100%; position: relative; z-index: 1;"></iframe>
+                </div>
+            `;
+            const iframe = dialog.querySelector('iframe');
+            const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+            const callbackUrl = data.returnUrl || data.redirectUrl || '';
+            const html = `<form action="${esc(data.acsUrl)}" method="post">
+                <input type="hidden" name="creq" value="${esc(data.creq || '')}" />
+                <input type="hidden" name="threeDSSessionData" value="${esc(data.threeDSSessionData || '')}" />
+                <input type="hidden" name="MD" value="${esc(md)}" />
+                <input type="hidden" name="TermUrl" value="${esc(callbackUrl)}" />
+                <input type="hidden" name="ThreeDSNotificationURL" value="${esc(callbackUrl)}" />
+            </form><script>document.forms[0].submit();</script>`;
+            closeDialog();
+            document.body.appendChild(dialog);
+            activeDialog = dialog;
+            if (iframe?.contentWindow) {
+                iframe.contentWindow.document.open();
+                iframe.contentWindow.document.write(html);
+                iframe.contentWindow.document.close();
+            }
+        }) as EventListener);
+
+        const messageHandler = (event: MessageEvent) => {
+            if (event.data?.message !== CHALLENGE_RESPONSE_MESSAGE) {
+                return;
+            }
+
+            // Only the module instance that currently owns an active 3DS dialog
+            // should consume the callback. This avoids cross-instance duplicate
+            // submits when multiple listeners exist.
+            if (!activeDialog) {
+                debug.log('Ignoring 3DS response without active dialog.');
+                return;
+            }
+
+            if (handling3DSResponse) {
+                debug.warn('Ignoring duplicate 3DS response while processing.');
+                return;
+            }
+
+            handling3DSResponse = true;
+            debug.log('Received payment challenge response message.', event.data?.value);
+
+            closeDialog();
+            services.removeError();
+
+            if (event.data?.value?.error) {
+                services.addError(event.data.value.error.message);
+                services.releaseSubmitLoading();
+                handling3DSResponse = false;
+
+                return;
+            }
+
+            services.updateInputs('opayo3DSComplete', event.data.value?.transactionId ?? '');
+
+            services.triggerSubmit();
+        };
+
+        window.addEventListener('message', messageHandler);
+
+        return {
+            destroy: () => {
+                unbind3DS();
+                window.removeEventListener('message', messageHandler);
+                closeDialog();
+                handling3DSResponse = false;
+            },
+        };
+    },
+    onAfterSubmit: async({ services }) => {
+        services.updateInputs(['opayoTokenId', 'opayoSessionKey', 'opayo3DSComplete'], '');
+    },
+});

package/src/js/modules/payments/paddle.ts

@@ -0,0 +1,111 @@
+import { definePaymentModule } from '#modules/payments/api';
+import { getPaymentProviderActionEventName } from '#utils/event-names';
+import { loadScriptAndEnsureGlobal } from '#utils/scripts';
+
+type PaddleGlobal = {
+    Environment: { set: (env: string) => void };
+    Initialize: (opts: {
+        token: string;
+        checkout?: { settings?: { displayMode?: string; variant?: string } };
+        eventCallback?: (e: { name: string; data?: unknown }) => void;
+    }) => void;
+    Checkout: {
+        open: (data: { items?: unknown[] }) => void;
+        close: () => void;
+    };
+};
+
+type PaddleProviderOptions = {
+    clientSideToken?: string;
+    environment?: string;
+};
+
+const SCRIPT_ID = 'FORMIE_PADDLE_SCRIPT';
+
+const CHECKOUT_EVENT = getPaymentProviderActionEventName('paddle', 'initialize');
+
+export const paddleModule = definePaymentModule<PaddleProviderOptions, null, null>({
+    id: 'paddle',
+    defaultRequiredInputSuffixes: ['paddleCheckoutData'],
+    load: async() => null,
+    setup: async(ctx) => {
+        const { services } = ctx;
+        const field = ctx.target;
+        const provider = ctx.options.provider as PaddleProviderOptions;
+
+        const clientSideToken = provider.clientSideToken as string | undefined;
+        if (!clientSideToken?.trim()) {
+            services.addError('Missing clientSideToken for Paddle.');
+            return {};
+        }
+
+        let paddle: PaddleGlobal;
+        try {
+            paddle = await loadScriptAndEnsureGlobal<PaddleGlobal>('Paddle', {
+                id: SCRIPT_ID,
+                src: 'https://cdn.paddle.com/paddle/v2/paddle.js',
+            });
+            paddle.Environment.set((provider.environment as string) || 'production');
+        } catch (error) {
+            services.addError(error instanceof Error ? error.message : 'Failed to load Paddle SDK.');
+
+            return {};
+        }
+
+        paddle.Initialize({
+            token: clientSideToken,
+            checkout: {
+                settings: {
+                    displayMode: 'overlay',
+                    variant: 'multi-page',
+                },
+            },
+            eventCallback: (e) => {
+                if (e.name === 'checkout.completed') {
+                    services.updateInputs('paddleCheckoutInit', '');
+                    services.updateInputs('paddleCheckoutData', JSON.stringify(e.data || {}));
+
+                    setTimeout(() => {
+                        paddle.Checkout.close();
+
+                        services.triggerSubmit();
+                    }, 500);
+                }
+            },
+        });
+
+        const openCheckout = (data?: { items?: unknown[] }) => {
+            if (!data?.items) {
+                services.addError('Missing Paddle checkout items.');
+
+                return false;
+            }
+
+            try {
+                // Action-required flows should release submit loading while checkout is open.
+                services.releaseSubmitLoading();
+                paddle.Checkout.open(data);
+            } catch (error) {
+                services.addError(error instanceof Error ? error.message : 'Unable to open Paddle checkout.');
+
+                return false;
+            }
+
+            return true;
+        };
+
+        const unbindCheckout = services.events.onForm(CHECKOUT_EVENT, ((event: CustomEvent<{ data?: { items?: unknown[] } }>) => {
+            openCheckout(event.detail?.data);
+        }) as EventListener);
+
+        return {
+            destroy: () => {
+                unbindCheckout();
+            },
+        };
+    },
+    onAfterSubmit: async({ services }) => {
+        services.updateInputs('paddleCheckoutInit', 'true');
+        services.updateInputs('paddleCheckoutData', '');
+    },
+});