0.2.0 • Published 6 months ago

react-native-rexpay-webview v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

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="test@gmail.com"
        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="test@gmail.com"
        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

Nameuse/descriptionextra
amountAmount to be paidnill
clientId(required by rexpay)your live or debug client idrequired
clientSecret(required by rexpay)your live or debug client secretrequired
activityIndicatorColorcolor of loaderdefault: green
userId(required by rexpay)Billers userIddefault: nill
onClosecallback function if the user cancels or the payment transaction cannot be verified. In a case of not being verifieddefault: nill
onSuccesscallback function if the transaction was successful and verified (it will also return the reference number in the callback )default: nill
autoStartAuto start payment once page is openeddefault: false
referenceReference number, if you have already generated onedefault: Date.now().toString()
metadataExtra metadata about the transactiondefault: {}
0.2.0

6 months ago

0.1.0

11 months ago

1.0.37

11 months ago

1.0.36

11 months ago

1.0.35

11 months ago

1.0.34

11 months ago

1.0.33

11 months ago

1.0.32

11 months ago

1.0.31

11 months ago

1.0.30

11 months ago

1.0.22

11 months ago

1.0.21

11 months ago

1.0.20

11 months ago

1.0.19

11 months ago

1.0.18

11 months ago

1.0.17

11 months ago

1.0.16

11 months ago

1.0.15

11 months ago

1.0.14

11 months ago

1.0.13

11 months ago

1.0.12

11 months ago

1.0.11

11 months ago

1.0.10

11 months ago

1.0.9

11 months ago

1.0.8

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago