Jeremy Ikwuje

Posted on Jan 5, 2021 Edited on Jun 12, 2021

Flutterwave Integration: Create a donation page with HTML checkout

#html #webdev #flutterwave

In this guide, you’ll learn how to accept payment using Flutterwave HTML checkout.

This method is excellent for making anonymous payments; people pay without revealing their details like email *or *names.

Here is a sample Flutterwave HTML checkout code:

<form method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">
    <input type="hidden" name="public_key" value="FLWPUBK_TEST-SANDBOXDEMOKEY-X" />
    <input type="hidden" name="customer[email]" value="jessepinkman@walterwhite.org" />
    <input type="hidden" name="customer[phone_number]" value="0900192039940" />
    <input type="hidden" name="customer[name]" value="Jesse Pinkman" />
    <input type="hidden" name="tx_ref" value="bitethtx-019203" />
    <input type="hidden" name="amount" value="1000" />
    <input type="hidden" name="currency" value="NGN" />
    <input type="hidden" name="redirect_url" value="https://demoredirect.localhost.me/" />

    <button type="submit">CHECKOUT</button> 
</form>

public_key

The input value with the name public_key is where you enter your Flutterwave public key.

<input type="hidden" name="public_key" value="PUBLIC_KEY_HERE" />

txt_ref

The txt_ref is a unique reference given to each transaction. You can always generate a unique reference for each transaction.

<input type="hidden" name="tx_ref" value="UNIQUE_REF" />

Let’s create a Donation page

You’re going to implement a donation page. Anyone that cares only has to enter an amount and click on Donate; their personal details aren’t needed in this case.

Let’s get practical.

Create two HTML pages:

book.html
success.html

The book.html will contain the actual book page. And button will display for anyone to donate.

The success.html will show a thank-you page when anyone successfully makes a payment.

Pasting the code

Copy the following code and paste inside the book.html:

<div class="wrapper">
  <div class="photo">
    <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9uYXRpb258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=400&q=80" alt="" />
    <div class="info">
      <h2>Save a child campaign</h2>
      <form method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">
        <input type="hidden" name="public_key" value="YOUR PUBLIC KEY" />
        <input type="hidden" name="tx_ref" value="save-a-child-donation" />
        <input type="hidden" name="customer[email]" value="donate@gmail.com" />
        <input type="text" name="amount" placeholder="Amount" />
        <input type="hidden" name="currency" value="NGN" />
        <input type="hidden" name="redirect_url" value="http://example.com/success.html" />
        <button type="submit">Donate Now</button>
      </form>
    </div>
  </div>
</div>

This will display a donation page as shown in the previous image above.

Now add this to the success.html:

<div class="wrapper">
    <div class="photo">
    <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9uYXRpb258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=400&q=80" alt="" />
    <div class="info">
        <h2>Thank you for your Donation.</h2>
    </div>
    </div>
</div>

Now, you can test the donation page and see.

By entering an amount and hitting Donate, you will be taken to Flutterwave payment checkout.

When you make a payment, you will be redirected back to the success.html

Conclusion

Congratulation, you just saw how to integrate Flutterwave by using the HTML Checkout.

DEV Community