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

• publicKey
• amount
• currency
• onSuccess
• onError
• onClose
• meta

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.

Support

If you're having trouble with Thepeer React or your integration, please reach out to us at support@thepeer.co. 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.