vella-pay-react-native v1.0.1

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="example@mail.com"
        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="example@mail.com"
        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

Security

If you discover any security related issues, please email hello@vella.finance instead of using the issue tracker.