Skip to content

Updated-Broken-Links-And-Grammar. #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Updated-Broken-Links-And-Grammar. #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e4692f
Updated-Broken-Links-And-Grammar.
Angello-droid Oct 19, 2025
c4cc87a
Minor update
Angello-droid Oct 19, 2025
da1ee6e
Update README.md
Angello-droid Oct 22, 2025
14750bb
Update README.v2.md
Angello-droid Oct 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 55 additions & 48 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

# React Native Flutterwave

Easily implement Flutterwave for payments in your React Native appliction. This library supports both Android and iOS, and use the Flutterwave's V3 API.
Easily integrate Flutterwave for payment collection in your React Native application. This library is compatible with both Android and iOS and utilizes Flutterwave's V3 API.

[![V2 API](https://img.shields.io/badge/API-V3-brightgreen)](https://developer.flutterwave.com/docs) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

Expand All @@ -13,7 +13,7 @@ Easily implement Flutterwave for payments in your React Native appliction. This
<img src=".github/images/github-preview-android.gif" alt="android-preview"/>
</p>

## Table Of Content
## Table Of Contents

- Getting Started
- [V2 API](#warning-if-using-version-2-api-warning)
Expand Down Expand Up @@ -47,58 +47,65 @@ Easily implement Flutterwave for payments in your React Native appliction. This

## What's Inside?

- Pay with Flutterwave button and checkout dialog.
- Pay with the Flutterwave button and checkout dialog.
- Standard payment initialization function.
- Flutterwave designed button.

## :warning: If Using Version 2 API :warning:

This version of the library's docs focuses on use cases with the Version 3 of Flutterwaves API, if you are still using the Version 2 API please use [this documentation](./README.v2.md) instead.
This section of the library documentation focuses on use cases for Version 3 of the Flutterwave API. If you are still using Version 2 of the API, please refer to [this documentation](./README.v2.md) instead.

## Installation

This library is available on npm, you can install it by running `npm install --save flutterwave-react-native` or `yarn add flutterwave-react-native`
This library is available on npm. You can install it by running the following command:

`npm install --save flutterwave-react-native`

or

`yarn add flutterwave-react-native`


### Dependencies

In order to render the Flutterwave checkout screen this library depends on [react-native-webview](https://github.com/react-native-community/react-native-webview) ensure you properly install this library before continuing.
To render the Flutterwave checkout screen, this library requires the installation of [react-native-webview](https://github.com/react-native-community/react-native-webview). Please ensure that this library is installed correctly before proceeding.

### Activity Indicator (only needed for android)
### Activity Indicator (only needed for Android)

To display the Flutterwave styled activity indicator when the checkout screen is being loaded on Android you will need to add some modules in `android/app/build.gradle`.
**_Skip this if you already have setup your app to support gif images._**
To display the Flutterwave-styled activity indicator when the checkout screen is loading on Android, you will need to add a few modules to your `android/app/build.gradle` file.
**_Skip this step if your app is already set up to support GIF images._**

```javascript
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
// Include this if your app supports Android versions before Ice Cream Sandwich (API level 14).
implementation 'com.facebook.fresco:animated-base-support:1.3.0'

// For animated GIF support
// Add this for animated GIF support.
implementation 'com.facebook.fresco:animated-gif:2.0.0'
}
```

### :fire: MERCHANT PUBLIC KEY :fire:

In order to use this library you are required to use your merchant public key and not the secret key. See how to get your API Keys [here](https://developer.flutterwave.com/v3.0/docs/api-keys)
To use this library, you are required to use your merchant public key instead of the secret key. Learn how to retrieve your API Keys [here](https://developer.flutterwave.com/v3.0.0/docs/authentication#get-your-api-keys).

### :fire: IMPORTANT INFORMATION :fire:

If the `options` property on [PayWithFlutterwave](#paywithflutterwaveprops-interface) changes, when next the user taps on the button a new payment will be initialized whether the last one was successful or not.
If the `options` property on [PayWithFlutterwave](#paywithflutterwaveprops-interface) changes, the next time your customer taps on the button, a new payment will be initialized, regardless of whether the previous transaction was successful or not.

Remember you cannot use the same transaction reference for two different payments, also remember to recreate the transaction reference before allowing the user initiate a new payment.
Kindly note that you cannot use the same transaction reference for two different payments. Make sure you generate a new transaction reference before allowing your customer to start a new payment.

## Usage

Below are a few examples showcasing how you can use the library to implement payment in your React Native app.
Below are some examples demonstrating how to implement payment features in your React Native application.

### PayWithFlutterwave

<img src=".github/images/pay-with-flutterwave.png" alt="preview" width="350"/>

[View All Props](#flutterwavebuttonprops)

Import `PayWithFlutterwave` from `flutterwave-react-native` and use it like so.
Import `PayWithFlutterwave` from `flutterwave-react-native` and use it as follows:

```tsx
import {PayWithFlutterwave} from 'flutterwave-react-native';
Expand All @@ -110,7 +117,7 @@ interface RedirectParams {
tx_ref: string;
}

/* An example function called when transaction is completed successfully or canceled */
/* An example function called when the transaction is completed successfully or canceled */
const handleOnRedirect = (data: RedirectParams) => {
console.log(data);
};
Expand Down Expand Up @@ -149,7 +156,7 @@ interface RedirectParams {

[View All Props](#flutterwavebuttonprops)

Import `PayWithFlutterwave` from `flutterwave-react-native` and use it like so.
Import `PayWithFlutterwave` from `flutterwave-react-native` and use it as follows:

```tsx
import {PayWithFlutterwave} from 'flutterwave-react-native';
Expand All @@ -161,7 +168,7 @@ interface RedirectParams {
tx_ref: string;
}

/* An example function called when transaction is completed successfully or canceled */
/* An example function called when the transaction is completed successfully or canceled */
const handleOnRedirect = (data: RedirectParams) => {
console.log(data);
};
Expand All @@ -188,7 +195,7 @@ interface RedirectParams {

[View All Props](#flutterwavebuttonprops)

Import `FlutterwaveButton` from `flutterwave-react-native` and use it like so.
Import `FlutterwaveButton` from `flutterwave-react-native` and use it as follows:

```jsx
import {FlutterwaveButton} from 'flutterwave-react-native';
Expand All @@ -203,11 +210,11 @@ import {FlutterwaveButton} from 'flutterwave-react-native';

### FlutterwaveInit

When called, this function returns a Promise which resolves to a string on success and rejects if an error occurs. [See all config options](#flutterwaveinitoptions)
When called, this function returns a Promise that either resolves to a string on success or rejects if an error occurs. [See all config options](#flutterwaveinitoptions).

Import `FlutterwaveInit` from `flutterwave-react-native` and use it like so.
Import `FlutterwaveInit` from `flutterwave-react-native` and use it as follows:

```javascript
```JavaScript
import {FlutterwaveInit} from 'flutterwave-react-native';

try {
Expand All @@ -232,7 +239,7 @@ try {

### Aborting Payment Initialization

:wave: Hi, so there are cases where you have already initialized a payment with `FlutterwaveInit` but might also want to be able to cancel the payment initialization should in case your component is being unmounted or you want to allow users cancel the action before the payment is initialized, we have provided a way for you to do this... [continue reading](./docs/AbortingPaymentInitialization.md)
:wave: Hi! There may be cases where you've already initiated a payment using `FlutterwaveInit`, but you might want the option of cancelling the payment initiation. This could be necessary if your component is being unmounted or if you want to allow customers to cancel the action before the payment is initialized. We have provided a method for you to accomplish this. [Continue reading here](./docs/AbortingPaymentInitialization.md).

## Props

Expand All @@ -241,42 +248,42 @@ try {
[See Interface](#flutterwaveinitoptions-interface)
| Name | Required | Type | Default | Description |
| --------- | --------- | ---- | ------- | ----------- |
| authorization | Yes | string | **REQUIRED** | Your merchant public key, see how to get your [API Keys](https://developer.flutterwave.com/v3.0/docs/api-keys)|
| tx_ref | Yes | string | **REQUIRED** | Your transaction reference. This MUST be unique for every transaction.|
| amount | Yes | string | **REQUIRED** | Amount to charge the customer. |
| currency | No | string | NGN | Currency to charge in. Defaults to NGN. [See accepted currencies here](https://support.flutterwave.com/en/articles/3632719-accepted-currencies)|
| integrity_hash | No | string | undefined | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway. |
| payment_options | Yes | string | **REQUIRED** | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on. |
| payment_plan | No | number | undefined | This is the payment plan ID used for [Recurring billing](https://developer.flutterwave.com/v3.0/docs/recurring-billing). |
| redirect_url | Yes | string | **REQUIRED** | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them. **IMPORTANT** This only required when you are directly using [FlutterwaveInit](#flutterwave-standard-init) |
| customer | Yes | [FlutterwaveInitCustomer](#flutterwaveinitcustomer) | **REQUIRED** | This is an object that contains your customer details. `E.g.'customer': { 'email': '[email protected]', 'phonenumber': '08012345678', 'name': 'Takeshi Kovacs' }.` |
| subaccounts | No | array of [FlutterwaveInitSubAccount](#flutterwaveinitsubaccount) | undefined | This is an array of objects containing the subaccount IDs to split the payment into. Check out the [Split Payment page](https://developer.flutterwave.com/docs/split-payment) for more info |
| meta | No | [FlutterwavePaymentMeta](#flutterwavepaymentmeta) | undefined | This is an object that helps you include additional payment information to your request. `E.g. { 'consumer_id': 23, 'consumer_mac': '92a3-912ba-1192a' }` |
| customizations | No | [FlutterwaveInitCustomizations](#flutterwaveinitcustomizations) | undefined | This is an object that contains title, logo, and description you want to display on the modal `E.g. {'title': 'Pied Piper Payments', 'description': 'Middleout isn't free. Pay the price', 'logo': 'https://assets.piedpiper.com/logo.png'}` |
| authorization | Yes | string | **REQUIRED** | Your merchant public key. Learn how to retrieve your key [here](https://developer.flutterwave.com/v3.0.0/docs/authentication#get-your-api-keys).|
| tx_ref | Yes | string | **REQUIRED** | Your transaction reference. This must be unique for each transaction.|
| amount | Yes | string | **REQUIRED** | The amount to charge your customer. |
| currency | No | string | NGN | The currency to charge in. Defaults to NGN. [See accepted currencies here](https://flutterwave.com/tz/support/general/what-are-the-currencies-accepted-on-flutterwave)|
| integrity_hash | No | string | undefined | This is a sha256 hash of your FlutterwaveCheckout values. It is used for passing secured values to the payment gateway. |
| payment_options | Yes | string | **REQUIRED** | This specifies the payment options displayed to your customers e.g - card, mobilemoney, ussd, and so on. |
| payment_plan | No | number | undefined | This is the payment plan ID used for recurring payments. You can learn more by visiting [here](https://developer.flutterwave.com/v3.0.0/docs/payment-plans-1). |
| redirect_url | Yes | string | **REQUIRED** | The URL where you want to redirect customers after a completed transaction. This is useful for 3DSecure payments, allowing us to send your customer to a custom page you wish to display. **IMPORTANT** This is only required when you are directly using [FlutterwaveInit](#flutterwave-standard-init). |
| customer | Yes | [FlutterwaveInitCustomer](#flutterwaveinitcustomer) | **REQUIRED** | This is an object that contains your customer details. `E.g.' customer': { 'email': '[email protected]', 'phonenumber': '08012345678', 'name': 'Takeshi Kovacs' }.
| subaccounts | No | array of [FlutterwaveInitSubAccount](#flutterwaveinitsubaccount) | undefined | This is an array of objects containing the subaccount IDs for splitting payments. Find more information by visiting our [Split Payment Page](https://developer.flutterwave.com/v3.0.0/docs/split-payments).|
| meta | No | [FlutterwavePaymentMeta](#flutterwavepaymentmeta) | undefined | This object is used to include additional payment information for your request.` E.g.. { 'consumer_id': 23, 'consumer_mac': '92a3-912ba-1192a' }` |
| customizations | No | [FlutterwaveInitCustomizations](#flutterwaveinitcustomizations) | undefined | This object contains a title, logo, and description to display on the modal. `E.g... {'title': 'Pied Piper Payments', 'description': 'Middleout isn't free. Pay the price', 'logo': 'https://assets.piedpiper.com/logo.png'} |

### PayWithFlutterwaveProps

[See Interface](#paywithflutterwaveprops-interface)
| Name | Required | Type | Default | Description |
| --------- | --------- | ---- | ------- | ----------- |
| style | No | object | undefined | Used to apply styling to the button.|
| onRedirect | Yes | function | **REQUIRED** | Called when a payment is completed successfully or is canceled. The function will receive [redirect params](#redirectparams) as an argument.|
| onWillInitialize | No | function | undefined | This will be called before a payment link is generated.|
| onDidInitialize | No | function | undefined | This is called when a new payment link has been successfully initialized.|
| onInitializeError | No | function | undefined | This is called if an error occurred while initializing a new pyment link. The function will receive [FlutterwaveInitError](#flutterwaveiniterror) |
| onAbort | No | function | undefined | This is called if a user aborts a transaction, a user can abort a transaction when they click on the dialog's backdrop and choose cancel when prompted to cancel transaction. |
| style | No | object | undefined | This property is used to apply styling to the button.|
| onRedirect | Yes | function | **REQUIRED** | This function is called when a payment is either completed successfully or cancelled. It receives [redirect params](#redirectparams) as an argument.|
| onWillInitialize | No | function | undefined | This function is called before a payment link is generated.|
| onDidInitialize | No | function | undefined | This function is called when a new payment link has been successfully initialized.|
| onInitializeError | No | function | undefined | This function is called if an error occurs while initializing a new payment link. It will receive [FlutterwaveInitError](#flutterwaveiniterror). |
| onAbort | No | function | undefined | This function is called if a customer aborts a transaction. A customer can abort a transaction when they click on the dialog's backdrop and choose cancel when prompted to cancel the transaction. |
| options | Yes | [FlutterwaveInitOptions](#flutterwaveinitoptions) | **REQUIRED** | The option passed here is used to initialize a payment. |
| customButton | No | function | undefined | This is used to render a custom button. The function a prop argument structured like [CustomButtonProps](#custombuttonprops), this function should return a valid React node. |
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |
| customButton | No | function | undefined | This function is used to render a custom button. It accepts a prop argument structured like [CustomButtonProps](#custombuttonprops). This function should return a valid React node. |
| alignLeft | No | boolean | undefined | This property aligns the content of the button to the left. |

### FlutterwaveButton Props

[See Interface](#flutterwavebuttonprops-interface)
| Name | Required | Type | Default | Description |
| --------- | --------- | ---- | ------- | ----------- |
| style | No | ViewStyle | undefined | This component uses the same style properties that are applicable to react-native's View component style.|
| onPress | Yes | function | undefined | This property receive a function that is called on button press. |
| disabled | No | boolean | undefined | This disables button, and causes onPress not to be fired.|
| style | No | ViewStyle | undefined | This component accepts the same style properties applicable to the React-Native View component.|
| onPress | Yes | function | undefined | This property receives a function that is called when the button is pressed. |
| disabled | No | boolean | undefined | This disables the button, preventing the onPress function from being triggered.|
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |

## Types
Expand Down Expand Up @@ -399,6 +406,6 @@ interface FlutterwaveButtonProps {

## Contributing

For information on how you can contribute to this repo, simply [go here](./CONTRIBUTING.md), all contributions are greatly appreciated.
For information on how to contribute to this repo, [visit here](./CONTRIBUTING.md). All contributions are greatly appreciated.

With love from Flutterwave. :yellow_heart:
Loading