@abdelrahman.rabie/payment-sdk-react-native/README.md

React Native SDK for payment processing with E_API and E_LINKS support

# Payment SDK React Native

A comprehensive React Native SDK for payment processing with E_API and E_LINKS support, including Apple Pay and Google Pay integration.

## Features

- 🚀 Easy integration with React Native apps
- 💳 Support for multiple payment methods (Visa, Mastercard, Apple Pay, Google Pay, KNET)
- 🔄 E_API and E_LINKS payment products
- 🍎 Apple Pay merchant validation
- 🎣 React hooks for seamless state management
- 📱 TypeScript support with full type definitions
- 🌍 Multi-language support (Arabic/English)

## Installation

```bash
npm install @abdelrahman.rabie/payment-sdk-react-native
# or
yarn add @abdelrahman.rabie/payment-sdk-react-native

For iOS projects using CocoaPods:

```bash
cd ios && pod install
```

## Quick Start

### 1. Initialize the SDK

```typescript
import { PaymentSDK } from "payment-sdk-react-native";

const sdk = new PaymentSDK({
  baseURL: "https://your-payment-api.com",
  paymentPageApiToken: "your-api-token",
  paymentCoreURL: "https://your-payment-core-api.com", // optional
});
```

### 2. Using React Hooks

```typescript
import React from "react";
import { View, Button, Text } from "react-native";
import {
  usePayment,
  EPaymentProduct,
  EPaymentMethods,
  ELanguages,
} from "payment-sdk-react-native";

const PaymentScreen = () => {
  const { loading, error, paymentInfo, executePayment, initializePayment } =
    usePayment({ sdk });

  const handleInitialize = async () => {
    await initializePayment(EPaymentProduct.E_API, "your-payment-token");
  };

  const handlePayment = async () => {
    await executePayment(EPaymentProduct.E_API, "your-payment-token", {
      paymentMethod: EPaymentMethods.VISA,
      language: ELanguages.EN,
    });
  };

  return (
    <View>
      <Button title="Initialize Payment" onPress={handleInitialize} />
      <Button
        title="Pay with Visa"
        onPress={handlePayment}
        disabled={loading}
      />
      {error && <Text style={{ color: "red" }}>{error}</Text>}
      {paymentInfo && <Text>Amount: {paymentInfo.data.amount.value}</Text>}
    </View>
  );
};
```

### 3. Apple Pay Integration

```typescript
import { useApplePay } from "payment-sdk-react-native";

const ApplePayComponent = () => {
  const { loading, error, validateMerchant } = useApplePay({ sdk });

  const handleApplePayValidation = async (validationURL: string) => {
    await validateMerchant(validationURL);
  };

  // Use with Apple Pay button implementation
};
```

## API Reference

### PaymentSDK

Main SDK class for payment operations.

#### Methods

- `initializePayment(product, paymentToken)` - Get payment information
- `executePayment(product, paymentToken, payload)` - Process payment
- `getPaymentStatus(product, paymentToken)` - Get payment status
- `validateApplePayMerchant(validationURL)` - Validate Apple Pay merchant

### Hooks

#### usePayment

React hook for payment operations.

**Returns:**

- `loading` - Loading state
- `error` - Error message
- `paymentInfo` - Payment information
- `paymentResult` - Payment result
- `initializePayment()` - Initialize payment function
- `executePayment()` - Execute payment function
- `getPaymentStatus()` - Get status function

#### useApplePay

React hook for Apple Pay operations.

**Returns:**

- `loading` - Loading state
- `error` - Error message
- `applePaySession` - Apple Pay session data
- `validateMerchant()` - Validate merchant function

## Payment Products

- `EPaymentProduct.E_API` - API-based payments
- `EPaymentProduct.E_LINKS` - Link-based payments

## Payment Methods

- `EPaymentMethods.VISA`
- `EPaymentMethods.MASTERCARD`
- `EPaymentMethods.APPLE_PAY`
- `EPaymentMethods.GOOGLE_PAY`
- `EPaymentMethods.KNET`
- And more...

## Error Handling

The SDK provides comprehensive error handling:

```typescript
try {
  const result = await sdk.executePayment(product, token, payload);
  if (result.success) {
    // Payment successful
    console.log("Payment completed:", result.data);
  } else {
    // Payment failed
    console.error("Payment failed:", result.error);
  }
} catch (error) {
  console.error("SDK error:", error.message);
}
```

## TypeScript Support

The SDK is fully typed with TypeScript. All interfaces and types are exported for use in your application.

## License

MIT

# New SDK Package Structure

payment-sdk-react-native/
├── src/
│ ├── core/PaymentSDK.ts # Main SDK class
│ ├── services/
│ │ ├── httpClient.ts # HTTP client for API calls
│ │ └── paymentService.ts # Payment logic extracted from your app
│ ├── hooks/
│ │ ├── usePayment.ts # React hook for payments
│ │ └── useApplePay.ts # React hook for Apple Pay
│ ├── types/payment.types.ts # All TypeScript interfaces
│ ├── constants/endpoints.ts # API endpoints and regex
│ └── index.ts # Main exports
├── example/App.tsx # Complete usage example
├── package.json # NPM package config
├── tsconfig.json # TypeScript config
└── README.md # Documentation