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):

Gbenga Olufeyimi

This project follows the all-contributors specification. Contributions of any kind welcome!