How do you add product payment buttons for checkout?

Poof offers a product payment button that makes collecting crypto and fiat payments simple with just a few lines of code. Payment buttons handle all purchase quantity, order management, and pricing. They also will redirect to your Poof Checkout where you can collect any type of major payment method.

Payment buttons come in light mode (default) and dark mode. You can also change your own CSS to change the button layout.

Standard integration time: 5 minutes.

Regular Payment Button Example

Dark Mode Payment Button Example

This is the same payment button you see in the demo and across many E-Commerce sites!

Now. Let's get started with integrating.

Step 1. Create and Fetch your product information

In order to generate a payment button on your website, you'll need to create a product in your Poof Dashboard. This will include name, price, and description. Once you've created a product, fetch the Unique ID of the product.

We've found out that our Unique ID Is 596293974748

Step 2: Add Two Javascript Packages to your HTML file

These javascript packages will help your website generate the payment button as well as call the Checkout API to generate a payment page.

You would normally put the javascript packages at the very bottom of your HTML file.

<script src="https://www.poof.io/static/assets/js/jquery-3.6.0.js"></script>
<script defer src="https://www.poof.io/static/api/poof-payment-button.js"></script>

Step 3: Add Two Lines of HTML Code to your HTML file.

You would want to put two lines of HTML code outside any existing body or div class! At the top of your HTML file would make it work!

<div id = "poof_wrapper">
<div id = "poof_payment_modal"></div></div>

Step 4: Add Product Information and ID to any HTML element

Append the line below inside any existing < div > or < a > or < button > element in your HTML. You would want to modify the line "poof('596293974748')", with your unique ID within the numbers. In this case, our unique ID is 596293974748.

onclick="poof('596293974748')" id="poof_toggle

An example of this could look like:

<a onclick="poof('596293974748')" id="poof_toggle">open modal</a>

For dark mode, you would need to add the parameter dark.

<div onclick="poof('596293974748', 'dark')" id="poof_toggle"> Your Code </div>

Step 5: Try it out!

You're all done! Using the Poof payment button makes it easy to have many products in one E-commerce page and have customers pay after product selection. All you need to do is modify the product unique ID for each < div > element and in this case, Filter Pods, Pitcher Packs, and Bags & Portion Packs.

A full working example is down below!

Working Example

<a onclick="poof('596293974748')" id="poof_toggle">open modal</a>

<div id = "poof_wrapper">
<div id = "poof_payment_modal"></div></div>

<script src="https://www.poof.io/static/assets/js/jquery-3.6.0.js"></script>
<script src="https://www.poof.io/static/api/poof-payment-button.js"></script>

Clicking Open Modal in your screen should make this payment button pop up.

Which then redirects to your settings in checkout!