vella-pay-react-native
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

VellaPay React Native

All Contributors

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

Screenshot

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

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 hello@vella.finance instead of using the issue tracker.

Package Sidebar

Install

npm i vella-pay-react-native

Weekly Downloads

1

Version

1.0.1

License

Apache-2.0

Unpacked Size

59 kB

Total Files

32

Last publish

Collaborators

  • vellafinance