Checkout Payment Button

Embedding a checkout payment button on your website is a quick and easy way to start accepting cryptocurrency and credit card payments payments.

Checkout payment buttons give merchants more control over how a checkout is created, but require more technical setup.

For a more customizable control over how users are redirected to checkout, we recommend the checkout API.

First, insert this line of HTML code where you want the button to be displayed:

 <button class="poof" id="poof" onclick="request()"> </button>

The button would look something like this at the end and can be placed anywhere.

Next, add these lines of Javascript code to load the button on your page!

<script src="https://www.poof.io/static/api/checkout_v2.js"></script>
<script src="https://www.poof.io/static/api/sdk.js"></script>
<script> const payload = { "username": "Poof", "amount": "10" }</script>

You can change "username": "Poof" to your own username! As well as modify the "Amount" to any amount you'd like to collect on your website.

And now you're done!

Payment Button Customization

For further customization, you can follow the create checkout API on all the fields you could pass in!

Prefill Customer Information

To prefill in customer information from your website, you can modify the last line of the script above like:

<script> const payload = { "username": "Poof", "amount": "10", 
"default": {"name": "my_website_username"}
</script>

Add Products to Deliver

You can add products to checkout and have Poof help with facilitating notifications over email.

To start, you can first create a product in the Poof Dashboard under /products!

Once your product is created, you can click it to view the Unique ID called UUID:

Now, you can add the Unique ID to checkout, and it will automatically be displayed. The price will automatically be re-calculated at checkout. The script might look something like this:

<script> const payload = { "username": "Poof", "amount": "10", 
"product_id": '596293974748', "quantity": "5"} 
</script>

Checkout Customization

To collect shipping address, you can visit the Poof Dashboard under -> profile -> appearance -> collect address!

To modify checkout colors, visiting profile -> appearance will also let you change the checkout to match your business branding.