Flutter Wave Payment Integration
Tags: javascript, flutter, codenewbie, productivity
Published: 2021-07-23 13:24:31

Hello, fams♣️!...I was given a project and part of the usability consist of a payment channel integration using <mark>flutter wave</mark>. I feel I should document how I went about it. I have included a fragment of the project in this post. Click the `HTML` link in the TOC to skip to the code base.



## Prerequisite
🎯HTML
🎯Materialize CDN
🎯JavaScript
🎯Flutterwave account


![gif](https://media.giphy.com/media/cO7cUsYeSVjqe70ndx/giphy.gif)

## Table Of Contents
🔗 [HTML code](#HTML-1)
🔗 [JavaScript code](#JS-1)
🔗 [Conclusion](#Conclusion)

In this post, I chose the Inline Callback Implementation, feel free to use other payment options at your disposals such as Webhook or inline redirect methods.

**Note**: 
📝 Ensure you switch your flutter account from <mark>Live Mode</mark> to test mode before you start anything after registration. (Safety first 🔐)
📝 Ensure you put your Flutterwave API keys (Secret key or Encryption key ID) in the `env` file and insert them in your `.gitignore` to prevent it from being pushed to the public. (Safety Second 🔐) because secret keys can perform any API request to Flutterwave without restriction. 


Go to flutterwave, Sign-Up and get your Public Key.
![api key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j82rv7iv6pebx1tvgeht.png)
 

Now let's head to our IDE. Create `index.html` file and add the flutter wave script tag just above the `</body>` inside your `HTML` boilerplate 
![carbon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jarkvcjm2sj3zofpjk4.png)

Next, we embbed Flutterwave in our code using this JavaScript flow
<a name="JS-1">
```JavaScript
<script>
    const form = document.getElementById("payForm");
    form.addEventListener("submit", makePayment);

    function makePayment() {


        FlutterwaveCheckout({
            public_key: "*******_TEST-********************************-X",
            tx_ref: "ay_" + Math.floor((Math.random() * 1000000000) + 1),
            amount: document.getElementById("amount").value,
            currency: "NGN",
            customer: {
                email: document.getElementById("email").value,
                phonenumber: document.getElementById("phoneNumber").value,
                name: document.getElementById("fullName").value
            },
            callback: function (data) {
                console.log(data);
                const reference = data.tx_ref;
                alert("payment was successfully completed" + reference)
            },
            customizations: {
                "title": "Wonderful Direct pharmacy",
                "description": "payment integration",
                "logo": "https://image.flaticon.com/icons/png/512/809/809957.png"
            }
        });
    }
</script>
```

## Result
This is where the public key comes in. Insert your public key in the script tag that I starred. If you do not include it will run and return an error. To try out the final result, enter your dummy details and click on the `make payment` button.

<a name="HTML-1">
{% codepen https://codepen.io/drsimplegraffiti/pen/MWmJGmb %}<a>

</a>

## Flutterwave Test Card
Use this `dummy` test MasterCard PIN authentication when asked for card numbers, pin, CVV, and OTP.
![carbon (4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nbqeriu3vae1iad1dsp.png)
 
## Conclusion <a name="Conclusion"></a>
If you follow the steps religiously, you will be directed to flutterwave payment page, and also an email will be sent to that effect. I hope this is helpful thanks for reading.

## Discuss
What other payment options can you recommend?

## References
 
📌[Flutter wave SignUp Link](https://dashboard.flutterwave.com/signup)
📌[Flutter wave test card Link](https://developer.flutterwave.com/docs/test-cards)
📌[Flutter Node v3 node link](https://www.npmjs.com/package/flutterwave-node-v30)

[Back to top](#top)

{% github drsimplegraffiti/drsimplegraffiti no-readme %}