VellaPay React Native

Accept payment using Vella Checkout widget for react native

Installation

Add VellaPay React Native to your project by running;

npm install vella-pay-react-native

or

yarn add vella-pay-react-native

Usage 1 - Autoload Widget

import React from 'react';
import  { Vella, VellaProps } from 'vella-pay-react-native'
import { View } from 'react-native';

function Pay() {
  return (
    <View style={{ flex: 1 }}>
      <Vella  
        vellaKey="your-vella-key-here"
        amount={'25000.00'}
        currency={'NGN'}
        billingEmail="[email protected]"
        billingName="Tade Ogidan"
        merchantId="your-vella-tag"
        reference="PW-XXXX-XXX-XXXX-XXX"
        activityIndicatorColor="green"
        onCancel={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
        autoStart={true}
      />
    </View>
  );
}

Usage 2 - Using Button

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

import React, { useRef } from 'react';
import { View, TouchableOpacity,Text } from 'react-native';
import  { Vella, VellaProps } from 'vella-pay-react-native'


function App(){

  const vellaWebViewRef = useRef<VellaProps.VellaRef>(); 
  return (
    <View style={{flex: 1}}>
      <Vella  
        vellaKey="your-vella-key-here"
        amount={'25000.00'}
        currency={'NGN'}
        billingEmail="[email protected]"
        billingName="Tade Ogidan"
        merchantId="your-vella-tag"
        reference="PW-XXXX-XXX-XXXX-XXX"
        activityIndicatorColor="green"
        autoStart={false}
        onCancel={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
        ref={vellaWebViewRef}
      />

        <TouchableOpacity onPress={()=> vellaWebViewRef.current.startTransaction()}>
          <Text>Buy this</Text>
        </TouchableOpacity>
      </View>
  );
}

VellaPay React Native WebView API

| Name | use/description | default | | :----------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------: | | vellaKey | vella key (visit app.vella.finance to get yours) | nill | | amount | Amount to be paid | nill | | activityIndicatorColor | color of loader | green | | billingEmail (required) | Billers email | nill | | billingMobile (optional) | Billers mobile | nill | | billingName (required) | Billers Name | nill | | onCancel | callback function if user cancels,close or payment transaction could not be verified. In a case of not being verified, transactionRef number is also returned in the callback | nill | | onSuccess | callback function if transaction was successful and verified (it will also return the transactionRef in the callback ) | nill | | autoStart | Auto start payment once page is opened | false | | reference | Payment Reference , if you have already generated one | 'auto-generated | | handleWebViewMessage | Will be called when a WebView receives a message | true |

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.