/RavePaymentGateWay

Rave payment gateway quick checkout for ReactNative application

Primary LanguageJavaScript

RavePaymentGateWay

Rave payment gateway quick checkout for ReactNative application is an easy to implement plugin to interact with Flutterwave payment API. It comes with in-built UI to collect debit card, credit card or bank details.


payment form ios

card payment gateway ios

account payment gateway ios


payment form android

card payment gateway android

account payment gateway android

Installation

You can integrate RavePaymentGateway into ReactNative application manually. The RavePaymentGateway, requires the crypto module which is a built-in Node module. React Native runs JS on JavaScriptCore (when on the device or simulator) and on Chrome itself (when using Chrome debugging), so modules that depend on built-in Node.js modules won't work. We have to port the crypto module to React Native and install other dependencies.

A typical workflow:

  1. Install other dependencies
npm i --save react-native-network-info underscore react-native-vector-icons cryptico reselect
#link the installed modules to your application
react-native link
  1. To port the crypto module to your RN application, do the following
npm i --save react-native-crypto
# Install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# Install latest rn-nodeify
npm i --save-dev mvayngrib/rn-nodeify
# Install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
  1. Verify that a shim.js in the project root directory is created

    Note: Checkout react-native-crypto for more

  2. Drag the src folder to the root of your application. Or if you already have a src folder then copy the contents over to your application

Basic usage

This however depends on how the entry point of your RN application is set up. Typically

 // index.ios.js or index.android.js
 // make sure you use `import` and not require!  
 import './shim.js'
 import PaymentModal from './src/components/PaymentModal'

Example

Create a simple form to take in user payment details In index.ios.js or index.android.js

import React, { Component, } from 'react'
import { AppRegistry, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { Header, Card, CardSection, Input } from './src/components/common'
import PaymentModal from './src/components/PaymentModal'

class SampleApp extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      amount: null,
      visible: false,
      firstname: null,
      lastname: null,
      email: null
    }

    this.onButtonPress = this.onButtonPress.bind(this)
    this.closePaymentModal = this.closePaymentModal.bind(this)
  }

  onButtonPress() {
    this.setState({ visible: true })
  }
  
  handlePaymentDetails(key, value) {
    this.setState({ [key]: value })
  }

  closePaymentModal() {
    this.setState({ visible: false })
  }
  
  renderCheckoutForm() {
    const { firstname, lastname, email, amount } = this.state
    return (
      <Card>
        <CardSection>
          <Input
            placeholder="First Name"
            value={firstname}
            onChangeText={this.handlePaymentDetails.bind(this, 'firstname')}
          />
        </CardSection>
        <CardSection>
          <Input
            placeholder="Last Name"
            value={lastname}
            onChangeText={this.handlePaymentDetails.bind(this, 'lastname')}
          />
        </CardSection>
        <CardSection>
          <Input
            placeholder="Email"
            value={email}
            onChangeText={this.handlePaymentDetails.bind(this, 'email')}
          />
        </CardSection>
        <CardSection>
          <Input
            placeholder="Amount"
            value={this.state.amount}
            onChangeText={this.handlePaymentDetails.bind(this, 'amount')}
          />
        </CardSection>        
        <CardSection>
          <TouchableOpacity style={styles.buttonContainer} onPress={this.onButtonPress}>
            <Text style={styles.buttonText}>
              {'PAY'}
            </Text>
          </TouchableOpacity>
        </CardSection>
      </Card>    
    )
  }

  renderPaymentModal() {
    const { visible, firstname, lastname, email, amount } = this.state
    return (
      <PaymentModal
        firstname={firstname}
        lastname={lastname}
        email={email}
        amount={Number(amount)}
        visible={visible}
        title='Sample App Title'
        description='Sample Payment Description'
        PBFPubKey='FLWPUBK-xxx'
        txRef='rave-dash-xxx'
        onRequestClose={this.closePaymentModal}
      />    
    )
  }

  render() {
    return (
      <View>
        <Header title={'Rave Payment Gateway'} />
        {this.renderCheckoutForm()}
        {this.renderPaymentModal()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#FFF',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007AFF',
    marginLeft: 5,
    marginRight: 5
  },
  buttonText: {
    alignSelf: 'center',
    color: '#007AFF',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp)

Props

  • firstname - string optional
  • lastname - string optional
  • email - string required, email of the payer for sending transaction notifications
  • amount - integer required, amount to be paid
  • visible - boolean required, controls show/hide of modal
  • title - string, optional, title of the transaction
  • description - string, optional, description of the transaction
  • PBFPubKey - string, required
  • txRef - string, required
  • authModel - string required only when PIN auth model is used
  • onRequestClose - function required, callback function, when user wants to decline payment or exit the modal

More to come

  • Write tests
  • Proper Linting

License

MIT

Free Software, Hell Yeah!