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

Also, install react-native-webview because 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 sendMoneyApp = () => {
  const [openSendSDK, setOpenSendSDK] = useState(false);
  return (
    <View>
      <ThePeerSend
        {...{
          publicKey: 'PUBLIC_KEY',
          userReference: 'USER_REFERENCE',
          amount: 'AMOUNT_IN_KOBO',
          currency: 'NGN',
          openSendSDK,
          onSuccess: (response) => {},
          onError: (response) => {},
          onClose: () => setOpenSendSDK(false),
        }}
      />
      <Pressable onPress={() => setOpenSendSDK(true)}>
        <Text>Send</Text>
      </Pressable>
    </View>
  );
};

const directChargeApp = () => {
  const [openDirectChargeSDK, setOpenDirectChargeSDK] = useState(false);
  return (
    <View>
      <ThePeerDirectCharge
        {...{
          publicKey: 'PUBLIC_KEY',
          userReference: 'USER_REFERENCE',
          amount: 'AMOUNT_IN_KOBO',
          currency: 'NGN',
          openDirectChargeSDK,
          onSuccess: (response) => {},
          onError: (response) => {},
          onClose: () => setOpenDirectChargeSDK(false),
        }}
      />
      <Pressable onPress={() => setOpenDirectChargeSDK(true)}>
        <Text>Direct Charge</Text>
      </Pressable>
    </View>
  );
};

const checkoutApp = () => {
  const [openCheckoutSDK, setOpenCheckoutSDK] = useState(false);
  return (
    <View>
      <ThePeerDirectCharge
        {...{
          publicKey: 'PUBLIC_KEY',
          amount: 'AMOUNT_IN_KOBO',
          currency: 'NGN',
          openCheckoutSDK,
          onSuccess: (response) => {},
          onError: (response) => {},
          onClose: () => setOpenCheckoutSDK(false),
        }}
      />
      <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 details.

See the event details below.

onError

(response) => void: Required This is called when a transaction fails. It returns a response with event type

See the event details below.

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

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.

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 API References

• Thepeer API Docs
• Thepeer Dashboard

License

MIT for more information.