drexpay-react-native 1.0.0

package/lib/DrexpayCheckout.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface DrexpayCheckoutProps {
+    /** Whether the checkout sheet is visible. */
+    visible: boolean;
+    /** The hosted checkout URL returned by POST /api/payment-links. */
+    checkoutUrl: string;
+    /**
+     * Called when the customer completes payment and is redirected to your
+     * `redirectTo` URL. `reference` is the payment reference — also passed via
+     * your server-side webhook so you can verify independently.
+     */
+    onSuccess: (reference: string) => void;
+    /** Called when the user dismisses the sheet without completing payment. */
+    onClose: () => void;
+    /** Called on WebView or network errors. */
+    onError?: (error: Error) => void;
+}
+export declare function DrexpayCheckout({ visible, checkoutUrl, onSuccess, onClose, onError, }: DrexpayCheckoutProps): React.JSX.Element;

package/lib/DrexpayCheckout.js

@@ -0,0 +1,141 @@
+"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 });
+exports.DrexpayCheckout = DrexpayCheckout;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_webview_1 = require("react-native-webview");
+const DREXPAY_HOSTS = new Set(['drexpay.tech', 'www.drexpay.tech']);
+function isDrexpayUrl(url) {
+    try {
+        const host = new URL(url).hostname;
+        return DREXPAY_HOSTS.has(host);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function extractReference(url) {
+    var _a;
+    try {
+        return (_a = new URL(url).searchParams.get('reference')) !== null && _a !== void 0 ? _a : '';
+    }
+    catch (_b) {
+        return '';
+    }
+}
+function DrexpayCheckout({ visible, checkoutUrl, onSuccess, onClose, onError, }) {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const completedRef = (0, react_1.useRef)(false);
+    const handleNavigationStateChange = (0, react_1.useCallback)((state) => {
+        if (completedRef.current)
+            return;
+        const { url } = state;
+        if (url &&
+            !url.startsWith('about:') &&
+            !url.startsWith('data:') &&
+            !isDrexpayUrl(url)) {
+            completedRef.current = true;
+            onSuccess(extractReference(url));
+        }
+    }, [onSuccess]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        completedRef.current = false;
+        onClose();
+    }, [onClose]);
+    return (<react_native_1.Modal visible={visible} animationType="slide" presentationStyle={react_native_1.Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen'} onRequestClose={handleClose}>
+      <react_native_1.SafeAreaView style={styles.root}>
+        <react_native_1.View style={styles.header}>
+          <react_native_1.View style={styles.headerSpacer}/>
+          <react_native_1.Text style={styles.headerTitle}>Complete Payment</react_native_1.Text>
+          <react_native_1.TouchableOpacity onPress={handleClose} style={styles.closeBtn} hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }} accessibilityLabel="Close checkout">
+            <react_native_1.Text style={styles.closeIcon}>✕</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.webviewWrap}>
+          <react_native_webview_1.WebView source={{ uri: checkoutUrl }} onNavigationStateChange={handleNavigationStateChange} onLoadStart={() => setLoading(true)} onLoadEnd={() => setLoading(false)} onError={(e) => onError === null || onError === void 0 ? void 0 : onError(new Error(e.nativeEvent.description))} javaScriptEnabled domStorageEnabled style={styles.webview}/>
+          {loading && (<react_native_1.View style={styles.loadingOverlay}>
+              <react_native_1.ActivityIndicator size="large" color="#7C3AED"/>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.SafeAreaView>
+    </react_native_1.Modal>);
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingVertical: 14,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E4E4E7',
+    },
+    headerSpacer: {
+        width: 32,
+    },
+    headerTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#09090B',
+        textAlign: 'center',
+    },
+    closeBtn: {
+        width: 32,
+        alignItems: 'flex-end',
+    },
+    closeIcon: {
+        fontSize: 16,
+        color: '#71717A',
+    },
+    webviewWrap: {
+        flex: 1,
+        position: 'relative',
+    },
+    webview: {
+        flex: 1,
+    },
+    loadingOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: '#ffffff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { DrexpayCheckout } from './DrexpayCheckout';
+export type { DrexpayCheckoutProps } from './DrexpayCheckout';

