When you create a payment link via POST /api/links, the response includes two ready-to-use embed snippets: an iframe and a JavaScript widget. Both load the full hosted checkout experience inside your own page, so your customers never have to leave your site.
Create a new payment link for each transaction. Every link has a unique deposit address, which ensures Kibble can match incoming payments to the correct order.
Iframe embed
The iframe_snippet field in the POST /api/links response contains a complete <iframe> tag you can paste directly into your HTML. The recommended dimensions are 400×600px.
<iframe
src="https://pay.kibble.sh/pay/abc12345"
width="400"
height="600"
frameborder="0">
</iframe>
Use the iframe when you need predictable dimensions and full layout control. It works in any HTML environment without requiring JavaScript.
The js_widget_snippet field returns a single <script> tag that injects the checkout widget into your page automatically.
<script src="https://pay.kibble.sh/w.js" data-slug="abc12345"></script>
The JS widget handles its own sizing and positioning, making it the simpler option when you just want to drop a checkout into a page without managing iframe dimensions yourself.
Retrieving your snippets
Both snippets are returned in the POST /api/links response:
{
"slug": "abc12345",
"payment_link": "https://pay.kibble.sh/pay/abc12345",
"iframe_snippet": "<iframe src=\"https://pay.kibble.sh/pay/abc12345\" width=\"400\" height=\"600\" frameborder=\"0\"></iframe>",
"js_widget_snippet": "<script src=\"https://pay.kibble.sh/w.js\" data-slug=\"abc12345\"></script>"
}
You can also construct either snippet manually using the slug from the response and the patterns shown above.