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.
Top comments (0)