Flutterwave Integration: Create a donation page with HTML checkout
Tags: html, webdev, flutterwave
Published: 2021-01-05 14:29:54

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:
```html
<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.
```html
<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.
```html
<input type="hidden" name="tx_ref" value="UNIQUE_REF" />
```

### Let’s create a Donation page

![](https://cdn-images-1.medium.com/max/800/1*kgxi0bAbzxGPnQlHa6AT4Q.png)

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`:
```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`:
```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.

![](https://cdn-images-1.medium.com/max/800/1*pIn-TmDhUNh5vH81yCwzFQ.png)

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.