package/lib/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrexpayCheckout = void 0;
+var DrexpayCheckout_1 = require("./DrexpayCheckout");
+Object.defineProperty(exports, "DrexpayCheckout", { enumerable: true, get: function () { return DrexpayCheckout_1.DrexpayCheckout; } });

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "drexpay-react-native",
+  "version": "1.0.0",
+  "description": "React Native SDK for Drexpay payment gateway — open the hosted checkout in a WebView with one component",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "drexpay",
+    "payment",
+    "react-native",
+    "checkout",
+    "nigeria",
+    "webview"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/learnwithalex/drexpay.git",
+    "directory": "sdk/react-native"
+  },
+  "homepage": "https://drexpay.tech/docs#mobile-sdks",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.71.0",
+    "react-native-webview": ">=13.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.73.0",
+    "react": "^18.0.0",
+    "react-native": "^0.73.0",
+    "react-native-webview": "^13.0.0",
+    "typescript": "^5.4.0"
+  }
+}

package/src/DrexpayCheckout.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { WebView, type WebViewNavigation } from 'react-native-webview';
+
+const DREXPAY_HOSTS = new Set(['drexpay.tech', 'www.drexpay.tech']);
+
+function isDrexpayUrl(url: string): boolean {
+  try {
+    const host = new URL(url).hostname;
+    return DREXPAY_HOSTS.has(host);
+  } catch {
+    return false;
+  }
+}
+
+function extractReference(url: string): string {
+  try {
+    return new URL(url).searchParams.get('reference') ?? '';
+  } catch {
+    return '';
+  }
+}
+
+export interface DrexpayCheckoutProps {
+  /** Whether the checkout sheet is visible. */
+  visible: boolean;
+  /** The hosted checkout URL returned by POST /api/payment-links. */
+  checkoutUrl: string;
+  /**
+   * Called when the customer completes payment and is redirected to your
+   * `redirectTo` URL. `reference` is the payment reference — also passed via
+   * your server-side webhook so you can verify independently.
+   */
+  onSuccess: (reference: string) => void;
+  /** Called when the user dismisses the sheet without completing payment. */
+  onClose: () => void;
+  /** Called on WebView or network errors. */
+  onError?: (error: Error) => void;
+}
+
+export function DrexpayCheckout({
+  visible,
+  checkoutUrl,
+  onSuccess,
+  onClose,
+  onError,
+}: DrexpayCheckoutProps) {
+  const [loading, setLoading] = useState(true);
+  const completedRef = useRef(false);
+
+  const handleNavigationStateChange = useCallback(
+    (state: WebViewNavigation) => {
+      if (completedRef.current) return;
+      const { url } = state;
+      if (
+        url &&
+        !url.startsWith('about:') &&
+        !url.startsWith('data:') &&
+        !isDrexpayUrl(url)
+      ) {
+        completedRef.current = true;
+        onSuccess(extractReference(url));
+      }
+    },
+    [onSuccess],
+  );
+
+  const handleClose = useCallback(() => {
+    completedRef.current = false;
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle={Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen'}
+      onRequestClose={handleClose}
+    >
+      <SafeAreaView style={styles.root}>
+        <View style={styles.header}>
+          <View style={styles.headerSpacer} />
+          <Text style={styles.headerTitle}>Complete Payment</Text>
+          <TouchableOpacity
+            onPress={handleClose}
+            style={styles.closeBtn}
+            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+            accessibilityLabel="Close checkout"
+          >
+            <Text style={styles.closeIcon}>✕</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.webviewWrap}>
+          <WebView
+            source={{ uri: checkoutUrl }}
+            onNavigationStateChange={handleNavigationStateChange}
+            onLoadStart={() => setLoading(true)}
+            onLoadEnd={() => setLoading(false)}
+            onError={(e) => onError?.(new Error(e.nativeEvent.description))}
+            javaScriptEnabled
+            domStorageEnabled
+            style={styles.webview}
+          />
+          {loading && (
+            <View style={styles.loadingOverlay}>
+              <ActivityIndicator size="large" color="#7C3AED" />
+            </View>
+          )}
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#E4E4E7',
+  },
+  headerSpacer: {
+    width: 32,
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#09090B',
+    textAlign: 'center',
+  },
+  closeBtn: {
+    width: 32,
+    alignItems: 'flex-end',
+  },
+  closeIcon: {
+    fontSize: 16,
+    color: '#71717A',
+  },
+  webviewWrap: {
+    flex: 1,
+    position: 'relative',
+  },
+  webview: {
+    flex: 1,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DrexpayCheckout } from './DrexpayCheckout';
+export type { DrexpayCheckoutProps } from './DrexpayCheckout';