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
Top comments (6)
Thanks for sharing
Glad you found it useful
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.
Thank you so much
Thanks for this
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.