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!
