react-native-payvessel 1.0.0

package/src/PayvesselCheckout.tsx

@@ -0,0 +1,507 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import {
+  View,
+  Modal,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import {
+  PaymentStatus,
+  PayvesselCheckoutProps,
+  TransactionData,
+  PayvesselSuccessResponse,
+  PayvesselErrorResponse,
+} from './types';
+
+const PAYVESSEL_BRAND_COLOR = '#ff6b00';
+const CHECKOUT_URL = 'https://checkout.payvessel.com';
+
+interface InitializePayload {
+  amount: string;
+  currency: string;
+  customer_email: string;
+  customer_name: string;
+  metadata: Record<string, unknown>;
+  customer_phone_number?: string;
+  channels?: string[];
+  reference?: string;
+}
+
+interface ApiResponse {
+  success?: boolean;
+  message?: string;
+  data?: TransactionData;
+}
+
+interface WebViewEventData {
+  event: string;
+  payload?: Record<string, unknown>;
+}
+
+/**
+ * PayvesselCheckout Component
+ * 
+ * A React Native component that displays Payvessel checkout in a WebView modal.
+ * Directly calls the Payvessel API to initialize transactions.
+ * 
+ * @example
+ * ```tsx
+ * <PayvesselCheckout
+ *   visible={showCheckout}
+ *   apiKey="YOUR_API_KEY"
+ *   customerEmail="customer@example.com"
+ *   customerPhoneNumber="08012345678"
+ *   amount="1000"
+ *   currency="NGN"
+ *   customerName="John Doe"
+ *   channels={['BANK_TRANSFER', 'CARD']}
+ *   metadata={{ order_id: '12345' }}
+ *   onSuccess={(response) => console.log('Initialized:', response)}
+ *   onSuccessfulOrder={(response) => console.log('Payment confirmed:', response)}
+ *   onError={(error) => console.log('Error:', error)}
+ *   onClose={() => setShowCheckout(false)}
+ * />
+ * ```
+ */
+const PayvesselCheckout: React.FC<PayvesselCheckoutProps> = ({
+  // Visibility
+  visible = false,
+  
+  // Config
+  apiKey,
+  
+  // Customer details (required)
+  customerEmail,
+  customerPhoneNumber,
+  amount,
+  currency = 'NGN',
+  customerName,
+  
+  // Optional
+  channels = ['BANK_TRANSFER'],
+  metadata,
+  reference,
+  
+  // Callbacks
+  onSuccess,
+  onError,
+  onClose,
+  onSuccessfulOrder,
+  
+  // UI customization
+  showCloseButton = true,
+  closeButtonText = '✕',
+  loadingText = 'Initializing checkout...',
+  headerTitle = 'Checkout',
+  showHeader = true,
+}) => {
+  const webViewRef = useRef<WebView>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isInitializing, setIsInitializing] = useState<boolean>(false);
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [checkoutUrl, setCheckoutUrl] = useState<string | null>(null);
+  const [transactionData, setTransactionData] = useState<TransactionData | null>(null);
+
+  // Get the API base URL based on API key (test or live)
+  const getApiBaseUrl = useCallback((): string => {
+    if (apiKey?.startsWith('PVTESTKEY-')) {
+      return 'https://sandbox.payvessel.com';
+    }
+    return 'https://api.payvessel.com';
+  }, [apiKey]);
+
+  // Initialize the transaction by calling Payvessel API directly
+  const initializeTransaction = useCallback(async (): Promise<void> => {
+    if (!apiKey) {
+      setHasError(true);
+      setErrorMessage('API key is required');
+      onError?.({
+        status: PaymentStatus.FAILED,
+        message: 'API key is required',
+      });
+      return;
+    }
+
+    if (!customerEmail || !amount || !customerName) {
+      setHasError(true);
+      setErrorMessage('Customer email, amount, and name are required');
+      onError?.({
+        status: PaymentStatus.FAILED,
+        message: 'Customer email, amount, and name are required',
+      });
+      return;
+    }
+
+    setIsInitializing(true);
+    setHasError(false);
+    setErrorMessage('');
+
+    try {
+      const baseUrl = getApiBaseUrl();
+      
+      const payload: InitializePayload = {
+        amount: String(amount),
+        currency,
+        customer_email: customerEmail,
+        customer_name: customerName,
+        metadata: metadata || {},
+      };
+
+      // Add optional fields
+      if (customerPhoneNumber) {
+        payload.customer_phone_number = customerPhoneNumber;
+      }
+      if (channels && channels.length > 0) {
+        payload.channels = channels as string[];
+      }
+      if (reference) {
+        payload.reference = reference;
+      }
+
+      const response = await fetch(`${baseUrl}/pms/checkout/initialize/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'api-key': apiKey,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const result: ApiResponse = await response.json();
+
+      if (result?.success === false || !result?.data?.access_code) {
+        throw new Error(result?.message || 'Failed to initialize checkout');
+      }
+
+      const data = result.data;
+
+      // Store transaction data
+      setTransactionData(data);
+      
+      // Call onSuccess callback with transaction initialization response
+      onSuccess?.({
+        status: PaymentStatus.SUCCESS,
+        reference: data.reference,
+        transactionId: data.id,
+        accessCode: data.access_code,
+        data: data,
+      });
+
+      // Set the checkout URL with access code
+      setCheckoutUrl(`${CHECKOUT_URL}/${data.access_code}`);
+      
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Failed to initialize checkout';
+      setHasError(true);
+      setErrorMessage(errorMsg);
+      onError?.({
+        status: PaymentStatus.FAILED,
+        message: errorMsg,
+      });
+    } finally {
+      setIsInitializing(false);
+    }
+  }, [
+    apiKey, 
+    customerEmail, 
+    customerPhoneNumber, 
+    amount, 
+    currency, 
+    customerName, 
+    channels, 
+    metadata, 
+    reference, 
+    getApiBaseUrl, 
+    onSuccess, 
+    onError
+  ]);
+
+  // Handle messages from WebView
+  const handleMessage = useCallback((event: WebViewMessageEvent): void => {
+    try {
+      const data: WebViewEventData = JSON.parse(event.nativeEvent.data);
+      const { event: eventType, payload: eventPayload } = data;
+
+      switch (eventType) {
+        case 'payment_success':
+          onSuccessfulOrder?.({
+            status: PaymentStatus.SUCCESS,
+            reference: transactionData?.reference,
+            transactionId: transactionData?.id,
+            data: eventPayload,
+          });
+          break;
+          
+        case 'payment_failed':
+          onError?.({
+            status: PaymentStatus.FAILED,
+            message: 'Payment failed',
+          });
+          break;
+          
+        case 'payment_closed':
+        case 'checkout_closed':
+          onClose?.();
+          break;
+          
+        default:
+          break;
+      }
+    } catch {
+      // Not a JSON message, ignore
+    }
+  }, [transactionData, onSuccessfulOrder, onError, onClose]);
+
+  // Inject script to capture postMessage events from checkout
+  const injectedJavaScript = `
+    (function() {
+      // Override window.parent.postMessage to capture events
+      const originalPostMessage = window.parent.postMessage;
+      window.parent.postMessage = function(message, targetOrigin) {
+        // Forward to React Native
+        if (window.ReactNativeWebView) {
+          try {
+            const data = typeof message === 'string' ? JSON.parse(message) : message;
+            window.ReactNativeWebView.postMessage(JSON.stringify(data));
+          } catch (e) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({ event: 'message', payload: message }));
+          }
+        }
+        // Call original
+        return originalPostMessage.call(window.parent, message, targetOrigin);
+      };
+
+      // Also listen for message events
+      window.addEventListener('message', function(event) {
+        if (window.ReactNativeWebView) {
+          try {
+            const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+            window.ReactNativeWebView.postMessage(JSON.stringify(data));
+          } catch (e) {}
+        }
+      });
+      
+      true;
+    })();
+  `;
+
+  // Handle close button press
+  const handleClose = useCallback((): void => {
+    onClose?.();
+  }, [onClose]);
+
+  // Initialize transaction when modal becomes visible
+  useEffect(() => {
+    if (visible) {
+      setIsLoading(true);
+      setHasError(false);
+      setErrorMessage('');
+      setCheckoutUrl(null);
+      setTransactionData(null);
+      initializeTransaction();
+    }
+  }, [visible, initializeTransaction]);
+
+  // Update loading state when checkout URL is set
+  useEffect(() => {
+    if (checkoutUrl) {
+      setIsLoading(false);
+    }
+  }, [checkoutUrl]);
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent={false}
+      onRequestClose={handleClose}
+    >
+      <SafeAreaView style={styles.container}>
+        {/* Header */}
+        {showHeader && (
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>{headerTitle}</Text>
+            {showCloseButton && (
+              <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+                <Text style={styles.closeButtonText}>{closeButtonText}</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+
+        {/* Content */}
+        <View style={styles.webviewContainer}>
+          {/* Loading/Initializing State */}
+          {(isLoading || isInitializing) && !hasError && (
+            <View style={styles.loadingOverlay}>
+              <ActivityIndicator size="large" color={PAYVESSEL_BRAND_COLOR} />
+              <Text style={styles.loadingText}>{loadingText}</Text>
+            </View>
+          )}
+
+          {/* WebView - only show when we have checkout URL */}
+          {checkoutUrl && !hasError && (
+            <WebView
+              ref={webViewRef}
+              source={{ uri: checkoutUrl }}
+              style={styles.webview}
+              onMessage={handleMessage}
+              onLoadStart={() => setIsLoading(true)}
+              onLoadEnd={() => setIsLoading(false)}
+              onError={(e) => {
+                setHasError(true);
+                setErrorMessage(e.nativeEvent.description || 'WebView error');
+                setIsLoading(false);
+                onError?.({
+                  status: PaymentStatus.FAILED,
+                  message: e.nativeEvent.description || 'WebView error',
+                });
+              }}
+              injectedJavaScript={injectedJavaScript}
+              javaScriptEnabled={true}
+              domStorageEnabled={true}
+              startInLoadingState={false}
+              scalesPageToFit={true}
+              mixedContentMode="compatibility"
+              allowsInlineMediaPlayback={true}
+              mediaPlaybackRequiresUserAction={false}
+              originWhitelist={['*']}
+            />
+          )}
+
+          {/* Error View */}
+          {hasError && (
+            <View style={styles.errorOverlay}>
+              <Text style={styles.errorIcon}>⚠️</Text>
+              <Text style={styles.errorTitle}>Failed to load checkout</Text>
+              <Text style={styles.errorMessage}>
+                {errorMessage || 'Please try again or contact support.'}
+              </Text>
+              <TouchableOpacity 
+                style={styles.retryButton}
+                onPress={() => {
+                  setHasError(false);
+                  setIsLoading(true);
+                  initializeTransaction();
+                }}
+              >
+                <Text style={styles.retryButtonText}>Retry</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+interface Styles {
+  container: ViewStyle;
+  header: ViewStyle;
+  headerTitle: TextStyle;
+  closeButton: ViewStyle;
+  closeButtonText: TextStyle;
+  webviewContainer: ViewStyle;
+  webview: ViewStyle;
+  loadingOverlay: ViewStyle;
+  loadingText: TextStyle;
+  errorOverlay: ViewStyle;
+  errorIcon: TextStyle;
+  errorTitle: TextStyle;
+  errorMessage: TextStyle;
+  retryButton: ViewStyle;
+  retryButtonText: TextStyle;
+}
+
+const styles = StyleSheet.create<Styles>({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#fff',
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#333',
+  },
+  closeButton: {
+    position: 'absolute',
+    right: 16,
+    padding: 8,
+  },
+  closeButtonText: {
+    fontSize: 20,
+    color: '#666',
+  },
+  webviewContainer: {
+    flex: 1,
+  },
+  webview: {
+    flex: 1,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 14,
+    color: '#666',
+  },
+  errorOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  errorIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  errorTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  errorMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  retryButton: {
+    backgroundColor: PAYVESSEL_BRAND_COLOR,
+    paddingHorizontal: 32,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default PayvesselCheckout;

package/src/index.ts

@@ -0,0 +1,50 @@
+/**
+ * React Native Payvessel SDK
+ *
+ * A React Native package for integrating Payvessel payment gateway.
+ * Supports Bank Transfer and Card payments via WebView checkout.
+ *
+ * @packageDocumentation
+ */
+
+// Main component
+export { default as PayvesselCheckout } from './PayvesselCheckout';
+export { default } from './PayvesselCheckout';
+
+// Hook
+export { usePayvessel, default as usePayvesselHook } from './usePayvessel';
+export type { UsePayvesselOptions, UsePayvesselReturn } from './usePayvessel';
+
+// Types
+export {
+  // Enums
+  PaymentStatus,
+  PaymentChannel,
+
+  // Checkout params
+  type CheckoutParams,
+  type CheckoutConfig,
+  type PaymentInfo,
+
+  // Customer
+  type CustomerInfo,
+
+  // Transaction data
+  type TransactionData,
+
+  // Callbacks
+  type OnSuccessCallback,
+  type OnErrorCallback,
+  type OnCloseCallback,
+  type OnSuccessfulOrderCallback,
+
+  // Props
+  type PayvesselCheckoutProps,
+
+  // API responses
+  type PayvesselSuccessResponse,
+  type PayvesselErrorResponse,
+  type PayvesselCloseResponse,
+  type PayvesselResponse,
+} from './types';
+