React-native-bani NPM

Bani React Native SDK

The Bani react-native SDK is a convenient and easy . It enables businesses to easily accept payments through various channels such as bank transfers, mobile money, DLT, and third-party wallets. With just a few simple steps, you can integrate this widget into your application and start accepting payments securely.

Installation

npm install react-native-bani

To use this package, ensure you have react-native-webview installed, as it's a dependency. Follow this link for more info.

Usage

import React from 'react'
import { View } from 'react-native'
import BaniCheckout, { EventResponse } from 'react-native-bani'
// ...

const App = () => {
  const handleOnClose = (response: EventResponse) => {
    console.log('On close: ', response)
  }

  const handleOnSuccess = (response: EventResponse) => {
    console.log('On Success: ', response)
  }

  const options = {
    amount: '100',
    phoneNumber: '+2347037142576',
    merchantKey: 'pub_test_*******SYR327********',
    email: 'akinpejuyusuf@gmail.com',
    firstName: 'Yusuf',
    lastName: 'Akinpeju',
    metadata: { custom_ref: 'custom_ref' },
  }
  return (
    <View>
      <BaniCheckout
        options={{ ...options }}
        text='Pay Now'
        onClose={handleOnClose}
        onSuccess={handleOnSuccess}
        // customButton={({onPress}) => (
        //   <Button title="Pay" onPress={onPress} />
        // )}
      />
    </View>
  )
}

`amount`

string: Required The amount to be paid

`phoneNumber`

string: Required The user's phone number

`email`

string: Required The user's email address

`firstName`

string: Required The user's first name

`lastName`

string: Required The user's last name

`merchantKey`

string: Required Your merchant public key can be found on your dashboard settings.

`bankTransfer`

boolean: Optional To display bank transfer as the only payment method, set bankTransfer to true . Defaults to false

`onSuccess`

(response) => void: Required This function is invoked when a transaction is carried out successfullly. It returns a response containing the transaction details.

See the EventResponse below.

`onClose`

(response) => void: Required This function is invoked when a user closes the payment widget. It returns a response containing the transaction details at the point of closure.

See the EventResponse below.

`metadata`

object: Optional The purpose of this object is to hold additional data that you wish to include in your transaction response.

`EventResponse Object`

There are 2 types of transactions you can verify, 'fiat' and 'crypto' based on the value returned in response.type

{
  reference: 'BNPay-gk60y5m37hp5bd8rvs2rbh64c9mrk4'
  status: 'payment_processing'
  type: 'fiat'
}

Support

For any issues or difficulties related to react-native-bani or its integration, don't hesitate to contact us at hello@bani.africa. Our team is here to provide you with assistance and support.