@school24/paymentjs-rn 1.4.1 → 1.4.5

package/dist/PaymentJS.d.ts

@@ -1,30 +1,3 @@
 import React from "react";
 import type { PaymentJSProps } from "./types";
-interface EnhancedPaymentJSProps extends PaymentJSProps {
-    /**
-     * Environment: 'test' or 'live'
-     */
-    environment?: "test" | "live";
-    /**
-     * Shopper reference (required for stored cards)
-     */
-    shopperReference?: string;
-    /**
-     * Amount in minor units (e.g. 100 = 1.00 AUD)
-     */
-    amount?: number;
-    /**
-     * Currency (default: AUD)
-     */
-    currency?: string;
-    /**
-     * Whether to store the card on first payment
-     */
-    storePaymentMethod?: boolean;
-    /**
-     * Optional base URL for the payment page (defaults to your hosted HTML)
-     */
-    baseUrl?: string;
-}
-declare const PaymentJS: React.FC<EnhancedPaymentJSProps>;
-export default PaymentJS;
+export default function PaymentJS(props: PaymentJSProps): React.JSX.Element;

package/dist/PaymentJS.js

@@ -33,60 +33,122 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PaymentJS;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_webview_1 = require("react-native-webview");
-const PaymentJS = (props) => {
-    const { uri: customUri, onSuccess, onFailure, onDebug, debug, style, environment = "test", shopperReference = "USER123", amount = 100, currency = "AUD", storePaymentMethod = true, baseUrl = "https://www.school24.net.au/valpay-gateway", } = props;
-    // Auto-build URI with query params if customUri not provided
+function safeBoolString(v) {
+    return (v ? "true" : "false");
+}
+function normalizeBase(url) {
+    return url.replace(/\/+$/, "");
+}
+function PaymentJS(props) {
+    const { uri, pageUrl = "https://client.brandsyncstudio.com/paymentjs/payment-rn.html", lambdaUrl = "https://qb3epa62mry53z3woeiecuhpve0scpjb.lambda-url.ap-southeast-2.on.aws", mode = "pay", environment = "test", shopperReference = "", amount = 0, currency = "AUD", storePaymentMethod = false, ts, style, debug = false, onPaymentSuccess, onPaymentFailure, onEncryptSuccess, onEncryptFailure, onDebug, } = props;
+    // Build final URL if uri isn't provided
     const finalUri = (0, react_1.useMemo)(() => {
-        if (customUri)
-            return customUri;
-        const params = new URLSearchParams({
-            env: environment,
-            shopperReference,
-            amount: amount.toString(),
-            currency,
-            storePaymentMethod: storePaymentMethod.toString(),
-        });
-        return `${baseUrl}?${params.toString()}`;
-    }, [customUri, environment, shopperReference, amount, currency, storePaymentMethod, baseUrl]);
+        if (uri)
+            return uri;
+        const params = new URLSearchParams();
+        // Required by HTML:
+        params.set("mode", mode);
+        params.set("env", environment);
+        params.set("baseUrl", normalizeBase(lambdaUrl));
+        params.set("currency", currency);
+        // Optional but commonly needed:
+        if (shopperReference)
+            params.set("shopperReference", shopperReference);
+        params.set("storePaymentMethod", safeBoolString(storePaymentMethod));
+        // Pay mode requires amount
+        if (mode === "pay") {
+            params.set("amount", String(amount !== null && amount !== void 0 ? amount : 0));
+        }
+        // cache buster so Expo/WebView refreshes
+        params.set("ts", String(ts !== null && ts !== void 0 ? ts : Date.now()));
+        return `${pageUrl}?${params.toString()}`;
+    }, [
+        uri,
+        pageUrl,
+        lambdaUrl,
+        mode,
+        environment,
+        shopperReference,
+        amount,
+        currency,
+        storePaymentMethod,
+        ts,
+    ]);
     const handleMessage = (0, react_1.useCallback)((event) => {
-        var _a, _b;
+        var _a;
         try {
-            const data = (_b = (_a = event === null || event === void 0 ? void 0 : event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.data;
-            if (!data)
+            const raw = (_a = event === null || event === void 0 ? void 0 : event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data;
+            if (!raw)
                 return;
-            const message = JSON.parse(data);
-            if (message.source !== "PaymentJS")
+            const message = JSON.parse(raw);
+            if (message.source !== "PaymentJS" || !message.event)
                 return;
+            if (message.event === "DEBUG") {
+                if (debug)
+                    console.log("💳 PaymentJS DEBUG:", message.payload);
+                onDebug === null || onDebug === void 0 ? void 0 : onDebug(message.payload);
+                return;
+            }
             switch (message.event) {
                 case "PAYMENT_SUCCESS":
-                    onSuccess(message.payload);
-                    break;
+                    onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(message.payload);
+                    return;
                 case "PAYMENT_ERROR":
                 case "CONFIG_ERROR":
-                    onFailure === null || onFailure === void 0 ? void 0 : onFailure(message.payload);
-                    break;
-                case "DEBUG":
-                    if (debug)
-                        console.log("💳 PaymentJS DEBUG:", message.payload);
-                    onDebug === null || onDebug === void 0 ? void 0 : onDebug(message.payload);
+                    onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure(message.payload);
+                    return;
+                case "ENCRYPT_SUCCESS":
+                    onEncryptSuccess === null || onEncryptSuccess === void 0 ? void 0 : onEncryptSuccess(message.payload);
+                    return;
+                case "ENCRYPT_ERROR":
+                    onEncryptFailure === null || onEncryptFailure === void 0 ? void 0 : onEncryptFailure(message.payload);
                     return;
                 default:
-                    console.warn("Unknown PaymentJS event:", message.event);
+                    if (debug)
+                        console.warn("Unknown PaymentJS event:", message.event);
+                    onDebug === null || onDebug === void 0 ? void 0 : onDebug({ step: "UNKNOWN_EVENT", message });
+                    return;
             }
         }
         catch (err) {
-            console.error("Failed to parse WebView message:", err);
-            onFailure === null || onFailure === void 0 ? void 0 : onFailure({
+            if (debug)
+                console.error("Failed to parse WebView message:", err);
+            onPaymentFailure === null || onPaymentFailure === void 0 ? void 0 : onPaymentFailure({
                 message: "Invalid message from payment WebView",
-                error: err,
+                error: String(err),
             });
         }
-    }, [onSuccess, onFailure, onDebug, debug]);
+    }, [
+        debug,
+        onDebug,
+        onPaymentSuccess,
+        onPaymentFailure,
+        onEncryptSuccess,
+        onEncryptFailure,
+    ]);
+    // Optional: upfront validation to avoid “Invalid config”
+    const configError = (0, react_1.useMemo)(() => {
+        if (!finalUri)
+            return "Missing payment page URL";
+        if (mode === "pay") {
+            if (!shopperReference)
+                return "shopperReference is required in pay mode";
+            if (!amount || amount <= 0)
+                return "amount > 0 is required in pay mode";
+        }
+        if (!lambdaUrl)
+            return "lambdaUrl is required";
+        return "";
+    }, [finalUri, mode, shopperReference, amount, lambdaUrl]);
+    if (configError) {
+        return (react_1.default.createElement(react_native_1.View, { style: [{ flex: 1, justifyContent: "center", padding: 16 }, style] },
+            react_1.default.createElement(react_native_1.Text, { style: { color: "red", textAlign: "center" } }, configError)));
+    }
     return (react_1.default.createElement(react_native_1.View, { style: [{ flex: 1, backgroundColor: "#fff" }, style] },
         react_1.default.createElement(react_native_webview_1.WebView, { source: { uri: finalUri }, javaScriptEnabled: true, domStorageEnabled: true, originWhitelist: ["*"], startInLoadingState: true, renderLoading: () => (react_1.default.createElement(react_native_1.View, { style: { flex: 1, justifyContent: "center", alignItems: "center" } },
-                react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: "#2563eb" }))), onMessage: handleMessage, allowsBackForwardNavigationGestures: true, setSupportMultipleWindows: false })));
-};
-exports.default = PaymentJS;
+                react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large" }))), onMessage: handleMessage, allowsBackForwardNavigationGestures: true, setSupportMultipleWindows: false })));
+}

