npm package: @propaga/react-native-sdk
Description: Propaga offers B2B BNPL by embedding financing and flexible payment options at distributors' checkout. 
Author: leonardo velarde
Latest version: 1.0.0


![Propaga banner](https://files.propaga.io/github-assets/propaga-banner.png)

Propaga offers B2B BNPL by embedding financing and flexible payment options at distributors' checkout.

  
  

By connecting to our API, you can implement our BNPL button (and flow!) directly into your React Native application and manage the entire loan service.

  

## Features

  

- This package uses your internal unique ID to identify the corner store or user.

- We validate corner stores with an external verification and an OTP.

- As a distributor, you can accept a corner store's propaga credit as a form of payment.

  

## Getting started
To use the package, you just need to add this line to your pubspec.yaml file:

## Usage
To begin, you need to import our PropagaSDK.
```javascript
import { usePropaga } from '@propaga/react-native-sdk';
...
const {
    startPropaga,
    PropagaPaymentComponent,
    loaded,
    PropagaButton,
} = usePropaga();

```
Now, to implement the button, you can simply call it like in the following example:

```javascript
<PropagaButton
	totalAmount={8000}
	isActive={isPropagaButtonActive}
	cornerStoreId={'14578'}
	token={'<your_awesome_token'}
	onPress={() => {}}
/>

```

**For context**


**(1) cornerStoreID** - refers to your internal ID for the user requesting credit

**(2) TotalAmount** - refers to the total amount of the order or the total amount of credit required to fulfill the order (e.g. $400, which makes up 2 cocacola boxes which was everything added to cart)

The button will display simple information to the user in the "payment method" section. The infomation can include:


- pre-registration status

- registration status

- waitinglist status

- credit limit exceeded status

- minimum transaction status

  

If you want to call the complete flow, you can use the `PropagaPaymentComponent`  as it follows:

```javascript
<PropagaPaymentComponent
  transaction={{
    cornerStoreId: '14578',
    totalAmount: 8000,
    wholesalerTransactionId: 'TRAN-3245',
    products: [
      {
        externalSKU: 'C120',
        name: 'product_name',
        quantity: 1,
      },
    ],
  }}
  user={{
    phoneNumber: '6641039920',
    firstName: 'John',
    lastNames: 'Doe',
    latitude: '19.2956057',
    longitude: '-99.2131455',
  }}
  config={{
    token: '<your_awesome_token',
  }}
  onSuccessTransaction={(response) => console.log('onSuccess')}
  onErrorTransaction={(error) => console.log('onError')}
/>;
```


Here, `onSuccessTransaction` is a callback that you can use to get information if the transaction was successful. Similarly, if the transaction was unsuccessful, the `onErrorTransaction` callback returns an error map with the status code and error message.

  

The `PropagaResponse` follows the following interface:

  

```javascript
PropagaResponse {
    transactionId: string,
    totalAmountWithInterests: number,
	cornerStoreId: string,
    paymentDate: Date
}
```


And for errors, `PropagaError` uses the following interface:

```javascript
PropagaError {
	errorCode:  string;
	errorMessage:  string;
}
```
To implement the `PropagaPaymentComponent` you will need to call the `usePropaga` function as it shows bellow.

```javascript
  const { startPropaga, PropagaPaymentComponent } = usePropaga();
```

The `startPropaga` function is used to start the payment flow, which includes the following steps:

  

1. The user clicks the `PropagaButton` to initiate the payment flow.

2. The `startPropaga` function is called, passing in the necessary parameters to `PropagaPaymentComponent`component, which contains information about the transaction and callbacks for handling success and error cases, also includes the screens for Propaga's flow.

3. Propaga validates the transaction information and returns a response or error, depending on the outcome.

4. If the transaction is successful, the `onSuccessTransaction` callback is triggered and the `PropagaResponse` object is returned.

5. If the transaction is unsuccessful, the `onErrorTransaction` callback is triggered and the `PropagaError` object is returned.

  

In conclusion, Propaga offers a simple and powerful solution for corner stores in LatAm to access financing with just a click of a button. Similarly, it enables distributors to increase GMV, enhance retention, and digitize payments. Furthermore, the `PropagaButton` and `PropagaPaymentComponent` components, along with the `startPropaga` function, simplify the process for developers to seamlessly embed Propaga's tool into their React Native applications.

## Example of use
[Code featuring an implementation example.](https://gist.github.com/AguacateVelarde/2e61f7f09c46ad78ae520c87eb3134a1)

## Diagram of the Propaga's flow
![Diagram flow](https://files.propaga.io/github-assets/BNPL-propaga.png)