advancly-widget-react-native v1.0.1
Advancly Widget React Native
This package enables you to give loans to your borrowers through Advancly widget. Install, and have fun with it.
Installation
To add Advancly Widget to your React Native project, run;
npm install advancly-widget-react-native
or
yarn add advancly-widget-react-native
One more thing
This package has a dependency. The name of the dependency is react-native-webview
To add this dependency, run
yarn add react-native-webview
for iOS: cd iOS && pod install && cd ..
for expo applications run;
expo install react-native-webview
and that's it, you're all good to go!
Screenshots of the widget
Usage
import { Fragment, useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { AdvanclyWidget, advanclyProps } from 'advancly-widget-react-native';
export default function App() {
const onSuccess = (response: advanclyProps.IResponse) => {
console.log('Success', JSON.stringify(response));
};
const onError = (response: advanclyProps.IResponse) => {
console.log('Error', JSON.stringify(response));
};
const onCancel = (response: advanclyProps.IResponse) => {
console.log('Cancel', JSON.stringify(response));
};
const [showWidget, setShowWidget] = useState(false);
return (
<Fragment>
<TouchableOpacity
onPress={() => {
setShowWidget(true);
}}
style={{ margin: 100, backgroundColor: '#377dff' }}
>
<Text style={{ color: '#fff' }}>Show Widget</Text>
</TouchableOpacity>
<AdvanclyWidget
aggregator_id={29}
bank_account_number="1122334455"
bank_code="000"
borrower_phone="08100000000"
bvn_number="22222222222"
aggregator_loan_ref={Date.now().toString()}
cac_number="2222222"
city="Mubuntu"
company_name="HAIRTOPIA EX PARTE"
customer_type="1"
email="hellworld@gmail.com"
first_name="John"
gender="male"
last_name="Doe"
photo_url=""
public_key="AAAAAAAAAAAA"
residence_address="100 Lagos Road"
state="Lagos"
product_id={00}
product_code="AAAA"
tenure={00}
customStyles={{
buttonBackgroundColor: '#377dff',
buttonTextColor: '#fff',
acceptButtonBackgroundColor: '#377dff',
acceptButtonTextColor: '#fff',
declineButtonBackgroundColor: '#377dff',
declineButtonTextColor: '#fff',
dropdownTextColor: '#000',
dropdownBackgroundColor: '#fff',
}}
onSuccess={onSuccess}
onError={onError}
onCancel={onCancel}
showWidget={showWidget}
autoStart={false}
environment={advanclyProps.ENVIRONMENT.TEST}
/>
</Fragment>
);
}
Props
Name | Description | Extra Information |
---|---|---|
public_key | Public key (sign up on aggregator.advancly.com to get yours) | default: nill |
aggregator_id | The ID of you the aggregator. You can get this on the settings page of your Advancly platform. | default: nill |
email | Borrower's email address | default: nill |
first_name | Borrower's first name | default: nill |
last_name | Borrower's last name | default: nill |
gender | Borrower's gender. male or female | default: nill |
product_id | The ID of the loan product on Advancly platform. You can get this on the Loan Products page of your Advancly platform | default: nill |
product_code | The code of the loan product on Advancly platform. You can get this on the Loan Products page of your Advancly platform | default: nill |
tenure | Borrower's loan tenure (in days) | default: nill |
bank_account_number | Borrower's bank account number | default: nill |
bank_code | Borrower's bank code on Advancly. | default: nill |
borrower_phone | Borrower's phone number | default: nill |
bvn_number | Borrower's BVN | default: nill |
aggregator_loan_ref (not required) | Loan reference number on aggregator platform | default: Date.now().toString() |
cac_number (not required) | The borrower's CAC number. For corporate borrower only | default: nill |
residence_address | The borrower's address | default: nill |
city | The borrower's city | default: nill |
state | The borrower's state | default: nill |
autoStart | Auto start payment once page is opened | default: false |
company_name (not required) | The name of the borrower's company. This is for corporate borrowers only. | default: nill |
customer_type | This can be either 1 or 2 . 1 is for individual borrowers. 2 is for corporate borrowers | default: nill |
photo_url | The url of the borrower's image. | default: nill |
onCancel | callback function when borrower cancels the widget | default: nill |
onSuccess | callback function when borrower's transaction is successful | default: nill |
showWidget | A boolean that controls when then widget is shown | default: false |
environment | An enum that tells the environment the widget should be shown in. This can be either "test" , "staging" , "production" . | default: "test" |
Contributions
Want to help make this package even more awesome? Read how to contribute and feel free to send in your PR!
Licensing
This project is licensed under MIT license.
Don't forget to star, like and share :)
Contributors ✨
Thanks goes to Gbenga Olufeyimi (@GbengaCodes) for creating this package (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!