@pabgw/react 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+export interface PabPaymentProps {
+    /** Payment link token (use token OR session, not both) */
+    token?: string;
+    /** Checkout API session ID (use token OR session, not both) */
+    session?: string;
+    /** Pre-select payment method: 'cc' | 'ach' */
+    method?: string;
+    /** Locale: 'en' | 'es' */
+    locale?: string;
+    /** Base URL override (for development) */
+    baseUrl?: string;
+    /** Called when form is ready */
+    onReady?: (data: any) => void;
+    /** Called when payment succeeds */
+    onSuccess?: (data: PabSuccessData) => void;
+    /** Called when payment fails */
+    onError?: (data: PabErrorData) => void;
+    /** Called when payment is processing */
+    onProcessing?: () => void;
+    /** Called when fees are calculated */
+    onFeesCalculated?: (data: PabFeesData) => void;
+    /** Called when session expires (Checkout API only) */
+    onExpired?: () => void;
+    /** Container className */
+    className?: string;
+    /** Container style */
+    style?: React.CSSProperties;
+}
+export interface PabSuccessData {
+    transactionId?: string;
+    amount?: number;
+    authCode?: string;
+}
+export interface PabErrorData {
+    code: string;
+    message: string;
+}
+export interface PabFeesData {
+    amount: number;
+    feeAmount: number;
+    totalAmount: number;
+}
+export declare function PabPayment({ token, session, method, locale, baseUrl, onReady, onSuccess, onError, onProcessing, onFeesCalculated, onExpired, className, style, }: PabPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePabPayment(): {
+    mount: (config: {
+        token?: string;
+        session?: string;
+        container: HTMLElement | string;
+        method?: string;
+        locale?: string;
+        baseUrl?: string;
+    }) => Promise<any>;
+    destroy: () => void;
+    pab: import("react").MutableRefObject<any>;
+};

package/dist/index.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PabPayment = PabPayment;
+exports.usePabPayment = usePabPayment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// ============================================
+// Inline pabgw.js loader
+// ============================================
+const PAB_SDK_URL = 'https://quick2pay.pabgw.com/assets/sdk/v1/pabgw.js';
+function loadPabSdk() {
+    if (window.PABGW)
+        return Promise.resolve();
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = PAB_SDK_URL;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load PAB SDK'));
+        document.head.appendChild(script);
+    });
+}
+// ============================================
+// React Component
+// ============================================
+function PabPayment({ token, session, method, locale = 'en', baseUrl, onReady, onSuccess, onError, onProcessing, onFeesCalculated, onExpired, className, style, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const pabRef = (0, react_1.useRef)(null);
+    const stableOnReady = useCallbackRef(onReady);
+    const stableOnSuccess = useCallbackRef(onSuccess);
+    const stableOnError = useCallbackRef(onError);
+    const stableOnProcessing = useCallbackRef(onProcessing);
+    const stableOnFeesCalculated = useCallbackRef(onFeesCalculated);
+    const stableOnExpired = useCallbackRef(onExpired);
+    (0, react_1.useEffect)(() => {
+        let destroyed = false;
+        loadPabSdk().then(() => {
+            if (destroyed || !containerRef.current)
+                return;
+            const config = {
+                container: containerRef.current,
+                method: method || undefined,
+                locale,
+                baseUrl: baseUrl || undefined,
+            };
+            if (token)
+                config.token = token;
+            if (session)
+                config.session = session;
+            const pab = new window.PABGW(config);
+            if (stableOnReady.current)
+                pab.on('ready', stableOnReady.current);
+            if (stableOnSuccess.current)
+                pab.on('success', stableOnSuccess.current);
+            if (stableOnError.current)
+                pab.on('error', stableOnError.current);
+            if (stableOnProcessing.current)
+                pab.on('processing', stableOnProcessing.current);
+            if (stableOnFeesCalculated.current)
+                pab.on('fees_calculated', stableOnFeesCalculated.current);
+            if (stableOnExpired.current)
+                pab.on('expired', stableOnExpired.current);
+            pab.mount();
+            pabRef.current = pab;
+        });
+        return () => {
+            destroyed = true;
+            if (pabRef.current) {
+                pabRef.current.destroy();
+                pabRef.current = null;
+            }
+        };
+    }, [token, session, method, locale, baseUrl]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, style: style });
+}
+// ============================================
+// Hook for programmatic control
+// ============================================
+function usePabPayment() {
+    const pabRef = (0, react_1.useRef)(null);
+    const mount = (0, react_1.useCallback)((config) => {
+        return loadPabSdk().then(() => {
+            const pab = new window.PABGW(config);
+            pabRef.current = pab;
+            return pab;
+        });
+    }, []);
+    const destroy = (0, react_1.useCallback)(() => {
+        if (pabRef.current) {
+            pabRef.current.destroy();
+            pabRef.current = null;
+        }
+    }, []);
+    return { mount, destroy, pab: pabRef };
+}
+// Helper to keep callback refs stable
+function useCallbackRef(callback) {
+    const ref = (0, react_1.useRef)(callback);
+    ref.current = callback;
+    return ref;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@pabgw/react",
+  "version": "1.0.0",
+  "description": "PAB Gateway Payment Form — React component",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": ["pab", "payment", "gateway", "react", "stripe-elements-alternative"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/pabgw/PAB-Gateway"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}