Flutter Wave Payment Integration

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

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

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

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>

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.

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.