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 } 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);
},
onClose: () => {},
});
}}
>
Payment with React hooks
</button>
</div>
);
}import React from 'react';
import { FlutterWaveButton } 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);
},
onClose: () => {},
};
return (
<div className="App">
<h1>Hello Test user</h1>
<FlutterWaveButton {...fwConfig} />
</div>
);
}Please checkout Flutterwave Documentation for other available options you can add to the tag.
- Switch to Live Mode on the Dashboard settings page
- Use the Live Public API key
- Typescript
- React