NetApps Payment SDK for React Native — easily accept payments via card, USSD, transfer, PayAttitude, and more.
Install the SDK using either npm
or yarn
:
npm install @netappsng/react-native-netappspaysdk
or
yarn add @netappsng/react-native-netappspaysdk
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>
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" />
If you want to connect to the NetApps POS Payment solution:
- Install the POS plugin:
npm install react-native-netappspay-pos-plugins
- In your
android/build.gradle
, beforeapply plugin: "com.facebook.react.rootproject"
, add:
apply from: "../node_modules/react-native-netappspay-pos-plugins/android/NetappspayRepos.gradle"
- Then continue with:
apply plugin: "com.facebook.react.rootproject"
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>
);
}
If you are using Expo, install the Expo-compatible SDK instead:
npm install @netappsng/expo-react-native-netappspaysdk