@school24/paymentjs-rn 1.0.0

package/README.md

@@ -0,0 +1,13 @@
+# @school24/paymentjs-rn
+
+React Native WebView wrapper for PaymentJS (Adyen Web Drop-in).
+
+This library allows you to reuse your existing `payment.js` and
+`react-test.html` inside a React Native app with a clean, native-friendly API.
+
+---
+
+## Installation
+
+```bash
+npm install @school24/paymentjs-rn react-native-webview

package/dist/PaymentJS.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { PaymentJSProps } from "./types";
+declare const PaymentJS: React.FC<PaymentJSProps>;
+export default PaymentJS;

package/dist/PaymentJS.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+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, onSuccess, onFailure, style } = props;
+    const handleMessage = (0, react_1.useCallback)((event) => {
+        var _a, _b;
+        try {
+            // Type guard for WebView events
+            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)
+                return;
+            const message = JSON.parse(data);
+            if (message.source !== "PaymentJS")
+                return;
+            switch (message.event) {
+                case "PAYMENT_SUCCESS":
+                    onSuccess(message.payload);
+                    break;
+                case "PAYMENT_ERROR":
+                case "CONFIG_ERROR":
+                    onFailure === null || onFailure === void 0 ? void 0 : onFailure(message.payload);
+                    break;
+            }
+        }
+        catch (err) {
+            onFailure === null || onFailure === void 0 ? void 0 : onFailure({
+                message: "Invalid message from payment WebView",
+                error: err
+            });
+        }
+    }, [onSuccess, onFailure]);
+    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 }, javaScriptEnabled: true, domStorageEnabled: true, originWhitelist: ["*"], startInLoadingState: true, onMessage: handleMessage, allowsBackForwardNavigationGestures: true, setSupportMultipleWindows: false })));
+};
+exports.default = PaymentJS;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PaymentJS } from "./PaymentJS";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentJS = void 0;
+var PaymentJS_1 = require("./PaymentJS");
+Object.defineProperty(exports, "PaymentJS", { enumerable: true, get: function () { return __importDefault(PaymentJS_1).default; } });
+__exportStar(require("./types"), exports);

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle } from "react-native";
+export type PaymentJSEvent = "PAYMENT_SUCCESS" | "PAYMENT_ERROR" | "CONFIG_ERROR";
+export interface PaymentJSMessage {
+    source: "PaymentJS";
+    event: PaymentJSEvent;
+    payload: any;
+}
+export interface PaymentJSProps {
+    /**
+     * Full URL to react-test.html with query params
+     */
+    uri: string;
+    /**
+     * Called when payment completes successfully
+     */
+    onSuccess: (payload: any) => void;
+    /**
+     * Called when payment fails or config error occurs
+     */
+    onFailure?: (payload: any) => void;
+    /**
+     * Optional container styling
+     */
+    style?: StyleProp<ViewStyle>;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@school24/paymentjs-rn",
+  "version": "1.0.0",
+  "description": "React Native WebView wrapper for PaymentJS (Adyen)",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npx tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "payments",
+    "adyen",
+    "webview",
+    "school24"
+  ],
+  "author": "School24",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-native": ">=0.68",
+    "react-native-webview": ">=11"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-native": "^0.72.8",
+    "typescript": "^5.9.3"
+  }
+}