react-native-rave-sdk

React native Rave SDK

npm install react-native-rave-sdk

or

yarn add react-native-rave-sdk

Basic Usage

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {Button } from 'react-native-paper'

import Rave from 'react-native-rave-sdk';

export default function App() {
  const amount = 200
  const getReference = () => {
    let text = '';
    let possible =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=';
    for (let i = 0; i < 10; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
  };

  
  return (
    <View style={styles.container}>
      <Text>React Native Rave SDK</Text>

      <Rave 
        FLW_PUBLIC_KEY="FLWPUBK_TEST-c4f018d0"
        FLW_SECRET_KEY="FLWSECK_TEST-e611eba1"
        tx_ref={"react-native-rave-sdk-test-"+getReference()}
        amount={amount}
        currency="NGN"
        country= "NG"
        payment_options="card"
        email= "[email protected]"
        phone_number= "080370000000"
        name= "Rave SDK"
        title= "Rave SDK"
        description= "React native Rave SDK"
        logo= "https://www.logolynx.com/images/logolynx/22/2239ca38f5505fbfce7e55bbc0604386.jpeg"
        onCancel={res => {
          console.log({res})
        }}
        onFailed={res => {
          console.log({res})
        }}
        onSuccess={res => {
          console.log({res})
        }}
        onVerifyingError={res => {
          console.log({res})
        }}
      />


      <Text> Custom Button </Text>
      
      <Rave 
        FLW_PUBLIC_KEY="FLWPUBK_TEST-c4f018d0"
        FLW_SECRET_KEY="FLWSECK_TEST-e611eba1"
        tx_ref={"react-native-rave-sdk-test-"+getReference()}
        amount={amount}
        currency="NGN"
        country= "NG"
        payment_options="card"
        email= "[email protected]"
        phone_number= "080370000000"
        name= "Rave SDK"
        title= "Rave SDK"
        description= "React native Rave SDK"
        logo= "https://www.logolynx.com/images/logolynx/22/2239ca38f5505fbfce7e55bbc0604386.jpeg"
        onCancel={res => {
          console.log({res})
        }}
        onFailed={res => {
          console.log({res})
        }}
        onSuccess={res => {
          console.log({res})
        }}
        onVerifyingError={res => {
          console.log({res})
        }}
        
        customButtonProps={{
          ButtonComp:Button,
          icon:"bank",
          children:"Make Payement",
          style:{backgroundColor:"green"},  
          mode: "outlined",
        }}
      />

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!