eoeboh/flutterwave-react-v3

The official React Library for Flutterwave v3 payment APIs.

Flutterwave v3 React Library

Table of Contents

• About
• Getting Started
• Usage
• Deployment
• Built Using
• References

About

This is a react package for implementing Flutterwave gateway with different payment methods.

Getting Started

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.

Installation

$ npm install flutterwave-react-v3

# or
$ yarn add flutterwave-react-v3

Usage

Hooks

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: '[email protected]',
      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>
  );
}

Components

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: '[email protected]',
      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>
  );
}

Other methods and descriptions:

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.

Deployment

• Switch to Live Mode on the Dashboard settings page
• Use the Live Public API key

Securing Your API key

Even when using a public key, it would still be safe to secure it. Please note that the best way to secure your key is by storing it on the server side! However, your public key can be hidden from direct view on your code by simply taking the following steps:

1. Create a .env file at the root of your react app directory

  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2. Assign REACT_APP_ to your API key

Inside the .env file, assign the variable name REACT_APP_ to your API key.

// .env file
REACT_APP_API_KEY=your_api_key
//For example
REACT_APP_FLUTTERWAVE_KEY = 012345

3. Add the .env file to the .gitignore file

// .gitignore file 

# api keys
.env       <-- add this line

# dependencies
/node_modules

After completing the above process, run a git status on your terminal to ensure the .env file does not show in the log

4. Reference the API key via the process.env object

In order to confirm you can now access your API key through this object, kindly add a console.log to the reference statement like this:

console.log(process.env.REACT_APP_FLUTTERWAVE_API_KEY)

If your API key shows on your console, then you have successfully accessed your key through the process.env object. If your key does not show, try restarting your react app again.

This enables you hide your API key from direct access on the source code.

Please NOTE: this is not a secure method. To keep your key fully safe, render it from the server side.

Built Using

• Typescript
• React

Contributors

• Somto Ugeh

Flutterwave API References

• Flutterwave API Doc
• Flutterwave Inline Payment Doc
• Flutterwave Dashboard