Thepeer-react-native NPM

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

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

userReference

`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.