Home
Docs
geidea

React Native

Overview

The Geidea Payment SDK delivers a seamless and secure payment experience for mobile applications. Built with flexibility and ease of use in mind, our SDK empowers developers to integrate payment functionality with just a few lines of code and maximum UI customization with various presentation modes.

Key Features

Dynamic Payment Methods
Flexible UI & Presentation Options
Native 3D Secure Authentication
Fast Card Scanning
Security & Compliance
Optimized Performance
Multi-language & Localization Support
Smart Error Handling

GDPaymentSDK React Native Integration

A comprehensive guide for integrating the GDPaymentSDK into React Native applications for both iOS and Android platforms.

Integrate the Geidea Payment SDK into your React Native app and run it on Android or iOS.

Prerequisites

Before you start, install the required tools:

  • Install Node.js 18 or later.
  • Install the React Native CLI.
  • Install Android Studio for Android builds.
  • Install Xcode for iOS builds.
  • Install Yarn or NPM.

1. Create a new React Native app

npx @react-native-community/cli init GeideaPaymentDemo
cd GeideaPaymentDemo

2. Install the SDK

yarn add /path/to/geidea-payment-sdk-react-native-0.0.1.tgz

3. Configure Android

3.1 Replace android/build.gradle

Replace the file contents with:

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 35
        ndkVersion = "27.1.12297006"
        kotlinVersion = "1.9.24"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:8.7.3")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
        classpath("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion")
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        flatDir {
            dirs "$rootDir/../node_modules/@geidea/payment-sdk-react-native/android/libs"
        }
    }
}

apply plugin: "com.facebook.react.rootproject"

3.2 Update android/app/build.gradle

Add these dependencies:

dependencies {
    implementation("com.facebook.react:react-android")
    implementation("com.facebook.react:hermes-android")
    implementation("androidx.activity:activity:1.8.0")

    def composeBom = platform("androidx.compose:compose-bom:2025.08.00")
    implementation(composeBom)

    implementation("androidx.compose.material3:material3")
    implementation("androidx.navigation:navigation-compose:2.8.5")
    implementation("androidx.navigation:navigation-runtime-ktx:2.8.5")
    implementation("org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.5")
}

3.3 Create network_security_config.xml

Create android/app/src/main/res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">10.0.2.2</domain>
        <domain includeSubdomains="false">localhost</domain>
    </domain-config>
</network-security-config>

3.4 Update AndroidManifest.xml

Add android:networkSecurityConfig to the <application> tag in android/app/src/main/AndroidManifest.xml:

<application
    android:networkSecurityConfig="@xml/network_security_config"
    ...>

3.5 Add your logo resources

Add the logo that should appear in the SDK:

  • Android: add the resource to android/app/src/main/res/drawable
  • iOS: add the resource to your Xcode project’s Assets catalog

4. Use the SDK in App.tsx

import { payWithGeidea } from '@geidea/payment-sdk-react-native';
import type { GeideaResult } from '@geidea/payment-sdk-react-native';

const primaryColor = '#fcba03';
const secondaryColor = '#03c6fc';
const merchantLogo = 'chalhoub';

async function startPayment() {
  const result: GeideaResult = await payWithGeidea({
    sessionId: 'YOUR_SESSION_ID',
    merchantId: 'YOUR_APPLE_PAY_MERCHANT_ID',
    language: 'en',
    environment: 'prod',
    region: 'egypt',
    primaryColor,
    secondaryColor,
    merchantLogo,
  });

  if (result.status === 'completed') {
    console.log('Payment successful:', result.result);
  } else if (result.status === 'canceled') {
    console.log('Payment canceled');
  }
}

5. Run the app on Android

Start Metro in one terminal:

npx react-native start

Run the Android app in another terminal:

adb reverse tcp:8081 tcp:8081
npx react-native run-android

6. Run the app on iOS

cd ios && pod install && cd ..
npx react-native run-ios

Create a Payment Session (Server-Side)

You can view the entire API reference here.

❗️

Before launching the SDK, you need to create a payment session by calling the Geidea API.

❗️

In order to create session, you’ll need to generate a signature as demonstrated below

Create Signature

  1. Concatenate the string of MerchantPublicKey, OrderAmount, OrderCurrency, MerchantReferenceId, timeStamp.
  2. Amount must be formatted with 2 decimals.
  3. Hash (SHA-256) the above concatenated string by Merchant API Password.
  4. Convert Hashed Value to Base64Str
  5. API Endpoint
POST https://api.merchant.geidea.net/payment-intent/api/v2/direct/session
https://api.ksamerchant.geidea.net/payment-intent/api/v2/direct/session
https://api.geidea.ae/payment-intent/api/v2/direct/session

Updated about 11 hours ago