Process Payment (React + Flutterwave)
Tags: react, payment, javascript, webdev
Published: 2022-11-22 13:25:37

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. 
```javascript
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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypk0vtz8hy4jrgefjdbl.PNG)

---

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


```javascript
npm i flutterwave-react-v3

or

yarn add flutterwave-react-v3
```

Next, open `App.js` and paste the code below. 
```javascript
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`
```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. 
```javascript
Card number 4187427415564246 
CVV 828
Expiry 09/32
```


---

Now run the following command to start our app. 
```javascript
npm start
```
You should have something like this on your website: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsyffzpa7gqahdlyvfpi.PNG)


---

Okay, let's put our app to the test by entering payment information. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouwcmkvafldjx63pm8im.PNG)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7auxh5lwobw2ud5ahhkr.PNG)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g33n4k58l523cza77290.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rknqdrs1rsr3dn95bxy.PNG)

---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvab4ijxhkldrifjiee7.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzjy6mdn0olv7twk92ol.png)

---

#### 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](https://developer.flutterwave.com/)
[Flutter react package](https://www.npmjs.com/package/flutterwave-react-v3)