DEV Community

loading...

Flutterwave Integration: Create a donation page with HTML checkout

ijsucceed profile image Jeremiah Ikwuje Updated on ・3 min read

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

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

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

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

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

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

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.

I run an email newsletter helping software talents in Africa get vetted job openings from tech companies. And I’d love to add you to the initial readers. Is that okay? Just click this here to let me know. >> Get Job Openings

Discussion (0)

pic
Editor guide