react-native-payvessel 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nex Panther Technologies Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,243 @@
+# React Native Payvessel
+
+A React Native SDK for integrating Payvessel Payment Gateway into your mobile app.
+Built with TypeScript for type safety and similar API to the [npm package](https://www.npmjs.com/package/payvessel-checkout).
+
+## Features
+
+- 🚀 **Simple API** - Similar to the npm package `payvessel-checkout`
+- 💳 **Multiple Channels** - Bank Transfer and Card payments
+- 📱 **Modal Checkout** - Full-screen WebView modal
+- 🔄 **Callbacks** - onSuccess, onError, onClose support
+- 🪝 **React Hook** - `usePayvessel` hook for easy state management
+- 📝 **TypeScript** - Full TypeScript support with type definitions
+
+## Installation
+
+```bash
+npm install react-native-payvessel react-native-webview
+# or
+yarn add react-native-payvessel react-native-webview
+```
+
+### iOS Setup
+
+```bash
+cd ios && pod install
+```
+
+### Android Setup
+
+No additional setup required.
+
+## Usage
+
+### Basic Usage with Component
+
+```tsx
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import PayvesselCheckout from 'react-native-payvessel';
+
+const App = () => {
+  const [showCheckout, setShowCheckout] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button 
+        title="Pay with Payvessel" 
+        onPress={() => setShowCheckout(true)} 
+      />
+
+      <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={(result) => {
+          console.log('Payment successful:', result);
+          setShowCheckout(false);
+        }}
+        onError={(error) => {
+          console.log('Payment error:', error);
+        }}
+        onClose={() => {
+          console.log('Checkout closed');
+          setShowCheckout(false);
+        }}
+      />
+    </View>
+  );
+};
+
+export default App;
+```
+
+### Using the Hook
+
+```tsx
+import React from 'react';
+import { View, Button } from 'react-native';
+import { PayvesselCheckout, usePayvessel } from 'react-native-payvessel';
+
+const App = () => {
+  const { openCheckout, checkoutProps } = usePayvessel({
+    apiKey: 'YOUR_API_KEY',
+    onSuccess: (result) => {
+      console.log('Payment successful:', result);
+    },
+    onError: (error) => {
+      console.log('Payment error:', error);
+    },
+    onClose: () => {
+      console.log('Checkout closed');
+    },
+  });
+
+  const handlePayment = () => {
+    openCheckout({
+      email: 'customer@example.com',
+      phoneNumber: '08012345678',
+      amount: 1000,
+      currency: 'NGN',
+      name: 'John Doe',
+      channels: ['BANK_TRANSFER', 'CARD'],
+      metadata: { order_id: '12345' },
+    });
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Pay with Payvessel" onPress={handlePayment} />
+      {checkoutProps && <PayvesselCheckout {...checkoutProps} />}
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+### PayvesselCheckout
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `visible` | boolean | ✅ | Whether the checkout modal is visible |
+| `apiKey` | string | ✅ | Your Payvessel API key |
+| `customerEmail` | string | ✅ | Customer's email |
+| `customerPhoneNumber` | string | ✅ | Customer's phone number |
+| `amount` | string | ✅ | Amount to charge (e.g., "1000") |
+| `currency` | string | ❌ | Currency code (default: "NGN") |
+| `customerName` | string | ✅ | Customer's full name |
+| `channels` | string[] | ❌ | Payment channels (default: ["BANK_TRANSFER"]) |
+| `metadata` | object | ❌ | Custom metadata |
+| `reference` | string | ❌ | Unique transaction reference |
+| `redirectUrl` | string | ❌ | URL to redirect after payment |
+| `onSuccess` | function | ❌ | Called on successful payment |
+| `onError` | function | ❌ | Called on payment error |
+| `onClose` | function | ❌ | Called when checkout is closed |
+| `showHeader` | boolean | ❌ | Show header (default: true) |
+| `headerTitle` | string | ❌ | Header title (default: "Checkout") |
+
+### usePayvessel Hook
+
+```typescript
+const {
+  isVisible,      // boolean - checkout visibility
+  isLoading,      // boolean - loading state
+  error,          // string | null - error message
+  transactionData, // TransactionData | null - transaction data
+  openCheckout,   // (params: CheckoutParams) => void - open checkout
+  closeCheckout,  // () => void - close checkout
+  resetError,     // () => void - reset error state
+  checkoutProps,  // CheckoutProps | null - props to spread on component
+} = usePayvessel({
+  apiKey: 'YOUR_API_KEY',
+  onSuccess: (result) => {},
+  onError: (error) => {},
+  onClose: () => {},
+});
+```
+
+## Types
+
+```typescript
+import { 
+  PaymentStatus, 
+  PaymentChannel,
+  CheckoutParams,
+  PayvesselSuccessResponse,
+  PayvesselErrorResponse,
+} from 'react-native-payvessel';
+
+// Payment Status Enum
+enum PaymentStatus {
+  SUCCESS = 'success',
+  FAILED = 'failed',
+  CANCELLED = 'cancelled',
+  PENDING = 'pending',
+}
+
+// Payment Channel Enum
+enum PaymentChannel {
+  BANK_TRANSFER = 'BANK_TRANSFER',
+  CARD = 'CARD',
+}
+```
+
+## Payment Channels
+
+```typescript
+import { PaymentChannel } from 'react-native-payvessel';
+
+// Use in channels prop
+<PayvesselCheckout
+  channels={[PaymentChannel.BANK_TRANSFER, PaymentChannel.CARD]}
+  // ... other props
+/>
+```
+
+## Result Objects
+
+```typescript
+// Success Response
+interface PayvesselSuccessResponse {
+  status: 'success';
+  reference?: string;
+  transactionId?: string;
+  accessCode?: string;
+  paymentId?: string;
+  data?: TransactionData;
+}
+
+// Error Response
+interface PayvesselErrorResponse {
+  status: 'failed';
+  message: string;
+  code?: string;
+}
+```
+
+## Comparison with npm Package
+
+| npm Package | React Native SDK |
+|-------------|------------------|
+| `Checkout({ api_key })` | `<PayvesselCheckout apiKey="..." />` |
+| `initializeCheckout({ ... })` | Props on component |
+| `onSuccess` | `onSuccess` prop |
+| `onError` | `onError` prop |
+| `onClose` | `onClose` prop |
+
+## Example App
+
+See the [example](example/) directory for a complete sample app.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.

package/lib/PayvesselCheckout.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PayvesselCheckoutProps } from './types';
+/**
+ * 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)}
+ * />
+ * ```
+ */
+declare const PayvesselCheckout: React.FC<PayvesselCheckoutProps>;
+export default PayvesselCheckout;
+//# sourceMappingURL=PayvesselCheckout.d.ts.map

package/lib/PayvesselCheckout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayvesselCheckout.d.ts","sourceRoot":"","sources":["../src/PayvesselCheckout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAaxE,OAAO,EAEL,sBAAsB,EAIvB,MAAM,SAAS,CAAC;AA2BjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6UvD,CAAC;AAsGF,eAAe,iBAAiB,CAAC"}

package/lib/PayvesselCheckout.js

@@ -0,0 +1,387 @@
+"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 types_1 = require("./types");
+const PAYVESSEL_BRAND_COLOR = '#ff6b00';
+const CHECKOUT_URL = 'https://checkout.payvessel.com';
+/**
+ * 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 = ({ 
+// 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 = (0, react_1.useRef)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isInitializing, setIsInitializing] = (0, react_1.useState)(false);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [checkoutUrl, setCheckoutUrl] = (0, react_1.useState)(null);
+    const [transactionData, setTransactionData] = (0, react_1.useState)(null);
+    // Get the API base URL based on API key (test or live)
+    const getApiBaseUrl = (0, react_1.useCallback)(() => {
+        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 = (0, react_1.useCallback)(async () => {
+        if (!apiKey) {
+            setHasError(true);
+            setErrorMessage('API key is required');
+            onError?.({
+                status: types_1.PaymentStatus.FAILED,
+                message: 'API key is required',
+            });
+            return;
+        }
+        if (!customerEmail || !amount || !customerName) {
+            setHasError(true);
+            setErrorMessage('Customer email, amount, and name are required');
+            onError?.({
+                status: types_1.PaymentStatus.FAILED,
+                message: 'Customer email, amount, and name are required',
+            });
+            return;
+        }
+        setIsInitializing(true);
+        setHasError(false);
+        setErrorMessage('');
+        try {
+            const baseUrl = getApiBaseUrl();
+            const payload = {
+                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;
+            }
+            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 = 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: types_1.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: types_1.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 = (0, react_1.useCallback)((event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            const { event: eventType, payload: eventPayload } = data;
+            switch (eventType) {
+                case 'payment_success':
+                    onSuccessfulOrder?.({
+                        status: types_1.PaymentStatus.SUCCESS,
+                        reference: transactionData?.reference,
+                        transactionId: transactionData?.id,
+                        data: eventPayload,
+                    });
+                    break;
+                case 'payment_failed':
+                    onError?.({
+                        status: types_1.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 = (0, react_1.useCallback)(() => {
+        onClose?.();
+    }, [onClose]);
+    // Initialize transaction when modal becomes visible
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setIsLoading(true);
+            setHasError(false);
+            setErrorMessage('');
+            setCheckoutUrl(null);
+            setTransactionData(null);
+            initializeTransaction();
+        }
+    }, [visible, initializeTransaction]);
+    // Update loading state when checkout URL is set
+    (0, react_1.useEffect)(() => {
+        if (checkoutUrl) {
+            setIsLoading(false);
+        }
+    }, [checkoutUrl]);
+    if (!visible)
+        return null;
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, animationType: "slide", transparent: false, onRequestClose: handleClose },
+        react_1.default.createElement(react_native_1.SafeAreaView, { style: styles.container },
+            showHeader && (react_1.default.createElement(react_native_1.View, { style: styles.header },
+                react_1.default.createElement(react_native_1.Text, { style: styles.headerTitle }, headerTitle),
+                showCloseButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handleClose, style: styles.closeButton },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.closeButtonText }, closeButtonText))))),
+            react_1.default.createElement(react_native_1.View, { style: styles.webviewContainer },
+                (isLoading || isInitializing) && !hasError && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay },
+                    react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: PAYVESSEL_BRAND_COLOR }),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, loadingText))),
+                checkoutUrl && !hasError && (react_1.default.createElement(react_native_webview_1.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: types_1.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: ['*'] })),
+                hasError && (react_1.default.createElement(react_native_1.View, { style: styles.errorOverlay },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.errorIcon }, "\u26A0\uFE0F"),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.errorTitle }, "Failed to load checkout"),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.errorMessage }, errorMessage || 'Please try again or contact support.'),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.retryButton, onPress: () => {
+                            setHasError(false);
+                            setIsLoading(true);
+                            initializeTransaction();
+                        } },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.retryButtonText }, "Retry"))))))));
+};
+const styles = react_native_1.StyleSheet.create({
+    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: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 14,
+        color: '#666',
+    },
+    errorOverlay: {
+        ...react_native_1.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',
+    },
+});
+exports.default = PayvesselCheckout;
+//# sourceMappingURL=PayvesselCheckout.js.map