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>
)
}Configuration Options
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.
Bani API References
License
MIT for more information.