package/dist/types.d.ts

@@ -1,31 +1,49 @@
-import { StyleProp, ViewStyle } from "react-native";
-export type PaymentJSEvent = "PAYMENT_SUCCESS" | "PAYMENT_ERROR" | "CONFIG_ERROR" | "DEBUG";
-export interface PaymentJSMessage {
-    source: "PaymentJS";
-    event: PaymentJSEvent;
-    payload: any;
+import type { ViewStyle } from "react-native";
+export type PaymentJSMode = "pay" | "encrypt";
+export type PaymentJSEnvironment = "test" | "live";
+export type PaymentJSEvent = "PAYMENT_SUCCESS" | "PAYMENT_ERROR" | "ENCRYPT_SUCCESS" | "ENCRYPT_ERROR" | "CONFIG_ERROR" | "DEBUG";
+export type PaymentJSMessage = {
+    source?: string;
+    event?: PaymentJSEvent;
+    payload?: any;
     timestamp?: string;
-}
-export interface PaymentJSProps {
-    uri?: string;
+};
+export type PaymentJSProps = {
     /**
-     * Called when payment completes successfully
+     * Optional: provide a fully built URL.
+     * If omitted, we auto-build from props.
      */
-    onSuccess: (payload: any) => void;
+    uri?: string;
     /**
-     * Called when payment fails or config error occurs
+     * Hosted HTML page URL (without querystring).
+     * Example: "https://pay.school24.net/payment.html"
      */
-    onFailure?: (payload: any) => void;
-    onDebug?: (payload: any) => void;
+    pageUrl?: string;
     /**
-     * Optional container styling
+     * Lambda baseUrl (passed to the HTML as baseUrl=...)
+     * Example: "https://xxxxx.lambda-url.ap-southeast-2.on.aws"
      */
-    style?: StyleProp<ViewStyle>;
-    environment?: "test" | "live";
+    lambdaUrl?: string;
+    mode?: PaymentJSMode;
+    environment?: PaymentJSEnvironment;
     shopperReference?: string;
+    /** Required for pay mode */
     amount?: number;
     currency?: string;
+    /** If true, ask Adyen to store the card */
     storePaymentMethod?: boolean;
-    baseUrl?: string;
+    /** Extra cache buster */
+    ts?: number;
+    /** React Native style for wrapper container */
+    style?: ViewStyle;
+    /** Debug logs */
     debug?: boolean;
-}
+    onPaymentSuccess?: (result: any) => void;
+    onPaymentFailure?: (err: any) => void;
+    onEncryptSuccess?: (payload: {
+        paymentMethod: any;
+        meta?: any;
+    }) => void;
+    onEncryptFailure?: (err: any) => void;
+    onDebug?: (debug: any) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@school24/paymentjs-rn",
-  "version": "1.4.1",
+  "version": "1.4.5",
   "description": "React Native WebView wrapper for PaymentJS (Adyen)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",