Installation Guide

Step-by-step guide to installing and configuring the React Native ePay SDK.

Installation Guide

Follow these steps to install and configure the @guiddini/react-native-epay package in your React Native project.

1. Install the Package

Run the following command in your project directory:

npm install @guiddini/react-native-epay

2. Install Dependencies

The SDK requires react-native-webview for handling payments. Install it using:

npm install react-native-webview

or

yarn add react-native-webview

3. Configure Deep Linking

Since the ePay SDK may redirect users back to your app via a URL, you need to configure deep linking.

a. Set Up Linking in react-navigation

If you are using react-navigation, configure deep linking as follows:

import * as Linking from "react-native-linking";
 
const linking = {
  prefixes: ["myapp://"],
  config: {
    screens: {
      PaymentResult: "payment-result",
    },
  },
};
 
export default linking;

b. Update AndroidManifest.xml

For Android, modify your AndroidManifest.xml file:

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" />
</intent-filter>

c. Update Info.plist for iOS

For iOS, update your Info.plist file:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

4. Wrap Your App with GPayProvider

Wrap your app with the GPayProvider and pass your API keys.

import { GPayProvider } from "@guiddini/react-native-epay";
 
const App = () => {
  return (
    <GPayProvider secret_key="YOUR_SECRET_KEY" app_key="YOUR_APP_KEY">
      {/* Your App Components */}
    </GPayProvider>
  );
};
 
export default App;

5. Verify Installation

After installation, ensure the package is correctly set up by running:

npx react-native run-android
npx react-native run-ios

If everything is configured correctly, your app should be ready to process payments using the React Native ePay SDK.

Next Steps

On this page