thepeer-react-native
v0.2.7
Published
A quick and secure way to send money across any business. Add this SDK to your app and give your customers the experience they deserve.
Downloads
40
Maintainers
Readme
Thepeer React Native SDK
Thepeer is a quick and secure way to send money across any business. The SDK handles connecting other businesses to your app.
Installation
npm install thepeer-react-native
or
yarn add thepeer-react-native
You need to install react-native-webview
if you don't have it installed. It's a dependency for this package. Here's a link to their docs.
Usage
import React from 'react';
import { View, Pressable, Text } from 'react-native';
import {
ThepeerSend,
ThepeerDirectCharge,
ThepeerCheckout,
} from 'thepeer-react-native';
// ...
const sendApp = () => {
const [openSendSDK, setOpenSendSDK] = useState(false);
const closeSendSDK = () => setOpenSendSDK(false);
return (
<View>
<ThepeerSend
{...{
publicKey: 'PUBLIC_KEY',
userReference: 'USER_REFERENCE',
amount: 'AMOUNT_IN_KOBO',
currency: 'NGN',
openSendSDK,
onSuccess: (response) => {
console.log('response', response);
closeSendSDK();
},
onError: (response) => {
console.log('response', response);
closeSendSDK();
},
onClose: closeSendSDK,
}}
/>
<Pressable onPress={() => setOpenSendSDK(true)}>
<Text>Send</Text>
</Pressable>
</View>
);
};
const directChargeApp = () => {
const [openDirectChargeSDK, setOpenDirectChargeSDK] = useState(false);
const closeDirectChargeSDK = () => setOpenDirectChargeSDK(false);
return (
<View>
<ThepeerDirectCharge
{...{
publicKey: 'PUBLIC_KEY',
userReference: 'USER_REFERENCE',
amount: 'AMOUNT_IN_KOBO',
currency: 'NGN',
openDirectChargeSDK,
onSuccess: (response) => {
console.log('response', response);
closeDirectChargeSDK();
},
onError: (response) => {
console.log('response', response);
closeDirectChargeSDK();
},
onClose: closeDirectChargeSDK,
}}
/>
<Pressable onPress={() => setOpenDirectChargeSDK(true)}>
<Text>Direct Charge</Text>
</Pressable>
</View>
);
};
const checkoutApp = () => {
const [openCheckoutSDK, setOpenCheckoutSDK] = useState(false);
const closeCheckoutSDK = () => setOpenCheckoutSDK(false);
return (
<View>
<ThepeerCheckout
{...{
publicKey: 'PUBLIC_KEY',
amount: 'AMOUNT_IN_KOBO',
currency: 'NGN',
openCheckoutSDK,
onSuccess: (response) => {
console.log('response', response);
closeCheckoutSDK();
},
onError: (response) => {
console.log('response', response);
closeCheckoutSDK();
},
onClose: closeCheckoutSDK,
}}
/>
<Pressable onPress={() => setOpenCheckoutSDK(true)}>
<Text>Checkout</Text>
</Pressable>
</View>
);
};
Configuration Options
Configuration Options for Send and Direct charge
publicKey
string: Required Your public key can be found on your dashboard settings.
userReference
string: Required The user reference returned by Thepeer API when a user has been indexed
amount
string|number: Required The amount you intend to send in kobo
currency
string: Optional The currency being used. Defaults to NGN
onSuccess
(response) => void: Required This is called when a transaction is successfully. It returns a response with event type and transaction object.
See the event types.
See the transaction object.
onError
(response) => void: Required This is called when a transaction fails. It returns a response with event type
See the event types.
onClose
(response) => void: Required This is called when a user clicks on the close button.
meta
object: Optional This object should contain additional/optional attributes you would like to have on your transaction response
Configuration Options for Send
openSendSDK
boolean: Required
This is a prop to display/hide the sdk
Configuration Options for Direct charge
openDirectChargeSDK
boolean: Required This is a prop to display/hide the sdk
Configuration Options for Checkout
openCheckoutSDK
boolean: Required This is a prop to display/hide the sdk
email
string: Required The user's email address.
Common Issues
Tried to register two views with the same name RNCWebview
- The minimum version of the RN Webview package used for this project is
11.13.0
. Update your version to this version or later to fix this issue. - To know all the versions of react-native-webview within your project, run
npm ls react-native-webview
, and upgrade to the latest version.
Support
If you're having trouble with Thepeer React or your integration, please reach out to us at [email protected]. We're more than happy to help you out.
Thepeer's API References
- Thepeer's API Docs
- Thepeer's Dashboard
License
MIT for more information.