
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
flutterwave-react-v3
Advanced tools
This is a react package for implementing Flutterwave gateway with different payment methods.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. See references for links to dashboard and API documentation.
$ npm install flutterwave-react-v3
# or
$ yarn add flutterwave-react-v3
import React from 'react';
import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
export default function App() {
const config = {
public_key: 'FLWPUBK-**************************-X',
tx_ref: Date.now(),
amount: 100,
currency: 'NGN',
payment_options: 'card,mobilemoney,ussd',
customer: {
email: 'user@gmail.com',
phonenumber: '07064586146',
name: 'joel ugwumadu',
},
customizations: {
title: 'my Payment Title',
description: 'Payment for items in cart',
logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
},
};
const handleFlutterPayment = useFlutterwave(config);
return (
<div className="App">
<h1>Hello Test user</h1>
<button
onClick={() => {
handleFlutterPayment({
callback: (response) => {
console.log(response);
closePaymentModal() // this will close the modal programmatically
},
onClose: () => {},
});
}}
>
Payment with React hooks
</button>
</div>
);
}
import React from 'react';
import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';
export default function App() {
const config = {
public_key: 'FLWPUBK-**************************-X',
tx_ref: Date.now(),
amount: 100,
currency: 'NGN',
payment_options: 'card,mobilemoney,ussd',
customer: {
email: 'user@gmail.com',
phonenumber: '07064586146',
name: 'joel ugwumadu',
},
customizations: {
title: 'My store',
description: 'Payment for items in cart',
logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
},
};
const fwConfig = {
...config,
text: 'Pay with Flutterwave!',
callback: (response) => {
console.log(response);
closePaymentModal() // this will close the modal programmatically
},
onClose: () => {},
};
return (
<div className="App">
<h1>Hello Test user</h1>
<FlutterWaveButton {...fwConfig} />
</div>
);
}
Method Name | Parameters | Returns | Description |
---|---|---|---|
closePaymentModal | Null | Null | This methods allows you to close the payment modal via code. |
Please checkout Flutterwave Documentation for other available options you can add to the tag.
FAQs
Official React Package for Flutterwave v3 payment APIs
The npm package flutterwave-react-v3 receives a total of 1,402 weekly downloads. As such, flutterwave-react-v3 popularity was classified as popular.
We found that flutterwave-react-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.