DEV Community

Cover image for Process Payment (React + Flutterwave)
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

 

Process Payment (React + Flutterwave)

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 ./
Enter fullscreen mode Exit fullscreen mode

🎯 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.

Image description


🎯 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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

🎯 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
Enter fullscreen mode Exit fullscreen mode

Now run the following command to start our app.

npm start
Enter fullscreen mode Exit fullscreen mode

You should have something like this on your website:

Image description


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

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

Image description

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

Image description

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.

Image description


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.

Image description

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

Image description


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

Oldest comments (3)

Collapse
 
wilmela profile image
Wilmela

Thanks for sharing

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Glad you found it useful

Collapse
 
desphixs profile image
Destiny Franks

This is really amazing, can you try adding a backend framework like django to this, so that the payment and amount are processed from the back end.

5 Websites To Learn Frontend Web Development Faster 💨

>> Check out this classic DEV post <<