React Native

This document presents the steps for integrating the Geidea payment gateway with your mobile application (app) instrumented with React Native.

Overview

React Native is an open-source JavaScript framework, designed for building apps on multiple platforms like iOS, Android, and web applications, utilising the same code base. The Geidea Online Payments SDK is a wrapper that extends the Geidea Payment Gateway, allowing you to take payments through Geidea. You can easily accept credit card payments and other payments through wallet providers.

Integrating our payment gateway with your React Native code has never been easier. Through the Geidea Online Payments SDK, our payment gateway can seamlessly integrate with just a few lines of code.

Features

The React Native SDK includes the below features

Pre-requisites

You will need a merchant account with Geidea and the following software running on your development environment to integrate your mobile app with the Geidea Online Payments SDK.

❗️

While we make every effort to test software or modules or plugins or SDK updates rigorously, there is no guarantee that a plugin or module or SDK would work seamlessly with your device. So please back up your mobile app before updating any plugins, modules, or SDKs. This helps you restore your website from backup in case you run into unexpected errors.

Software and plugin or module or SDK updates involve programming code changes. The updates may often request upgrades to the development environment or other hosting software.

👍

Sample App Code

We have created a sample app and shared the code here. The code consists of samples for you to use to accelerate your app development.

The SDK is available on the GitHub repository. You can download the latest version of the SDK from here.

Overview

After installing the prerequisites, you can either integrate the plugin in one of the following ways:

• Geidea SDK integration – The SDK hosts the entire UI flow of the transaction and performs all the required API calls. This is similar to a turnkey solution and requires minimal setup. Once your customer initiates a checkout, you call a method to start the payment flow and
  then accept the Order.
• Custom integration – The Merchant app hosts the entire UI flow (payment form, authentication) and performs all the API calls in the transaction by calling the Direct APIs through the SDK.

Step 1 - Installation of the SDK

1. Install the SDK in your React-native mobile application by running the following commands.

npm install --save react-native-webview react-native-vector-icons
    react-native link react-native-webview
    react-native link react-native-vector-icons

2. Import the required libraries into your code

import PaymentModal from 'react_geideapay_sdk/components/PaymentModal';

3. Define a state variable to control the visibility of the payment modal

     state = {
       checkoutVisible: false,
     };

4. Define the following methods

    closePaymentModal() {
       this.setState({checkoutVisible: false});
    }
    onPaymentSuccess(response) {
    	//handle payment success response here
    }
    onPaymentFailure(response) {
    //handle payment error response here
    }

5. Implement the payment widget in your render function as follows:

     render() {
       return 
    <View style={styles.container}>
        {this.renderPaymentModal()}
    </View>;
     }

     renderPaymentModal() {
       const {checkoutVisible} = this.state;
       return (
         <PaymentModal
           amount={200}
           visible={checkoutVisible}
           title="Example title"
           description="This is an example description text"
           currency="EGP"
           callbackUrl="https://callbackUrl.com"
           onRequestClose={this.closePaymentModal}
           publicKey={publicKey}
           apiPassword={apiPassword}
           onPaymentSuccess={this.onPaymentSuccess}
           onPaymentFailure={this.onPaymentFailure}
         />
       );
     }

6. Display the dialog by setting the checkoutVisible state to true as follows

this.setState({checkoutVisible: true});

7. Make sure that your app is ready for stack navigation as shown here https://reactnavigation.org/docs/stack-navigator/ An example of an app with a navigation stack is shared below

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import CheckoutScreen from 'react_geideapay/components/CheckoutScreen';

const Stack = createNativeStackNavigator();
const App = () => {
  return (
	<NavigationContainer>
  	<Stack.Navigator>
    	<Stack.Screen
      	name="Home"
      	component={HomeScreen}
      	options={{title: 'Geidea App'}}
    	/>
    	<Stack.Screen
      	name="CheckoutScreen"
      	component={CheckoutScreen}
      	options={({route}) => ({title: route.params.screenTitle})}
    	/>
  	</Stack.Navigator>
	</NavigationContainer>
  );
};
export default App;

8. Implement a function similar to the following to navigate to the checkout screen.

      showScreenCheckout() {
    	this.props.navigation.push('CheckoutScreen', {
      	amount: 200,
      	screenTitle: 'Checkout',
          title="Example title"
          description="This is an example description text"
      	currency: 'EGP',
      	callbackUrl="https://callbackUrl.com",
      	publicKey: publicKey,
      	apiPassword: apiPassword,
      	successResponse: '',
      	failureResponse: '',
      	backgroundColor: '#fff',
      	cardColor: '#583e9e',
      	previousScreen: 'Home', // name as in the navigation stack	});
      }

When the above method is called, the app navigates to the checkout screen