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
Feature | Comments |
---|---|
Card Payments - Geidea Hosted Form | |
Card Payments - Merchant Hosted Form | Merchants will need to be PCI-DSS certified |
Hosted Payment Page Solution | |
Card Payments with Tokenization |
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.
Software | Version |
---|---|
Android | 6.0.2 or greater |
React Native | > = 0.63 up to 0.68 |
Geidea Online Payments React Native SDK | 6.1.0 |
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
- 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
- Import the required libraries into your code
import PaymentModal from 'react_geideapay_sdk/components/PaymentModal';
- Define a state variable to control the visibility of the payment modal
state = {
checkoutVisible: false,
};
- Define the following methods
closePaymentModal() {
this.setState({checkoutVisible: false});
}
onPaymentSuccess(response) {
//handle payment success response here
}
onPaymentFailure(response) {
//handle payment error response here
}
- 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}
/>
);
}
- Display the dialog by setting the
checkoutVisible
state to true as follows
this.setState({checkoutVisible: true});
- 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;
- 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
Updated 8 days ago