React Native Rexpay WebView

The package allows you accept payment using rexpay, install, add keys and use. No stress :)

Installation

Add React-Native-Rexpay-WebView to your project by running;

npm install react-native-rexpay-webview

or

yarn add react-native-rexpay-webview

One more thing

To frontload the installation work, let's also install and configure dependencies used by this project, being react-native-webview

run

yarn add react-native-webview

for iOS: cd iOS && pod install && cd ..

for expo applications run;

expo install react-native-webview

and that's it, you're all good to go!

Usage 1

import React from 'react';
import { View } from 'react-native';
import { Paystack } from 'react-native-rexpay-webview';

// USE OUR TEST clientId: talk2phasahsyyahoocom
// USE OUR TEST clientSecret: f0bedbea93df09264a4f09a6b38de6e9b924b6cb92bf4a0c07ce46f26f85

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Rexpay
        amount={250}
        userId="[email protected]"
        clientId={'your (live|debug) client id'}
        clientSecret={'your (live|debug) client secret'}
        onClose={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
        autoStart={true}
      />
    </View>
  );
}

Usage 2 - Using Refs

Make use of a ref to start transaction. See example below;

import { useRef } from "react";
import Rexpay, { type RexPayRef } from "react-native-rexpay-webview";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

// USE OUR TEST clientId: talk2phasahsyyahoocom
// USE OUR TEST clientSecret: f0bedbea93df09264a4f09a6b38de6e9b924b6cb92bf4a0c07ce46f26f85

export default function App() {
  const ref = useRef<RexPayRef>(null);

  return (
    <View style={style.container}>
      <Rexpay
        ref={ref}
        amount={100}
        userId="[email protected]"
        clientId={'your (live|debug) client id'}
        clientSecret={'your (live|debug) client secret'}
        onClose={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
      />

      <TouchableOpacity
        style={style.button}
        onPress={() => ref?.current?.startTransaction()}
      >
        <Text style={style.buttonText}>Pay with Rexpay</Text>
      </TouchableOpacity>
    </View>
  );
}

const style = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  buttonText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "700",
  },
  button: {
    height: 50,
    width: "80%",
    borderRadius: 100,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ed1c25",
  },
});

API's

| Name | use/description | extra | | :--------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | -------------------------------: | | amount | Amount to be paid | nill | | clientId(required by rexpay) | your live or debug client id | required | | clientSecret(required by rexpay) | your live or debug client secret | required | | activityIndicatorColor | color of loader | default: green | | userId(required by rexpay) | Billers userId | default: nill | | onClose | callback function if the user cancels or the payment transaction cannot be verified. In a case of not being verified | default: nill | | onSuccess | callback function if the transaction was successful and verified (it will also return the reference number in the callback ) | default: nill | | autoStart | Auto start payment once page is opened | default: false | | reference | Reference number, if you have already generated one | default: Date.now().toString() | | metadata | Extra metadata about the transaction | default: {} |