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

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

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

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

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

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:

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