HTML Checkout

This document will show you how to collect payments from your customers using Flutterwave inline in a HTML file

Flutterwave standard in HTML

If you want to integrate Flutterwave in a bare HTML file without exposing your secret keys, you can do this just the same way you integrate with the Inline method.

Here's a sample implementation:

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="[email protected]" />
  <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="3400" />
  <input type="hidden" name="currency" value="NGN" />
  <input type="hidden" name="meta[token]" value="54" />
  <input type="hidden" name="redirect_url" value="https://demoredirect.localhost.me/" />
  
  <button type="submit">CHECKOUT</button> 
</form>

This will provide the same experience as our Flutterwave standard option.
That's because, you can pass the same exact standard payload to the HTML form. All you need to do is convert the objects in the Standard payload to their HTML equivalents.

So if you have an object, like this:

{

   customer: {
      name: "Jesse Pinkman"
   }
}```

It would translate to this HTML:

`<input type="text" name="customer[name]" value="Jesse Pinkman" />`

This way, you can integrate our Flutterwave standard option completely via HTML. Check out this demo for more context



[block:embed]
{
  "html": "<iframe height='350' scrolling='no' src='https://codepen.io/kenny_io/embed/JjGmjgW' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
  "url": "https://codepen.io/kenny_io/pen/JjGmjgW",
  "title": "Flutterwave HTML Checkout Sample",
  "favicon": "https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico",
  "image": "https://assets.codepen.io/1239369/internal/screenshots/pens/JjGmjgW.default.png?format=auto&amp;ha=false&amp;height=360&amp;quality=75&amp;v=1&amp;version=1594859942&amp;width=640"
}
[/block]



[block:callout]
{
  "type": "warning",
  "title": "Beware!",
  "body": "In your live implementation where customers will use this, only the pay button should be visible to your users."
}
[/block]