DEV Community

loading...
Cover image for Flutter Wave Payment Integration

Flutter Wave Payment Integration

Abayomi Ogunnusi
Web developer
・2 min read

Hello, fams♣️!...I was given a project and part of the usability consist of a payment channel integration using flutter wave. 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

Table Of Contents

🔗 HTML code
🔗 JavaScript code
🔗 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 Live Mode 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

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

Next, we embbed Flutterwave in our code using this JavaScript flow

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

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.


Flutterwave Test Card

Use this dummy test MasterCard PIN authentication when asked for card numbers, pin, CVV, and OTP.
carbon (4)

Conclusion

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
📌Flutter wave test card Link
📌Flutter Node v3 node link

Back to top

GitHub logo drsimplegraffiti / drsimplegraffiti

Config files for my GitHub profile.

Discussion (0)