Thepeer React Native SDK

Thepeer SDK 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 } from 'thepeer-react-native';
// ...

const sendMoney = () => {
  const [openSendSDK, setOpenSendSDK] = useState(false);
  return (
    <View>
      <ThePeerSend
        {...{
          publicKey: 'PUBLIC_KEY',
          userReference: 'USER_REFERENCE',
          receiptUrl: 'CALLBACK_URL',
          amount: 'AMOUNT_IN_KOBO',
          openSendSDK,
          onSuccess: (response) => {},
          onError: (response) => {},
          onClose: () => setOpenSendSDK(false),
        }}
      />
      <Pressable onPress={() => setOpenSendSDK(true)}>
        <Text>Send</Text>
      </Pressable>
    </View>
  );
};

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

Configuration Options

• publicKey
• userReference
• amount
• onSuccess
• onError
• onClose
• meta

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

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

() => { 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 boolean: Required

Events Details (optional)

event: String

Event names correspond to the type of event that occurred. Possible options are in the table below.

Event Name	Description
send.success or direct_debit.success	successful transaction.
send.insufficient_funds or direct_debit.insufficient_funds	business has no money to process transaction
send.user_insufficient_funds or direct_debit.user_insufficient_funds	user has no money to process transaction
send.server_error or direct_debit.server_error	something went wrong

transaction: JSON

The transaction JSON returned from the success events.

{
  "id": string,
  "remark": string,
  "amount": number,
  "type": string,
  "direct_debit": boolean,
  "status": string,
  "user": {
    "name": "Trojan Okoh",
    "identifier":string,
    "identifier_type": string,
    "email":string,
    "reference": string,
    "created_at":string,
    "updated_at": string,
  },
  "mode": string,
  "reference":  string,
  "peer": {
    "business": {
      "id":  string,
      "name":  string,
      "logo": string,
      "logo_colour": string,
      "identifier_type": string,
    },
    "user": {
      "name": string,
      "identifier": string,
      "identifier_type": string,
      "email": string,
      "reference": string,
      "created_at": string,
      "updated_at": string,
    }
  },
  "meta": {
    ...
  },
  "created_at": string,
  "updated_at":  string,
}

Support

If you're having trouble with Thepeer React Native SDK or your integration, please reach out to us at support@thepeer.co or come chat with us on Slack. We're more than happy to help you out.

License

MIT for more information.