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.

Geidea Payment SDK — React Native Integration Guide

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 4 days ago