Abayomi Ogunnusi

Posted on Nov 22, 2022

Process Payment (React + Flutterwave)

#react #payment #javascript #webdev

Hello there, In this short post, I will demonstrate how to connect your ReactJS application to the flutterwave-react-v3 package.

Prerequisite

◐ Install Node JS on your computer
◐ Basic ReactJS knowledge

What is flutter wave

Flutterwave is a platform for payment processing. Consider it similar to Stripe or any other payment gateway.

Project Setup

Type the command below to create a new react project.

npx create-react-app ./

🎯 Let's remove any unnecessary files so we can begin with a lean project setup. Following the preceding step, you should have the following files and folders.

🎯 Let us now install the package that will allow us to connect to flutterwave. [Source]https://www.npmjs.com/package/flutterwave-react-v3)

npm i flutterwave-react-v3

or

yarn add flutterwave-react-v3

Next, open App.js and paste the code below.

import "./index.css";

import { useState } from "react";
import { useFlutterwave, closePaymentModal } from "flutterwave-react-v3";

export default function App() {
  const [amount, setAmount] = useState(0);
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");

  const config = {
    public_key: "FLWPUBK_TEST-e7c8f332b9d34b01b958cf4f4f643018-X",
    tx_ref: Date.now(),
    amount: amount,
    currency: "NGN",
    payment_options: "card,mobilemoney,ussd",
    customer: {
      email: email,
      phone_number: phone,
      name: name,
    },
    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">
      <div className="container">
        <input
          type="number"
          placeholder="Amount"
          onChange={(e) => setAmount(e.target.value)}
        />
        <input
          type="text"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="text"
          placeholder="Name"
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="text"
          placeholder="Phone"
          onChange={(e) => setPhone(e.target.value)}
        />

        <button
          onClick={() =>
            handleFlutterPayment({
              callback: (response) => {
                console.log(response);
                closePaymentModal();
              },
              onClose: () => {},
            })
          }
        >
          Pay
        </button>
      </div>
    </div>
  );
}

Let's add some CSS styling.

In index.css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

body{
  font-family: 'Poppins', sans-serif;
  background: #e1e1e1;
}

.App{
  text-align: center;
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;

}

.container input{
  width: 100%;
  max-width: 400px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.container button{
  width: 100%;
  max-width: 400px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  background: teal;
  cursor: pointer;
  color: #fff;
}

.container button:hover{
  background: #333;
}

🎯 When you sign up, you will be given your Flutterwave public key. It looks like :FLWPUBK_TEST-*****************************-X

Test card details

Flutterwave has provided us with a test card for our ongoing development.

Card number 4187427415564246 
CVV 828
Expiry 09/32

Now run the following command to start our app.

npm start

You should have something like this on your website:

Okay, let's put our app to the test by entering payment information.

You are redirected to the flutterwave payment page when you click the pay button.

🎯 Next, enter the above-mentioned test card information.

Then click the submit and continue button.
You will be redirected to a page where you can enter the otp that was sent to you by your issuer.

We see the response logged to our console after a successful payment, and you could redirect to another page instead of logging.
We simply logged the response for the sake of simplicity.

You should also receive an email from flutterwave confirming the transaction.

Conclusion

I hope this brief post helped you get started with Flutterwave payment using ReactJs.
Flutterwave can also be used in other ways, such as inline method and so on. Thanks for reading.

Source code: https://github.com/drsimplegraffiti/flutterwave-payment-react

Resource

Flutterwave Documentation
Flutter react package

Top comments (5)

Wilmela • Nov 24 '22

Thanks for sharing

Abayomi Ogunnusi • Nov 24 '22

Glad you found it useful

Stephen Azosike • Dec 13 '23

please I have been trying to redirect to another page instead of logging into the console but I have not been successful. Please I need you to help me on how to redirect to another page successfully.
Thank you.