@netappsng/react-native-netappspaysdk v0.5.1

NetApps Payment SDK for React Native — easily accept payments via card, USSD, transfer, PayAttitude, and more.

Table of Contents

• Installation
• Setup Instructions
  • iOS Setup
  • Android Setup
• Using NetApps POS Server (Optional)
• Example Usage
• Expo Support

Installation

Install the SDK using either npm or yarn:

npm install @netappsng/react-native-netappspaysdk

or

yarn add @netappsng/react-native-netappspaysdk

Setup Instructions

iOS Setup

In your project's Info.plist, add the following to allow phone call functionality:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>tel</string>
  <string>telprompt</string>
</array>

Android Setup

Add the following permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CALL_PHONE" />
<uses-permission android:name="android.permission.READ_PRIVILEGED_PHONE_STATE" tools:ignore="ProtectedPermissions" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

If you plan to use NFC payments, also add:

<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="false" />

Using NetApps POS Server (Optional)

If you want to connect to the NetApps POS Payment solution:

1. Install the POS plugin:

npm install react-native-netappspay-pos-plugins

2. In your android/build.gradle, before apply plugin: "com.facebook.react.rootproject", add:

apply from: "../node_modules/react-native-netappspay-pos-plugins/android/NetappspayRepos.gradle"

3. Then continue with:

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

Example Usage

Here's how you can integrate and trigger a payment:

import * as React from 'react';
import { NetAppsPayProvider, useNetAppsPay } from '@netappsng/react-native-netappspaysdk';

const payload = {
  currency: 'NGN',
  amount: 100,
  phone: "081******",
  tx_ref: "1234",
  paymentChannels: 'card,ussd,transfer,payatitude',
  email: 'nwokolawrence6@gmail.com',
  fullname: 'Nwoko Ndubueze',
  narration: 'Testing',
// if pos is enabled
  device: "true" | "false", // this is to choose to use external device or not
  longitude: "11",
  latitude: "233"
};

export default function App() {
  const { initPayment, cancelPayment, closePaymentModal } = useNetAppsPay({
    onFailed: (response) => {
      console.log(response, 'Failed');
    },
    onSuccessful: (response) => {
      console.log(response, 'Successful');
    },
    onCopyUssdCode: (ussdCode) => {
      console.log(ussdCode, 'Copied USSD code');
    }
  });

  const handleMakePayment = () => {
    initPayment(payload);
  };

  return (
    <NetAppsPayProvider publicKey="Netappspaykey">
      <Button onPress={handleMakePayment}>
        <Label>Make Payment</Label>
      </Button>
    </NetAppsPayProvider>
  );
}

Expo Support

If you are using Expo, install the Expo-compatible SDK instead:

npm install @netappsng/expo-react-native-netappspaysdk

➡️ View @netappsng/expo-react-native-netappspaysdk on npm