xcel-paygate-sdk 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 XCEL
+
+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,225 @@
+# XCEL PayGate SDK
+
+Official React Native SDK for XCEL PayGate payment integration. Accept mobile money and card payments in your React Native apps with just a few lines of code.
+
+[![npm version](https://badge.fury.io/js/@xcelapp%2Fpaygate-sdk.svg)](https://www.npmjs.com/package/@xcelapp/paygate-sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+✅ **Easy Integration** - Get started in 5 minutes with drop-in UI components
+✅ **Multiple Payment Methods** - Mobile Money, Cards, and more
+✅ **TypeScript Support** - Full type safety out of the box
+✅ **Customizable UI** - Pre-built components that match your brand
+✅ **Zero Native Code** - Pure JavaScript/TypeScript SDK
+✅ **Production Ready** - Built-in error handling and loading states
+
+## Supported Countries
+
+🇨🇲 Cameroon | 🇬🇭 Ghana | 🇰🇪 Kenya | 🇳🇬 Nigeria | And more across Africa
+
+## Installation
+
+```bash
+npm install @xcelapp/paygate-sdk react-native-webview
+```
+
+or with yarn:
+
+```bash
+yarn add @xcelapp/paygate-sdk react-native-webview
+```
+
+## Quick Start
+
+### Option 1: All-in-One Component (Easiest)
+
+The quickest way to get started. This component handles everything:
+
+```tsx
+import { XcelPaymentFlow } from '@xcelapp/paygate-sdk';
+
+export default function PaymentScreen() {
+  return (
+    <XcelPaymentFlow
+      config={{
+        merchantId: 'YOUR_MERCHANT_ID',
+        publicKey: 'YOUR_PUBLIC_KEY',
+      }}
+      onPaymentComplete={(result) => {
+        if (result.status === 'SUCCESS') {
+          console.log('Payment successful!', result);
+        } else {
+          console.log('Payment failed', result);
+        }
+      }}
+    />
+  );
+}
+```
+
+### Option 2: Individual Components (More Control)
+
+For more control over the payment flow:
+
+```tsx
+import { XcelPaymentScreen } from '@xcelapp/paygate-sdk';
+import { useRouter } from 'expo-router';
+
+export default function PaymentScreen() {
+  const router = useRouter();
+
+  return (
+    <XcelPaymentScreen
+      config={{
+        merchantId: 'YOUR_MERCHANT_ID',
+        publicKey: 'YOUR_PUBLIC_KEY',
+      }}
+      onPaymentLinkGenerated={(paymentLink, paymentCode) => {
+        router.push({
+          pathname: '/payment-webview',
+          params: { paymentLink, paymentCode },
+        });
+      }}
+      defaultValues={{
+        amount: '1000',
+        email: 'customer@example.com',
+      }}
+    />
+  );
+}
+```
+
+### Option 3: Hooks Only (Maximum Control)
+
+Use just the hooks for complete control over UI:
+
+```tsx
+import { useCheckout } from '@xcelapp/paygate-sdk';
+
+export default function PaymentScreen() {
+  const { initiatePayment, loading } = useCheckout({
+    merchantId: 'YOUR_MERCHANT_ID',
+    publicKey: 'YOUR_PUBLIC_KEY',
+  });
+
+  const handlePay = async () => {
+    const result = await initiatePayment({
+      amount: '1000',
+      currency: 'XAF',
+      customer_email: 'customer@example.com',
+      channel: 'WEB',
+      redirect_url: 'https://yourapp.com/callback',
+    });
+
+    console.log('Payment link:', result.data.payment_link);
+  };
+
+  return (
+    <Button title="Pay Now" onPress={handlePay} disabled={loading} />
+  );
+}
+```
+
+## Get Your API Credentials
+
+1. Visit [XCEL Business Dashboard](https://business.xcelapp.com/)
+2. Sign up or log in
+3. Get your **Merchant ID** and **Public Key** from the dashboard
+
+## Configuration
+
+### Using Provider Pattern (Recommended for multiple screens)
+
+Wrap your app with the provider to share config across all screens:
+
+```tsx
+// app/_layout.tsx
+import { XcelPayGateProvider } from '@xcelapp/paygate-sdk';
+
+export default function RootLayout() {
+  return (
+    <XcelPayGateProvider
+      config={{
+        merchantId: process.env.EXPO_PUBLIC_XCEL_MERCHANT_ID,
+        publicKey: process.env.EXPO_PUBLIC_XCEL_PUBLIC_KEY,
+      }}
+    >
+      {/* Your app */}
+    </XcelPayGateProvider>
+  );
+}
+
+// app/payment.tsx
+// No config needed - components use Provider context automatically!
+import { XcelPaymentScreen } from '@xcelapp/paygate-sdk';
+
+export default function Payment() {
+  return <XcelPaymentScreen />;
+}
+```
+
+### Environment Variables
+
+Create a `.env` file:
+
+```env
+EXPO_PUBLIC_XCEL_MERCHANT_ID=your_merchant_id
+EXPO_PUBLIC_XCEL_PUBLIC_KEY=your_public_key
+```
+
+## Documentation
+
+- 📖 [Complete API Reference](./INTEGRATION_REFERENCE.md) - All endpoints and types
+- 🎨 [Component Usage Guide](./COMPONENT_USAGE.md) - UI components documentation
+- 🚀 [Quick Start Examples](./COMPONENT_USAGE.md#complete-examples)
+
+## Requirements
+
+- React Native >= 0.60.0
+- React >= 16.8.0
+- react-native-webview (for UI components)
+
+## TypeScript Support
+
+The SDK is written in TypeScript and includes full type definitions:
+
+```tsx
+import type {
+  XcelPayGateConfig,
+  TransactionData,
+  PaymentRequest,
+  PaymentResult,
+} from '@xcelapp/paygate-sdk';
+```
+
+## Supported Payment Methods
+
+- 📱 Mobile Money (MTN, Orange, Moov, etc.)
+- 💳 Card Payments (Visa, Mastercard)
+- 🏦 Bank Transfers
+- 💰 XCEL Wallet
+
+## Support
+
+- 📧 Email: support@xcelapp.com
+- 🐛 Issues: [GitHub Issues](https://github.com/xcelapp/xcel-paygate-sdk/issues)
+- 📚 Docs: [GitHub Repository](https://github.com/xcelapp/xcel-paygate-sdk)
+
+## License
+
+MIT © XCEL
+
+## Changelog
+
+### 1.0.0 (2025-01-13)
+
+- Initial release
+- Drop-in UI components
+- TypeScript support
+- Provider pattern
+- Comprehensive documentation
+
+---
+
+**Made with ❤️ by XCEL**

package/dist/api/client.d.ts

@@ -0,0 +1,19 @@
+import type { CreateXcelTransactionRequest, GenerateDynamicLinkRequest, GenerateDynamicLinkResponse, GeneratePaymentLinkRequest, GeneratePaymentLinkResponse, MerchantDetails, MerchantFeesResponse, MerchantProductsResponse, TransactionDataResponse, XcelAccountVerificationResponse, XcelPayGateConfig, XcelTransactionResponse } from "../types";
+export declare class XcelPayGateClient {
+    private config;
+    constructor(config: XcelPayGateConfig);
+    private getHeaders;
+    generatePaymentLink(request: GeneratePaymentLinkRequest): Promise<GeneratePaymentLinkResponse>;
+    getTransactionData(paymentCode: string): Promise<TransactionDataResponse>;
+    getMerchantDetails(merchantId?: string): Promise<MerchantDetails>;
+    getMerchantProducts(merchantId?: string): Promise<MerchantProductsResponse>;
+    getMerchantFees(merchantId?: string): Promise<MerchantFeesResponse>;
+    getMerchantAccounts(merchantId?: string): Promise<any>;
+    verifyXcelAccount(countryCode: string, phoneNumber: string): Promise<XcelAccountVerificationResponse>;
+    generateDynamicLink(request: GenerateDynamicLinkRequest): Promise<GenerateDynamicLinkResponse>;
+    createXcelTransaction(request: CreateXcelTransactionRequest): Promise<XcelTransactionResponse>;
+    getXcelTransactionStatus(merchantId: string, externalReference: string): Promise<XcelTransactionResponse>;
+    getCheckoutUrl(merchantId?: string): string;
+    getFullPaymentUrl(paymentCode: string, merchantId?: string): string;
+}
+//# sourceMappingURL=client.d.ts.map

package/dist/api/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/api/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,4BAA4B,EAC5B,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,EAC1B,2BAA2B,EAC3B,eAAe,EACf,oBAAoB,EACpB,wBAAwB,EACxB,uBAAuB,EACvB,+BAA+B,EAC/B,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,UAAU,CAAC;AAKlB,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAA8B;gBAEhC,MAAM,EAAE,iBAAiB;IAOrC,OAAO,CAAC,UAAU;IAQZ,mBAAmB,CACvB,OAAO,EAAE,0BAA0B,GAClC,OAAO,CAAC,2BAA2B,CAAC;IAqDjC,kBAAkB,CACtB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,uBAAuB,CAAC;IAsB7B,kBAAkB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC;IAuBjE,mBAAmB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,wBAAwB,CAAC;IAoC3E,eAAe,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,oBAAoB,CAAC;IAqBnE,mBAAmB,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IAuBtD,iBAAiB,CACrB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,+BAA+B,CAAC;IAoBrC,mBAAmB,CACvB,OAAO,EAAE,0BAA0B,GAClC,OAAO,CAAC,2BAA2B,CAAC;IAuBjC,qBAAqB,CACzB,OAAO,EAAE,4BAA4B,GACpC,OAAO,CAAC,uBAAuB,CAAC;IAuB7B,wBAAwB,CAC5B,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,MAAM,GACxB,OAAO,CAAC,uBAAuB,CAAC;IAsBnC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;IAK3C,iBAAiB,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;CAIpE"}

package/dist/api/client.js

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XcelPayGateClient = void 0;
+const DEFAULT_BASE_URL = "https://api.xcelapp.com";
+const PAYGATE_BASE_URL = "https://paygate.xcelapp.com";
+class XcelPayGateClient {
+    constructor(config) {
+        this.config = {
+            ...config,
+            baseUrl: config.baseUrl || DEFAULT_BASE_URL,
+        };
+    }
+    getHeaders() {
+        return {
+            "Content-Type": "application/json",
+            "x-merchant-id": this.config.merchantId,
+            "x-public-key": this.config.publicKey,
+        };
+    }
+    async generatePaymentLink(request) {
+        const headers = this.getHeaders();
+        const url = `${this.config.baseUrl}/transactions-service/paygate/generate-payment-link`;
+        console.log('=== [XcelPayGate] Generate Payment Link Request ===');
+        console.log('URL:', url);
+        console.log('Headers:', JSON.stringify(headers, null, 2));
+        console.log('Payload:', JSON.stringify(request, null, 2));
+        const response = await fetch(url, {
+            method: "POST",
+            headers,
+            body: JSON.stringify(request),
+        });
+        console.log('=== [XcelPayGate] Generate Payment Link Response ===');
+        console.log('Status Code:', response.status);
+        console.log('Status Text:', response.statusText);
+        console.log('Response Headers:', JSON.stringify(Object.fromEntries(response.headers.entries()), null, 2));
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.log('Error Response Body:', errorText);
+            let errorMessage = `Failed to generate payment link: ${response.statusText}`;
+            try {
+                const errorData = JSON.parse(errorText);
+                console.log('Parsed Error Data:', JSON.stringify(errorData, null, 2));
+                errorMessage =
+                    errorData.message || errorData.status_reason || errorMessage;
+            }
+            catch {
+                errorMessage = errorText || errorMessage;
+            }
+            throw new Error(errorMessage);
+        }
+        const responseData = await response.json();
+        console.log('Success Response Body:', JSON.stringify(responseData, null, 2));
+        if (responseData.data) {
+            console.log('--- Response Data Details ---');
+            console.log('Transaction ID:', responseData.data.transaction_id);
+            console.log('Payment Code:', responseData.data.payment_code);
+            console.log('Payment Link:', responseData.data.payment_link);
+            console.log('Amount:', responseData.data.amount);
+            console.log('Currency:', responseData.data.currency);
+            console.log('Expires At:', responseData.data.expires_at);
+        }
+        console.log('=== End Generate Payment Link Response ===\n');
+        return responseData;
+    }
+    async getTransactionData(paymentCode) {
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Transaction Data - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Transaction Data - Payment Code:', paymentCode);
+        const response = await fetch(`${this.config.baseUrl}/transactions-service/paygate/get-transaction-data/${paymentCode}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get transaction data: ${response.statusText}`);
+        }
+        const responseData = await response.json();
+        console.log('[XcelPayGate] Get Transaction Data - Response:', JSON.stringify(responseData, null, 2));
+        return responseData;
+    }
+    async getMerchantDetails(merchantId) {
+        const id = merchantId || this.config.merchantId;
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Merchant Details - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Merchant Details - Merchant ID:', id);
+        const response = await fetch(`${this.config.baseUrl}/business-api/merchant/details/${id}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get merchant details: ${response.statusText}`);
+        }
+        const responseData = await response.json();
+        console.log('[XcelPayGate] Get Merchant Details - Response:', JSON.stringify(responseData, null, 2));
+        return responseData;
+    }
+    async getMerchantProducts(merchantId) {
+        var _a;
+        const id = merchantId || this.config.merchantId;
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Merchant Products - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Merchant Products - Merchant ID:', id);
+        const response = await fetch(`${this.config.baseUrl}/business-api/merchant/products/${id}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get merchant products: ${response.statusText}`);
+        }
+        const responseData = await response.json();
+        console.log('[XcelPayGate] Get Merchant Products - Response:', JSON.stringify(responseData, null, 2));
+        if (((_a = responseData.data) === null || _a === void 0 ? void 0 : _a.data) && Array.isArray(responseData.data.data)) {
+            console.log('--- Merchant Products ---');
+            responseData.data.data.forEach((product, index) => {
+                console.log(`Product ${index + 1}:`);
+                console.log('  Product ID:', product.product_id);
+                console.log('  Product Name:', product.name);
+                console.log('  Active:', product.active.status);
+                console.log('  Web Enabled:', product.web);
+                console.log('  Payment Code:', product.payment_code);
+            });
+        }
+        return responseData;
+    }
+    async getMerchantFees(merchantId) {
+        const id = merchantId || this.config.merchantId;
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Merchant Fees - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Merchant Fees - Merchant ID:', id);
+        const response = await fetch(`${this.config.baseUrl}/transactions-service/merchant/charge-customer/${id}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get merchant fees: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getMerchantAccounts(merchantId) {
+        const id = merchantId || this.config.merchantId;
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Merchant Accounts - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Merchant Accounts - Merchant ID:', id);
+        const response = await fetch(`${this.config.baseUrl}/business-api/merchant/pos/${id}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get merchant accounts: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async verifyXcelAccount(countryCode, phoneNumber) {
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Verify Xcel Account - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Verify Xcel Account - Country Code:', countryCode, 'Phone Number:', phoneNumber);
+        const response = await fetch(`${this.config.baseUrl}/xas/v1/accounts/users/${countryCode}/${phoneNumber}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to verify XCEL account: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async generateDynamicLink(request) {
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Generate Dynamic Link - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Generate Dynamic Link - Payload:', JSON.stringify(request, null, 2));
+        const response = await fetch(`${this.config.baseUrl}/esa/otp/generate/dynamic-link`, {
+            method: "POST",
+            headers,
+            body: JSON.stringify(request),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to generate dynamic link: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async createXcelTransaction(request) {
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Create Xcel Transaction - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Create Xcel Transaction - Payload:', JSON.stringify(request, null, 2));
+        const response = await fetch(`${this.config.baseUrl}/xas/v1/pos/create_transaction`, {
+            method: "POST",
+            headers,
+            body: JSON.stringify(request),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to create XCEL transaction: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    async getXcelTransactionStatus(merchantId, externalReference) {
+        const headers = this.getHeaders();
+        console.log('[XcelPayGate] Get Xcel Transaction Status - Headers:', JSON.stringify(headers, null, 2));
+        console.log('[XcelPayGate] Get Xcel Transaction Status - Merchant ID:', merchantId, 'External Reference:', externalReference);
+        const response = await fetch(`${this.config.baseUrl}/xas/v1/pos/transaction/${merchantId}/${externalReference}`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to get transaction status: ${response.statusText}`);
+        }
+        return response.json();
+    }
+    getCheckoutUrl(merchantId) {
+        const id = merchantId || this.config.merchantId;
+        return `${PAYGATE_BASE_URL}/pay/${id}`;
+    }
+    getFullPaymentUrl(paymentCode, merchantId) {
+        const checkoutUrl = this.getCheckoutUrl(merchantId);
+        return `${checkoutUrl}?code=${paymentCode}`;
+    }
+}
+exports.XcelPayGateClient = XcelPayGateClient;

package/dist/components/XcelPaymentFlow.d.ts

@@ -0,0 +1,50 @@
+/**
+ * XcelPaymentFlow - Complete Payment Flow Component
+ *
+ * All-in-one component that handles:
+ * - Payment form UI
+ * - WebView navigation
+ * - Payment completion
+ * - Receipt display
+ *
+ * Just drop this in your app and you're done!
+ *
+ * @example
+ * ```tsx
+ * import { XcelPaymentFlow } from '@xcelapp/paygate-sdk';
+ *
+ * export default function App() {
+ *   return (
+ *     <XcelPaymentFlow
+ *       config={{
+ *         merchantId: 'your-merchant-id',
+ *         publicKey: 'your-public-key',
+ *       }}
+ *       onPaymentComplete={(result) => {
+ *         console.log('Payment done!', result);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+import React from 'react';
+import { XcelPaymentScreenProps } from './XcelPaymentScreen';
+import { PaymentResult } from './XcelPaymentWebView';
+import type { XcelPayGateConfig } from '../types';
+export interface XcelPaymentFlowProps {
+    /** SDK Configuration */
+    config?: XcelPayGateConfig;
+    /** Called when payment completes (success/fail) */
+    onPaymentComplete?: (result: PaymentResult) => void;
+    /** Called when payment is cancelled */
+    onCancel?: () => void;
+    /** Pass through props to XcelPaymentScreen */
+    screenProps?: Partial<XcelPaymentScreenProps>;
+    /** Show receipt screen (implement your own or use default) */
+    renderReceipt?: (result: PaymentResult) => React.ReactNode;
+    /** Use modal for WebView (default: true) */
+    useModal?: boolean;
+}
+export declare function XcelPaymentFlow({ config, onPaymentComplete, onCancel, screenProps, renderReceipt, useModal, }: XcelPaymentFlowProps): React.JSX.Element;
+//# sourceMappingURL=XcelPaymentFlow.d.ts.map

package/dist/components/XcelPaymentFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XcelPaymentFlow.d.ts","sourceRoot":"","sources":["../../src/components/XcelPaymentFlow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAsB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,wBAAwB;IACxB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAEpD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAE9C,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;IAE3D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,WAAgB,EAChB,aAAa,EACb,QAAe,GAChB,EAAE,oBAAoB,qBA+EtB"}

package/dist/components/XcelPaymentFlow.js

@@ -0,0 +1,125 @@
+"use strict";
+/**
+ * XcelPaymentFlow - Complete Payment Flow Component
+ *
+ * All-in-one component that handles:
+ * - Payment form UI
+ * - WebView navigation
+ * - Payment completion
+ * - Receipt display
+ *
+ * Just drop this in your app and you're done!
+ *
+ * @example
+ * ```tsx
+ * import { XcelPaymentFlow } from '@xcelapp/paygate-sdk';
+ *
+ * export default function App() {
+ *   return (
+ *     <XcelPaymentFlow
+ *       config={{
+ *         merchantId: 'your-merchant-id',
+ *         publicKey: 'your-public-key',
+ *       }}
+ *       onPaymentComplete={(result) => {
+ *         console.log('Payment done!', result);
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+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.XcelPaymentFlow = XcelPaymentFlow;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const XcelPaymentScreen_1 = require("./XcelPaymentScreen");
+const XcelPaymentWebView_1 = require("./XcelPaymentWebView");
+function XcelPaymentFlow({ config, onPaymentComplete, onCancel, screenProps = {}, renderReceipt, useModal = true, }) {
+    const [paymentLink, setPaymentLink] = (0, react_1.useState)(null);
+    const [paymentCode, setPaymentCode] = (0, react_1.useState)(null);
+    const [showWebView, setShowWebView] = (0, react_1.useState)(false);
+    const [paymentResult, setPaymentResult] = (0, react_1.useState)(null);
+    const handlePaymentLinkGenerated = (link, code) => {
+        setPaymentLink(link);
+        setPaymentCode(code);
+        setShowWebView(true);
+    };
+    const handleSuccess = (result) => {
+        setPaymentResult(result);
+        setShowWebView(false);
+        onPaymentComplete === null || onPaymentComplete === void 0 ? void 0 : onPaymentComplete(result);
+    };
+    const handleFailure = (result) => {
+        setPaymentResult(result);
+        setShowWebView(false);
+        onPaymentComplete === null || onPaymentComplete === void 0 ? void 0 : onPaymentComplete(result);
+    };
+    const handlePending = (result) => {
+        setPaymentResult(result);
+        setShowWebView(false);
+        onPaymentComplete === null || onPaymentComplete === void 0 ? void 0 : onPaymentComplete(result);
+    };
+    const handleCancelWebView = () => {
+        setShowWebView(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    // Show receipt if available
+    if (paymentResult && renderReceipt) {
+        return <>{renderReceipt(paymentResult)}</>;
+    }
+    const webViewContent = paymentLink && (<XcelPaymentWebView_1.XcelPaymentWebView paymentLink={paymentLink} paymentCode={paymentCode || undefined} onSuccess={handleSuccess} onFailure={handleFailure} onPending={handlePending} onCancel={handleCancelWebView}/>);
+    return (<react_native_1.View style={styles.container}>
+      {/* Payment Form */}
+      <XcelPaymentScreen_1.XcelPaymentScreen config={config} onPaymentLinkGenerated={handlePaymentLinkGenerated} {...screenProps}/>
+
+      {/* WebView Modal or Inline */}
+      {showWebView && (useModal ? (<react_native_1.Modal visible={showWebView} animationType="slide" presentationStyle="fullScreen" onRequestClose={handleCancelWebView}>
+            <react_native_1.SafeAreaView style={styles.modalContainer}>
+              {webViewContent}
+            </react_native_1.SafeAreaView>
+          </react_native_1.Modal>) : (webViewContent))}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+});