Payment

Payment Servers API

Introduction

Authentication

Generating API Keys

Subscription Products

Retrieve all Subscription Products

Retrieve Subscriptions For Subscriber

Retrieve Subscriptions For Subscriber and Product Id

Retrieve the Subscription Status of a Product with a Subscriber’s Metadata

Accounts, API Keys & Webhooks

Create an account

Resend Verification Email

Update an account

Retrieve an account

List all connected accounts

Delete an account

Create API Key for connected account

Retrieve API Keys for connected account

Disable API Key for connected account

Create Webhook for connected account

Disable Webhook for connected account

Retrieve Webhooks for connected account

Agreements

Cancel an Agreement

Retrieve an agreement

Retrieve all agreements

<p class="slate-p " >Coinsub Merchant Wallets are secure, non-custodial wallets powered by <a href="https://www.dfns.co/" target="_self">DFNS’s</a> battle-tested wallet infrastructure. Designed with robust key management and WebAuthn-based authentication, these wallets ensure enterprise-grade security without exposing private keys or relying on vulnerable seed phrases. With Merchant Wallets, Coinsub merchants don’t need to connect external wallets or manage third-party integrations. Everything is built-in—making on-chain payments, managing funds, and receiving crypto subscriptions frictionless and secure, straight from your Coinsub dashboard.</p><p class="slate-p " >To get started with a merchant platform wallet of your own, sign up at <a href="https://test.coinsub.io" target="">test.coinsub.io</a> (development environment) or <a href="https://app.coinsub.io" target="">app.coinsub.io</a> (production).</p><p class="slate-p " ></p>

Merchant Wallet Transfers

<p class="slate-p " >Merchant wallets on our platform support two types of credentials:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">FIDO2 / Passkeys</strong>
FIDO2 credentials (commonly referred to as passkeys) offer a secure, passwordless authentication method based on public key cryptography. These credentials are typically linked to a user and stored in secure authenticators (e.g., platform authenticators like Face ID, or external security keys). Upon sign up, a default passkey will be added to your platform account. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Platform Key Credentials</strong>
Platform Key Credentials are asymmetric key pairs managed and operated by the platform</div></li></ol><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >How These Types of Keys Work Together</h3><p class="slate-p " >When you sign up for the platform, a <strong class="slate-bold">Platform Key Credential</strong> is automatically created for you. This key, managed by the platform, allows for secure, programmatic signing operations and comes with a default transaction allowance of <strong class="slate-bold">$100</strong>.</p><p class="slate-p " >As an added layer of protection, once your <strong class="slate-bold">wallet balance exceeds $10</strong>, you&apos;ll be required to <strong class="slate-bold">set up a Passkey (FIDO2 credential)</strong>. Passkeys are tied to your personal device and identity - using technologies like Face ID or security keys - to provide passwordless, phishing-resistant authentication.</p><p class="slate-p " >By combining both key types, our platform ensures seamless and secure usage with platform-controlled keys, while strengthening your account security through user-bound passkeys as your account value increases.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Wallet Credentials

<p class="slate-p " >Traditionally, sending crypto funds requires users to pay <em class="slate-italic">gas fees</em> using the native token of the blockchain they&apos;re operating on — for example, ETH on Ethereum or MATIC (POL) on Polygon. This can be a barrier, especially for users who don’t already hold these tokens.</p><p class="slate-p " >To improve the user experience, we’ve introduced <strong class="slate-bold">gasless transfers</strong> — a simple and seamless way to send funds without needing to hold or spend native tokens. This makes transactions faster, easier, and more accessible for all users.</p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >How Our Gasless Transfers Work</h3><p class="slate-p " >Gasless transfers on our platform can be executed in two different ways:</p><h4 class="slate-h4 " >1. Platform-Signed Transfers</h4><p class="slate-p " >In this mode, the <strong class="slate-bold">Platform handles the transaction signature on behalf of the Merchant</strong>. The Merchant grants the Platform permission to sign transfers up to a specified threshold (e.g. $100 per transfer). If a transfer exceeds this threshold, the Platform will request a manual signature from the Merchant before proceeding. This setup is ideal for minimizing operational friction while maintaining control over large or sensitive transfers.</p><h4 class="slate-h4 " >2. Merchant-Signed Transfers</h4><p class="slate-p " >Alternatively, the <strong class="slate-bold">Merchant can handle the signing process directly</strong>, maintaining full control over every transaction. In this case, each transfer must be individually approved and signed by the Merchant&apos;s Passkey. </p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Security Restrictions</h3><p class="slate-p " >To protect users from potential abuse or unauthorized activity, <strong class="slate-bold">gasless transfers are only permitted between wallets registered within our system</strong>. This ensures traceability, accountability, and reduces the risk of fraud or phishing attempts.</p><p class="slate-p " ></p>

Wallet Transfers

<p class="slate-p " >To initiate a new transfer you must provide the following parameters:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">to_address</code>: The recipient’s email address (must be registered with our platform) or wallet - Use the same email used when creating a purchase session. </div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">amount</code>: Amount of tokens to transfer </div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">chainId</code>: ID of the target blockchain. </div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">token</code>: Symbol of the token being transferred (e.g., USDC, USDT, PYUSD) </div></li></ul><p class="slate-p " >This endpoint transfers funds directly to the recepieng without requiring any signatures from the merchant. If the <code class="slate-code">amount</code>exceeds the allowance set at wallet security page, the API would not process the transfer. </p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Important Notes</h2><div class="slate-div"><p class="slate-p " >⚠️ The recipient&apos;s email must be registered with our platform to prevent unauthorized or accidental transfers.</p><div class="slate-div"><p class="slate-p " >⚠️ <code class="slate-code">chainId</code>values for the<strong class="slate-bold"> TEST ENVIRONMENT </strong>are: </p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">80002 for Polygon</div></li><li class="slate-li " ><div style="position:relative">84532 for Base</div></li><li class="slate-li " ><div style="position:relative">11155111 for Ethereum</div></li></ul><div class="slate-div"><div class="slate-div"><p class="slate-p " >⚠️ <code class="slate-code">chainId</code>values for the<strong class="slate-bold"> PRODUCTION ENVIRONMENT </strong>are: </p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">137 for Polygon</div></li><li class="slate-li " ><div style="position:relative">8453 for Base</div></li><li class="slate-li " ><div style="position:relative">1 for Ethereum</div></li></ul></div></div></div></div><p class="slate-p " ></p>

Create Transfer Request

<p class="slate-p " >This endpoint transfers funds directly to the recipient <strong class="slate-bold">without requiring any signatures from the merchant</strong>. However, if the transfer amount exceeds the allowance set on the <strong class="slate-bold">Wallet Security</strong> page, the API <strong class="slate-bold">will not process the transfer</strong>.</p><p class="slate-p " >If your API transfers <strong class="slate-bold">regularly exceed the default limit of $100</strong>, you have <strong class="slate-bold">two options</strong>:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Increase the allowance on the platform</strong></div></li><li class="slate-li " ><div style="position:relative">Navigate to <strong class="slate-bold">Settings → Wallet Security → Grant/Transfer Permission</strong></div></li><li class="slate-li " ><div style="position:relative">Update the allowance to the amount you require</div></li></ol><p class="slate-p " >OR</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Send the Transfer Using the Wallet UI</strong></div></li><li class="slate-li " ><div style="position:relative">Go to the <strong class="slate-bold">Wallet </strong>page, locate the token you want to send, and click the <strong class="slate-bold">Send</strong> button next to it.</div></li><li class="slate-li " ><div style="position:relative">Enter the desired <strong class="slate-bold">amount</strong> and the <strong class="slate-bold">recipient&apos;s wallet address or email</strong>.</div></li></ol><p class="slate-p " ></p>

When a Signature is Required

Payments

Retrieve a payment

Retrieve all payments

Purchase Sessions

Create A Purchase Session

Retrieve Purchase Session Status

Delete Purchase Session 

<p class="slate-p " >Force expires a specific purchase session.</p><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Expire Purchase Session

Purchase Messages

Request Purchase Message to Sign

Submit Signed Purchase Message

Permit Messages

Submit Signed Permit Message

<p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">This comprehensive guide provides detailed information about integrating Coinsub payment processing into your application. Coinsub offers four distinct integration methods designed to accommodate different technical requirements and use cases, from simple no-code solutions to advanced API integrations with full customization capabilities.</span></p><p class="slate-p " ></p><div class="table-container" style="width:100%;
  min-width:100%;"><table class="slate-table" style="min-width:100%"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100px;">Option</div><div style="width:100px;">Integration Level</div><div style="width:100px;">Customization</div><div style="width:100px;">Hosted Checkout UI</div></div><colgroup ><col style="width:initial"><col style="width:initial"><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">1. Standard Checkout Link</span></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">🔹 No Code</span></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">✅ (full control)</span></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">✅</span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >2. Button Embed</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Low Code</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (button color)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >3. iFrame Embed</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Medium Code</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (full control)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >4. Headless API</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Developer</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (fully programmable)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >❌</p></td></div></tr></tbody></table></div><p class="slate-p " ></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Which Integration Option Should You Use?</h2><p class="slate-p " >Choosing the right integration depends on your <strong class="slate-bold">technical resources</strong>, <strong class="slate-bold">business model</strong>, and <strong class="slate-bold">how much control</strong> you want over the checkout experience.</p><h3 class="slate-h3 " ><span style="color:rgb(0, 0, 0)">🔹 </span>Standard Checkout Link – Best for Non-Technical Merchants</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Individual creators</div></li><li class="slate-li " ><div style="position:relative">Small merchants or service providers</div></li><li class="slate-li " ><div style="position:relative">Teams with no dev resources</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Zero development required</div></li><li class="slate-li " ><div style="position:relative">Shareable across any platform (email, social, website)</div></li><li class="slate-li " ><div style="position:relative">Fastest way to start accepting stablecoin payments</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Button Embed – Best for Low-Code Teams</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Marketing teams with light dev help</div></li><li class="slate-li " ><div style="position:relative">Shopify, WordPress, or Webflow users</div></li><li class="slate-li " ><div style="position:relative">Sites that need a call-to-action button with minimal backend setup</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Simple HTML embed</div></li><li class="slate-li " ><div style="position:relative">Button styling via <code class="slate-code">data-color</code></div></li><li class="slate-li " ><div style="position:relative">Redirects to secure hosted checkout</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Modal iFrame – Best for Custom Frontends That Want In-Site UX</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Sites with web developers</div></li><li class="slate-li " ><div style="position:relative">Businesses that care about seamless branding and user experience</div></li><li class="slate-li " ><div style="position:relative">Publishers, SaaS sites, or gated content platforms</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Fully embedded experience</div></li><li class="slate-li " ><div style="position:relative">Controlled modal styling</div></li><li class="slate-li " ><div style="position:relative">Checkout stays within your UI context</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Headless API – Best for Crypto-Native Platforms &amp; Advanced Teams</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Web3 apps, dApps, DeFi platforms</div></li><li class="slate-li " ><div style="position:relative">Teams already managing wallets or signing flows</div></li><li class="slate-li " ><div style="position:relative">Platforms needing custom onboarding, wallet UX, or nonstandard product logic</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Full control over the payment process</div></li><li class="slate-li " ><div style="position:relative">You manage wallet interaction and signing</div></li><li class="slate-li " ><div style="position:relative">Suitable for integrations with other on-chain or backend systems</div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p>

Integration Options

<p class="slate-p " >Before using any integration option, follow these steps to create a product and get its unique checkout link:</p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Visit the Merchant Dashboard</strong>
 <a href="https://test.coinsub.io/merchant/products/" target="_new">https://test.coinsub.io/merchant/products/</a></div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Click “+ Add Product”</strong>
Fill in the product name, pricing, and other details. You can create one-time or recurring subscription products. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Get Your Product Link &amp; ID</strong>
After creation, you’ll be shown a <strong class="slate-bold">unique product checkout link</strong>, like: <a href="https://test-buy.coinsub.io/9d205d5012" target="_self">https://test-buy.coinsub.io/9d205d5012</a>
This ID (9d205d5012) is your product identifier, and it&apos;s used in embed code, API requests, and iframe integrations.</div></li></ol><p class="slate-p " >Now, let’s look at how you can integrate Coinsub with your site or product.</p><p class="slate-p " ></p>

Create a Product

<p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Best for:</strong></span><span style="color:oklch(0.3039 0.04 213.68)"> Merchants who need to start accepting payments immediately without any technical implementation</span></p><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">This is the simplest way to accept payments with Coinsub. No coding knowledge is required - merchants simply create products through the merchant dashboard and share checkout links with customers.</span></p><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Implementation Steps:</span></h2><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Create a product</strong></span><span style="color:oklch(0.3039 0.04 213.68)"> on the merchant dashboard</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Configure payment settings and preferences</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Get your checkout link, </strong></span><span style="color:oklch(0.3039 0.04 213.68)">example</span><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">:</strong></span><span style="color:oklch(0.3039 0.04 213.68)"> </span><a href="https://test-buy.coinsub.io/9d205d5012" target="_self"><span style="color:oklch(0.3039 0.04 213.68)">https://test-buy.coinsub.io/9d205d5012</span></a></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Share the link </strong></span><span style="color:oklch(0.3039 0.04 213.68)">(send the link to customers via email, SMS, or social media or embed the link in your website, app, or marketing materials)</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Customers click the link to access the Coinsub checkout UI</span></div></li></ol><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Customer Experience:</span></h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Customers are redirected to the secure Coinsub checkout page</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Full payment processing with stablecoin support</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Automatic order confirmation</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Mobile-optimized checkout experience</span></div></li></ul><p class="slate-p " ></p>

Standard Checkout Link

<p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Best for:</strong></span><span style="color:oklch(0.3039 0.04 213.68)"> Websites and applications that want seamless payment buttons with minimal development effort</span></p><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">This method allows you to embed customizable payment buttons directly into your website with just a single script tag.</span></p><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">Look:</span></p><div style="text-align:left"><img src="https://d24lr4zqs1tgqh.cloudfront.net/39059c7a-257d-4175-8cbb-23331b558fa7.jpg" style="width:auto;height:auto" /></div><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Prerequisites:</span></h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">A product created via the merchant dashboard</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Basic HTML/JavaScript knowledge for customization</span></div></li></ul><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Implementation:</span></h2><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">After creating your product, you&apos;ll receive an HTML code snippet:</span></p><div class="code-block-wrapper"  style="width:60%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"><script class="crypto-button-script" data-id="9d205d5012" data-color="#0484fc" src="https://test-buy.coinsub.io/djs/button.js"></script> </textarea><code class="language-html keep-markup drop-tokens"></code></pre></div><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">After receiving the snippet, you can embed it as shown in this </span><a href="https://codesandbox.io/p/sandbox/button-embed-m5gthv" target=""><span style="color:oklch(0.3039 0.04 213.68)">Demo project&apos;s</span></a><span style="color:oklch(0.3039 0.04 213.68)"> </span><a href="index.html" target="_self"><span style="color:oklch(0.3039 0.04 213.68)">index.html</span></a> <span style="color:oklch(0.3039 0.04 213.68)">with various changes to button attributes for your brand.</span></p><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Customization Options:</span></h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Button Color</strong></span><span style="color:oklch(0.3039 0.04 213.68)">: Modify the </span><span style="background-color:oklch(var(--background-color-200));color:oklch(0.3039 0.04 213.68)"><code class="slate-code">data-color</code></span><span style="color:oklch(0.3039 0.04 213.68)"> attribute to match your brand</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Button Size</strong></span><span style="color:oklch(0.3039 0.04 213.68)">: Additional sizing options available in the button library</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Custom CSS</strong></span><span style="color:oklch(0.3039 0.04 213.68)">: Apply additional styling to integrate with your design syste</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)"><strong class="slate-bold">Product Id</strong></span><span style="color:oklch(0.3039 0.04 213.68)">: Modify the </span><span style="background-color:oklch(var(--background-color-200));color:oklch(0.3039 0.04 213.68)"><code class="slate-code">data-id</code></span><span style="color:oklch(0.3039 0.04 213.68)"> attribute to reuse for another product</span></div></li></ul><p class="slate-p " ></p>

Button Embed

<p class="slate-p " ><span style="color:var(--tw-prose-bold)"><strong class="slate-bold">Best for:</strong></span><span style="color:oklch(0.3039 0.04 213.68)"> Providing a seamless checkout experience while keeping customers on your website</span></p><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">This method embeds the checkout experience directly into your website using an iframe within a modal overlay, ensuring customers never leave your site during the payment process.</span></p><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">Look: </span></p><p class="slate-p " ></p><div style="text-align:left"><img src="https://d24lr4zqs1tgqh.cloudfront.net/60cf256b-28c1-490c-86fa-1631b6113385.jpg" style="
              width:1296px;
	            height:2042px;
	            aspect-ratio:1296 / 2042"
         /></div><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Prerequisites:</span></h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">A product created via the merchant dashboard</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">Basic HTML/JavaScript knowledge for customization</span></div></li></ul><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Implementation:</span></h2><p class="slate-p " ><span style="color:oklch(0.3039 0.04 213.68)">After creating your product, you should use your checkout link to generate the iframe code as follows: </span></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"><iframe
          src="https://test-buy.coinsub.io/9d205d5012"
          allow="clipboard-read *; publickey-credentials-create *; publickey-credentials-get *"
        ></iframe> </textarea><code class="language-html keep-markup drop-tokens"></code></pre></div><p class="slate-p " >Y<span style="color:oklch(0.3039 0.04 213.68)">ou can embed it as shown in this </span><a href="https://codesandbox.io/p/sandbox/iframe-embed-qm5rz4" target="_self"><span style="color:oklch(0.3039 0.04 213.68)">Demo project&apos;s</span></a><span style="color:oklch(0.3039 0.04 213.68)"> index.html</span> <span style="color:oklch(0.3039 0.04 213.68)">file.</span> </p><h2 class="slate-h2 " ><span style="color:oklch(0.3039 0.04 213.68)">Security Considerations:</span></h2><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">The iframe includes necessary permissions for secure crypto payments</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">All payment processing occurs within the Coinsub secure environment</span></div></li><li class="slate-li " ><div style="position:relative"><span style="color:oklch(0.3039 0.04 213.68)">No sensitive payment data is handled by your website</span></div></li></ul><p class="slate-p " ></p>

iFrame Embed

<p class="slate-p " ><strong class="slate-bold">Best for:</strong> Advanced integrations requiring full control over the payment flow, UI, and custom business logic.</p><p class="slate-p " >This method allows you to programmatically create purchase sessions via the platform’s API. You can then:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Use the returned checkout link with any of the standard integration methods, <strong class="slate-bold">or</strong></div></li><li class="slate-li " ><div style="position:relative">Build your own UI, implement custom signing flows, and handle blockchain transactions directly.</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Prerequisites</h3><p class="slate-p " >Before using the Headless API, ensure you have:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">An API key (see <a href="https://app.theneo.io/crypto-payment/api/coinsub-api/generating-api-keys" target="_self">how to create an API key</a>)</div></li><li class="slate-li " ><div style="position:relative">Familiarity with HTTP requests and handling JSON</div></li><li class="slate-li " ><div style="position:relative">Capability to manage wallet connections and signature flows (e.g., using MetaMask, WalletConnect)</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Summary</h3><p class="slate-p " >With the headless integration flow, the platform allows you to:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Create a purchase session per customer</div></li><li class="slate-li " ><div style="position:relative">Retrieve a typed data message (EIP-712) for signing the purchase message</div></li><li class="slate-li " ><div style="position:relative">Implement a custom UI for checkout that includes wallet connection + signing experience</div></li><li class="slate-li " ><div style="position:relative">Submit signed messages to Coinsub to initiate blockchain payment</div></li><li class="slate-li " ><div style="position:relative">Handle webhook events to track payment completion</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Flow: Step-by-Step</h3><h4 class="slate-h4 " >1. Create a Purchase Session</h4><p class="slate-p " ><strong class="slate-bold">POST</strong> to the platform’s API with product and buyer details (see<a href="https://app.theneo.io/crypto-payment/api/purchase-sessions/create-a-payment-request" target="_self"> how to create a purchase session</a>).
   Response includes a unique <code class="slate-code">purchase_session_id</code>.</p><h4 class="slate-h4 " >2. Request Message to Sign</h4><p class="slate-p " >Use the <code class="slate-code">purchase_session_id</code> as well as customer data to obtain a typed data message describing the purchase (see <a href="https://app.theneo.io/crypto-payment/api/purchase-messages/create-a-purchase-session-copy-1" target="_self">how to get message</a>)
   The response returns EIP-712 typed data for user signature.</p><h4 class="slate-h4 " >3. Handle Wallet &amp; Sign Message</h4><p class="slate-p " >Your frontend connects to the wallet (e.g., MetaMask).
   Prompt the user to sign the provided typed data and store the resulting signature (see <a href="https://codesandbox.io/p/sandbox/eip712-message-signing-2scgy6" target="_self">how to sign typed data</a>). </p><h4 class="slate-h4 " >4. Submit Signature</h4><p class="slate-p " ><strong class="slate-bold">POST</strong> the signature back to the platform using the <code class="slate-code">Submit Signer Purchase Message</code> <a href="https://app.theneo.io/crypto-payment/api/purchase-messages/request-purchase-message-to-sign-copy-3" target="_self">API endpoint</a>.
   The Coinsub platform processes and broadcasts the transaction on-chain.</p><h4 class="slate-h4 " >5. Listen for Webhook Events</h4><p class="slate-p " >Receive webhook notifications such as described in our <a href="https://app.theneo.io/crypto-payment/api/webhooks-3" target="_self">Webhooks section</a>. 
   Use these to unlock access, show success screens, or retry flows for your users. </p><p class="slate-p " ></p>

Headless API

<p class="slate-p " >Webhooks allow real-time communication between systems.</p><p class="slate-p " >Webhooks are used to synchronize disparate systems by publishing automated messages with predefined payloads that can be interpreted by integrated systems. They allow real-time communication between applications, enabling instant updates and data sharing without the need for continuous polling.</p><p class="slate-p " >Our platform webhooks provide notifications when specific actions occur on your account, such as when a customer subscribes to a product, purchases a one-off product, makes a payment, or cancels a subscription. By setting up webhooks, you can automate processes and keep your systems in sync with our platform in real-time.</p><p class="slate-p " ></p>

Webhooks

<div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Sign into the platform</strong></div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Navigate to Merchant Settings</strong></div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">From the dashboard, select the Settings menu located on the sidebar, then merchant settings </div></li></ul></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Input Webhook URL</strong></div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Input your webhook URL and other merchant details in the settings.</div></li></ul></li></ol><p class="slate-p " >If you are looking to control the webhook URLs configuration for your other connected merchant accounts, you can do so </p>

How to Use the Webhooks

<div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h4 class="slate-h4 " >The webhook is triggered during the following actions:</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">When a customer subscribes to a product.</div></li><li class="slate-li " ><div style="position:relative">When a customer purchases a one-off product.</div></li><li class="slate-li " ><div style="position:relative">When a customer makes a payment.</div></li><li class="slate-li " ><div style="position:relative">When a customer cancels a subscription.</div></li><li class="slate-li " ><div style="position:relative">When you execute a wallet send transaction from your account</div></li></ul><p class="slate-p " ></p>

Webhook Triggers

Webhook Payloads

<p class="slate-p " >The<strong class="slate-bold"> Crypto Interest &amp; Engagement Button</strong> allows you to measure customer interest in paying with cryptocurrency before launch. By integrating this button, you can collect customer interactions, emails, and waitlist sign-ups—all without processing any payments immediately.</p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/e48caa90-377c-4d5a-8c09-2b9d7609f7e3.jpg" alt="" style="
              width:92px;
	            height:53px;
	            aspect-ratio:92 / 53"
         /></div></figure></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >How It Works</h2><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Customer clicks “Pay with Crypto”</strong>
The button records the interaction in our database.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Modal opens</strong>
A pop-up asks the customer if they want to receive updates via email.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Customer enters email</strong>
They are added to your “waitlist” for crypto payments.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">You get data</strong>
Track interest, cart sizes, and popular products. </div></li></ol><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 1 – Get Your Merchant ID</h2><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Log in to your <a href="https://app.coinsub.io/" target="_blank">CoinSub Dashboard</a>.</div></li><li class="slate-li " ><div style="position:relative">Go to <strong class="slate-bold">Settings → API Keys</strong>.</div></li><li class="slate-li " ><div style="position:relative">Copy your <strong class="slate-bold">Merchant ID</strong>.</div></li></ol><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 2 – Add the Script to Your Website</h2><p class="slate-p " >Place the following script anywhere in your HTML:</p><div class="code-block-wrapper"  style="width:60%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"><script
        src="https:÷test.coinsub.io/djs/crypto-interest-button.js"
        data-merchant-id="YOUR_MERCHANT_ID_HERE"
        data-button-text="Subscribe with Crypto ⚡"
        data-background-color="rgb(30,30,30)"
        data-button-color="rgb(0, 200, 200)"
        data-button-text-color="rgb(255, 255, 255)"
        data-logo-mode="dark"
        data-cart-size="100"
        data-merchant-industry="Fashion"
        data-product-metadata='{"product_name": "Skirt", "price": 99.99, "category": "clothing"}'
      ></script> </textarea><code class="language-html keep-markup drop-tokens"></code></pre></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 3 – Customize Button (Optional)</h2><p class="slate-p " >The button can be fully customized using the <code class="slate-code">data-*</code> attributes. Here’s what each field does. You can customize the look of your buttons to match your website’s style. You can find real code examples <a href="https://codesandbox.io/p/sandbox/interest-button-embed-lhp5lt" target="_self">here</a>. </p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;min-height:initial;visibility: hidden;border:initial"><div style="width:100px;">Title</div><div style="width:100px;">Description</div><div style="width:100px;">Title</div><div style="width:100px;">Description</div></div><colgroup ><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Attribute</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Required</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Description</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Example</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-merchant-id</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ Yes</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Your unique Merchant ID from CoinSub.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;b8690aab-2202-4ed5-abf7-02f4661e0925&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-text</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Text displayed on the button.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;Subscribe with Crypto ⚡&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-background-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Background color of the button block. Accepts HEX or RGB.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(30,30,30)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Button color.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(0,200,200)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-text-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Color of the text on the button.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(255,255,255)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-logo-mode</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Logo style (<code class="slate-code">dark</code> or <code class="slate-code">white</code>).</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;dark&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-cart-size</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >The total cart value associated with this product.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">99.99</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-merchant-industry</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Your business category.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;Fashion&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-product-metadata</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Product details in JSON format.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&apos;{&quot;product_name&quot;: &quot;Skirt&quot;, &quot;price&quot;: 99.99, &quot;category&quot;: &quot;clothing&quot;}&apos;</code></p></td></div></tr></tbody></table></div></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 4 – Collect Data &amp; Analyze</h2><p class="slate-p " >For the APIs you can use to collect data about user engagement/interest use the following set of APIs. This feature is currently restricted to the test environment. </p><p class="slate-p " ></p>

Test Customer Demand for Crypto Payments

<p class="slate-p " >Gets the total interest button click count. </p>

Get Click Count

<p class="slate-p " >Gets the total interest button click count with interval (in days).</p><p class="slate-p " ></p>

Get Click Count With Interval

<p class="slate-p " >Gets the total interest button click count with details about collected emails, consent, and user location breakdown. </p><p class="slate-p " ></p><p class="slate-p " ></p>

Get Click Count & Details

<p class="slate-p " >Get all emails. </p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Get All Emails

<p class="slate-p " >Get all user collected data (regionality, cart size, products metadata, etc.)</p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Get All Data

Theneo Demo TechCrunch

Payment Servers Developer Documentation

Paymentservers Developer Documentation

Production

Development

Sandbox

<p class="slate-p " >To enable third-party platforms to integrate <span style="color:rgb(0, 0, 0)"><strong class="slate-bold">Payment Servers</strong></span> capabilities, we&apos;ve meticulously designed a comprehensive and flexible API structure. Our API facilitates easy integration, providing developers with the tools to incorporate blockchain payment solutions into their applications.</p><h3 class="slate-h3 " ><strong class="slate-bold">Core API Components</strong></h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Secure Authentication</strong>: Utilizing API keys we ensure secure and authorized access to our services.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Blockchain Interaction</strong>: Developers can easily select networks, manage tokens, and authorize transactions, offering unparalleled flexibility across blockchains.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Dynamic Payment Processing</strong>: Our API supports the creation and management of various payment types, including one-time invoices, recurring subscriptions, and usage-based billing, with built-in support for handling overdue payments.</div></li></ul><p class="slate-p " ></p><p class="slate-p " >

</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

To enable third-party platforms to integrate 

 capabilities, we've meticulously designed a comprehensive and flexible API structure. Our API facilitates easy integration, providing developers with the tools to incorporate blockchain payment solutions into their applications.

<p class="slate-p " >At <strong class="slate-bold">Payment Servers</strong>, a <strong class="slate-bold">product</strong> is a digital offer created by a merchant that users can purchase in exchange for access to a service, benefit, or digital experience. While many products are traditional subscriptions, they can also represent <strong class="slate-bold">one-time access</strong> or <strong class="slate-bold">single-purchase offerings</strong>.</p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h3 class="slate-h3 " >Core Aspects of a <span style="color:rgb(0, 0, 0)">Payment Servers</span> Product:</h3><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Merchant-Defined</strong>:
 Each product is owned and managed by a specific merchant, who determines its pricing, duration, and usage. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Descriptive Name</strong>:
 Every product has a clear and user-friendly title that communicates what the offering is. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Flexible Pricing Model</strong>:
 Products are priced in U.S. dollars, but payment may be made using crypto. The pricing supports both <strong class="slate-bold">recurring subscriptions</strong> and <strong class="slate-bold">one-time purchases</strong>. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Blockchain Integration</strong>:
 Payments are directed to a dedicated blockchain address, enabling secure, on-chain transactions. </div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Lifecycle Status</strong>:
 Products can be marked as active (available for purchase), inactive (temporarily paused), or discontinued (retired), giving merchants control over their offerings. </div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p>

 is a digital offer created by a merchant that users can purchase in exchange for access to a service, benefit, or digital experience. While many products are traditional subscriptions, they can also represent 

<p class="slate-p " >Accounts are the basic organizations that use <span style="color:rgb(0, 0, 0)">Payment Servers</span> services. They can be individuals, businesses, or non-profit organizations. They can have one or more users associated with them, and they can be connected to other accounts. </p><p class="slate-p slate-indent-0" style="0px">Creating an account through the API will connect that account with your account, enabling you to call the API as that account in the future. This allows a platform account the ability to onboard users, and configure products, and payment agreements for their users. </p><p class="slate-p " ></p><p class="slate-p " ></p>

Accounts are the basic organizations that use 

 services. They can be individuals, businesses, or non-profit organizations. They can have one or more users associated with them, and they can be connected to other accounts. 

Creating an account through the API will connect that account with your account, enabling you to call the API as that account in the future. This allows a platform account the ability to onboard users, and configure products, and payment agreements for their users. 

<p class="slate-p " >Payment agreements generate recurring payments through Paymentservers payment network based on the pre-defined agreements signed by the customer. The customer is required to agree to any changes to a payment agreement. </p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Payment agreements generate recurring payments through Paymentservers payment network based on the pre-defined agreements signed by the customer. The customer is required to agree to any changes to a payment agreement. 

<p class="slate-p " >Payment Servers Merchant Wallets are secure, non-custodial wallets powered by <a href="https://www.dfns.co/" target="_self">DFNS’s</a> battle-tested wallet infrastructure. Designed with robust key management and WebAuthn-based authentication, these wallets ensure enterprise-grade security without exposing private keys or relying on vulnerable seed phrases. With Merchant Wallets, Payment Servers merchants don’t need to connect external wallets or manage third-party integrations. Everything is built-in—making on-chain payments, managing funds, and receiving crypto subscriptions frictionless and secure, straight from your Payment Servers dashboard.</p><p class="slate-p " >To get started with a merchant platform wallet of your own, sign up at <a href="https://test.paymentservers.com" target="">test.paymentservers.com</a> (development environment) or <a href="https://app.paymentservers.com" target="">app.paymentservers.com</a> (production).</p><p class="slate-p " ></p><p class="slate-p " ></p>

Payment Servers Merchant Wallets are secure, non-custodial wallets powered by 

 battle-tested wallet infrastructure. Designed with robust key management and WebAuthn-based authentication, these wallets ensure enterprise-grade security without exposing private keys or relying on vulnerable seed phrases. With Merchant Wallets, Payment Servers merchants don’t need to connect external wallets or manage third-party integrations. Everything is built-in—making on-chain payments, managing funds, and receiving crypto subscriptions frictionless and secure, straight from your Payment Servers dashboard.

To get started with a merchant platform wallet of your own, sign up at 

<p class="slate-p " >Payments in this system represent transactions that merchants receive from their customers. Each payment record contains important information about a transaction, such as:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">The amount paid</div></li><li class="slate-li " ><div style="position:relative">The currency used (like USDC)</div></li><li class="slate-li " ><div style="position:relative">When the payment was made</div></li><li class="slate-li " ><div style="position:relative">The status of the payment</div></li><li class="slate-li " ><div style="position:relative">Details about the customer</div></li><li class="slate-li " ><div style="position:relative">Information about what was purchased</div></li><li class="slate-li " ><div style="position:relative">Whether it was a one-time purchase or part of a subscription</div></li></ul><p class="slate-p " >Merchants can use this service to:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">View their complete payment history</div></li><li class="slate-li " ><div style="position:relative">Look up specific payment details</div></li><li class="slate-li " ><div style="position:relative">Monitor transaction statuses</div></li><li class="slate-li " ><div style="position:relative">Keep records of customer purchases</div></li></ul><p class="slate-p " >This helps merchants keep track of their business transactions and maintain a clear record of all payments they&apos;ve received through the platform.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Payments in this system represent transactions that merchants receive from their customers. Each payment record contains important information about a transaction, such as:

This helps merchants keep track of their business transactions and maintain a clear record of all payments they've received through the platform.

<p class="slate-p " >A crypto payment system purchase session is a digital payment request, enabling users to specify and request a cryptocurrency amount from another party. 

Upon creation, the system generates a unique URL for the session, including details on the payment amount (if specified) and any additional instructions or metadata. This URL can be shared via email, messaging, QR code, or other methods, directing the payer to a secure payment interface to complete the transaction using their crypto wallet. This approach ensures precise payment amounts and offers a clear, trackable way to request and receive crypto payments, making it ideal for businesses, freelancers, and anyone needing a straightforward method for crypto transactions.</p><p class="slate-p " >
Purchase sessions securely transmit user information to Paymentservers upon initialization using a secure backchannel. Sessions can also be set to expire after a certain period, allowing for expirable quotes and adding a layer of security to the payment process.

</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

A crypto payment system purchase session is a digital payment request, enabling users to specify and request a cryptocurrency amount from another party. 

Upon creation, the system generates a unique URL for the session, including details on the payment amount (if specified) and any additional instructions or metadata. This URL can be shared via email, messaging, QR code, or other methods, directing the payer to a secure payment interface to complete the transaction using their crypto wallet. This approach ensures precise payment amounts and offers a clear, trackable way to request and receive crypto payments, making it ideal for businesses, freelancers, and anyone needing a straightforward method for crypto transactions.


Purchase sessions securely transmit user information to Paymentservers upon initialization using a secure backchannel. Sessions can also be set to expire after a certain period, allowing for expirable quotes and adding a layer of security to the payment process.



<p class="slate-p " >Purchase messages are designed for integrators who want to build and control their own checkout experience. Instead of redirecting customers to a hosted checkout page, integrators request a raw payload from <span style="color:rgb(0, 0, 0)">Payment Servers</span>, which contains all necessary transaction details.</p><p class="slate-p " >The integrator then signs this payload on the client or server side using their private key, following the <a href="https://eips.ethereum.org/EIPS/eip-712" target="_blank">EIP-712</a> structured data signing standard. Once signed, the integrator submits the message back to <span style="color:rgb(0, 0, 0)">Payment Servers</span> API to finalize the transaction.</p><p class="slate-p " >This approach gives developers full flexibility over the user interface and transaction flow, while still leveraging Paymentservers backend for transaction processing, validation, and reconciliation.</p><div class="slate-div"><p class="slate-p " >A short demo on how to sign a message using EIP-712 is available here: <a href="https://codesandbox.io/p/sandbox/eip712-forked-2scgy6" target="_blank">CodeSandbox EIP-712 Demo</a></p></div><p class="slate-p " ></p><p class="slate-p " ></p>

Purchase messages are designed for integrators who want to build and control their own checkout experience. Instead of redirecting customers to a hosted checkout page, integrators request a raw payload from 

, which contains all necessary transaction details.

The integrator then signs this payload on the client or server side using their private key, following the 

 structured data signing standard. Once signed, the integrator submits the message back to 

This approach gives developers full flexibility over the user interface and transaction flow, while still leveraging Paymentservers backend for transaction processing, validation, and reconciliation.

<p class="slate-p " >Permit messages enable gasless token approvals by allowing users to sign an off-chain message that authorizes <span style="color:rgb(0, 0, 0)">Payment Servers</span> smart contract to spend their tokens. Instead of requiring an on-chain approval transaction—which costs gas—users can simply sign a structured message with their wallet. This reduces friction at checkout and makes the payment process faster and more cost-effective.</p><p class="slate-p " >When you submit a signed purchase session, <span style="color:rgb(0, 0, 0)">Payment Servers</span> checks whether the user has already approved token spending. If so, the payment is processed immediately. If not, the response will include a permit message in typed data format. You can present this message to the user for signing. Once signed, submit it to <span style="color:rgb(0, 0, 0)">Payment Servers</span> to complete the approval and proceed with the transaction—all without requiring an additional on-chain approval step.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Permit messages enable gasless token approvals by allowing users to sign an off-chain message that authorizes 

 smart contract to spend their tokens. Instead of requiring an on-chain approval transaction—which costs gas—users can simply sign a structured message with their wallet. This reduces friction at checkout and makes the payment process faster and more cost-effective.

When you submit a signed purchase session, 

 checks whether the user has already approved token spending. If so, the payment is processed immediately. If not, the response will include a permit message in typed data format. You can present this message to the user for signing. Once signed, submit it to 

 to complete the approval and proceed with the transaction—all without requiring an additional on-chain approval step.

<p class="slate-p slate-indent-0" style="0px">This comprehensive guide provides detailed information about integrating Payment Servers payment processing into your application. Payment Servers offers four distinct integration methods designed to accommodate different technical requirements and use cases, from simple no-code solutions to advanced API integrations with full customization capabilities.</p><p class="slate-p " ></p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100px;">Option</div><div style="width:100px;">Integration Level</div><div style="width:100px;">Customization</div><div style="width:100px;">Hosted Checkout UI</div></div><colgroup ><col style="width:initial"><col style="width:initial"><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >1. Standard Checkout Link</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">🔹 </span>No Code</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (full control)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><span style="color:rgb(0, 0, 0)">✅</span></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >2. Button Embed</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Low Code</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (button color)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >3. iFrame Embed</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Medium Code</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (full control)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >4. Headless API</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >🔸 Developer</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ (fully programmable)</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >❌</p></td></div></tr></tbody></table></div></div><p class="slate-p " ></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Which Integration Option Should You Use?</h2><p class="slate-p " >Choosing the right integration depends on your <strong class="slate-bold">technical resources</strong>, <strong class="slate-bold">business model</strong>, and <strong class="slate-bold">how much control</strong> you want over the checkout experience.</p><h3 class="slate-h3 " ><span style="color:rgb(0, 0, 0)">🔹 </span>Standard Checkout Link – Best for Non-Technical Merchants</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Individual creators</div></li><li class="slate-li " ><div style="position:relative">Small merchants or service providers</div></li><li class="slate-li " ><div style="position:relative">Teams with no dev resources</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Zero development required</div></li><li class="slate-li " ><div style="position:relative">Shareable across any platform (email, social, website)</div></li><li class="slate-li " ><div style="position:relative">Fastest way to start accepting stablecoin payments</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Button Embed – Best for Low-Code Teams</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Marketing teams with light dev help</div></li><li class="slate-li " ><div style="position:relative">Shopify, WordPress, or Webflow users</div></li><li class="slate-li " ><div style="position:relative">Sites that need a call-to-action button with minimal backend setup</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Simple HTML embed</div></li><li class="slate-li " ><div style="position:relative">Button styling via <code class="slate-code">data-color</code></div></li><li class="slate-li " ><div style="position:relative">Redirects to secure hosted checkout</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Modal iFrame – Best for Custom Frontends That Want In-Site UX</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Sites with web developers</div></li><li class="slate-li " ><div style="position:relative">Businesses that care about seamless branding and user experience</div></li><li class="slate-li " ><div style="position:relative">Publishers, SaaS sites, or gated content platforms</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Fully embedded experience</div></li><li class="slate-li " ><div style="position:relative">Controlled modal styling</div></li><li class="slate-li " ><div style="position:relative">Checkout stays within your UI context</div></li></ul><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><h3 class="slate-h3 " >🔸 Headless API – Best for Crypto-Native Platforms &amp; Advanced Teams</h3><p class="slate-p " ><strong class="slate-bold">Who it&apos;s for:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Web3 apps, dApps, DeFi platforms</div></li><li class="slate-li " ><div style="position:relative">Teams already managing wallets or signing flows</div></li><li class="slate-li " ><div style="position:relative">Platforms needing custom onboarding, wallet UX, or nonstandard product logic</div></li></ul><p class="slate-p " ><strong class="slate-bold">Why use it:</strong></p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Full control over the payment process</div></li><li class="slate-li " ><div style="position:relative">You manage wallet interaction and signing</div></li><li class="slate-li " ><div style="position:relative">Suitable for integrations with other on-chain or backend systems</div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

This comprehensive guide provides detailed information about integrating Payment Servers payment processing into your application. Payment Servers offers four distinct integration methods designed to accommodate different technical requirements and use cases, from simple no-code solutions to advanced API integrations with full customization capabilities.

Option

Integration Level

Customization

Hosted Checkout UI

Choosing the right integration depends on your 

Standard Checkout Link – Best for Non-Technical Merchants

🔸 Button Embed – Best for Low-Code Teams

🔸 Modal iFrame – Best for Custom Frontends That Want In-Site UX

🔸 Headless API – Best for Crypto-Native Platforms & Advanced Teams

<p class="slate-p " >Webhooks allow real-time communication between systems.</p><p class="slate-p " >Webhooks are used to synchronize disparate systems by publishing automated messages with predefined payloads that can be interpreted by integrated systems. They allow real-time communication between applications, enabling instant updates and data sharing without the need for continuous polling.</p><p class="slate-p " >Our platform webhooks provide notifications when specific actions occur on your account, such as when a customer subscribes to a product, purchases a one-off product, makes a payment, or cancels a subscription. By setting up webhooks, you can automate processes and keep your systems in sync with our platform in real-time.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Webhooks allow real-time communication between systems.

Webhooks are used to synchronize disparate systems by publishing automated messages with predefined payloads that can be interpreted by integrated systems. They allow real-time communication between applications, enabling instant updates and data sharing without the need for continuous polling.

Our platform webhooks provide notifications when specific actions occur on your account, such as when a customer subscribes to a product, purchases a one-off product, makes a payment, or cancels a subscription. By setting up webhooks, you can automate processes and keep your systems in sync with our platform in real-time.

<div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Sign into the platform</strong></div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Navigate to Merchant Settings</strong></div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">From the dashboard, select the Settings menu located on the sidebar, then merchant settings </div></li></ul></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Input Webhook URL</strong></div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Input your webhook URL and other merchant details in the settings.</div></li></ul></li></ol><p class="slate-p " >If you are looking to control the webhook URLs configuration for your other connected merchant accounts, you can do so using the Create Webhook for connected account endpoint (under Accounts &amp; API Keys)</p><p class="slate-p " ></p>

If you are looking to control the webhook URLs configuration for your other connected merchant accounts, you can do so using the Create Webhook for connected account endpoint (under Accounts & API Keys)

<div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h4 class="slate-h4 " >The webhook is triggered during the following actions:</h4><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">When a customer subscribes to a product.</div></li><li class="slate-li " ><div style="position:relative">When a customer purchases a one-off product.</div></li><li class="slate-li " ><div style="position:relative">When a customer makes a payment.</div></li><li class="slate-li " ><div style="position:relative">When a customer cancels a subscription.</div></li><li class="slate-li " ><div style="position:relative">When payment processing fails e.g. insufficient customer balance. </div></li><li class="slate-li " ><div style="position:relative">When you execute a wallet send transaction from your account</div></li></ul><h3 class="slate-h3 " >Webhook Event Uniqueness</h3><p class="slate-p " >Every webhook includes an <code class="slate-code"><strong class="slate-bold">X-Event-Id</strong></code> header that uniquely identifies a specific trigger/event.</p><p class="slate-p " >For failed payments, multiple charge attempts may be associated with the same <code class="slate-code">payment_id</code>. In these cases, each charge attempt will still include its own unique <code class="slate-code"><strong class="slate-bold">X-Event-Id</strong></code> value. You can use this header to differentiate between individual attempts tied to the same failed payment.</p><p class="slate-p " ></p>

The webhook is triggered during the following actions:

 header that uniquely identifies a specific trigger/event.

For failed payments, multiple charge attempts may be associated with the same 

. In these cases, each charge attempt will still include its own unique 

 value. You can use this header to differentiate between individual attempts tied to the same failed payment.

When a customer agrees to make recurring payments, the webhook sends the following data. 
Note that other than the first_payment_id, there is no information about the first payment made. Payment information is sent as a separate payment event. 

asdasd

When a customer makes a successful payment, the webhook sends the following data: 

When a customer makes a payment attempt and fails, the webhook sends the following data: 

When a subscriber cancels a subscription, the webhook sends the following data:

Willy Wonka's Candy Subscription Package

When you execute a wallet to wallet transfer from your merchant wallet, the following payload is sent to the webhook

If the webhook fails to deliver the data, it will retry up to 5 times, with each retry occurring every 5-10 minutes.

<p class="slate-p " >The<strong class="slate-bold"> Crypto Interest &amp; Engagement Button</strong> allows you to measure customer interest in paying with cryptocurrency before launch. By integrating this button, you can collect customer interactions, emails, and waitlist sign-ups—all without processing any payments immediately.</p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/17cb5039-758e-4e07-a8a5-9fce83728f45.jpg" alt="" style="
              width:1387px;
	            height:851px;
	            aspect-ratio:1387 / 851"
         /></div></figure></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >How It Works</h2><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Customer clicks “Pay with Crypto”</strong>
The button records the interaction in our database.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Modal opens</strong>
A pop-up asks the customer if they want to receive updates via email.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">Customer enters email</strong>
They are added to your “waitlist” for crypto payments.</div></li><li class="slate-li " ><div style="position:relative"><strong class="slate-bold">You get data</strong>
Track interest, cart sizes, and popular products. </div></li></ol><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 1 – Get Your Merchant ID</h2><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Log in to your <a href="https://test.paymentservers.com" target="_blank">Payment Servers Dashboard</a>.</div></li><li class="slate-li " ><div style="position:relative">Go to <strong class="slate-bold">Settings → API Keys</strong>.</div></li><li class="slate-li " ><div style="position:relative">Copy your <strong class="slate-bold">Merchant ID</strong>.</div></li></ol><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 2 – Add the Script to Your Website</h2><p class="slate-p " >Place the following script anywhere in your HTML:</p><div class="code-block-wrapper"  style="width:60%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"><script
        src="https:÷test.paymentservers.com/djs/crypto-interest-button.js"
        data-merchant-id="YOUR_MERCHANT_ID_HERE"
        data-button-text="Subscribe with Crypto ⚡"
        data-background-color="rgb(30,30,30)"
        data-button-color="rgb(0, 200, 200)"
        data-button-text-color="rgb(255, 255, 255)"
        data-logo-mode="dark"
        data-cart-size="100"
        data-merchant-industry="Fashion"
        data-product-metadata='{"product_name": "Skirt", "price": 99.99, "category": "clothing"}'
      ></script> </textarea><code class="language-html keep-markup drop-tokens"></code></pre></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 3 – Customize Button (Optional)</h2><p class="slate-p " >The button can be fully customized using the <code class="slate-code">data-*</code> attributes. Here’s what each field does. You can customize the look of your buttons to match your website’s style. You can find real code examples <a href="https://codesandbox.io/p/sandbox/interest-button-embed-3crzrs" target="">here</a>. </p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;min-height:initial;visibility: hidden;border:initial"><div style="width:100px;">Title</div><div style="width:100px;">Description</div><div style="width:100px;">Title</div><div style="width:100px;">Description</div></div><colgroup ><col style="width:initial"><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Attribute</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Required</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Description</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Example</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-merchant-id</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >✅ Yes</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Your unique Merchant ID.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;b8690aab-2202-4ed5-abf7-02f4661e0925&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-text</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Text displayed on the button.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;Subscribe with Crypto ⚡&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-background-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Background color of the button block. Accepts HEX or RGB.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(30,30,30)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Button color.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(0,200,200)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-button-text-color</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Color of the text on the button.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;rgb(255,255,255)&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-logo-mode</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Logo style (<code class="slate-code">dark</code> or <code class="slate-code">white</code>).</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;dark&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-cart-size</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >The total cart value associated with this product.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">99.99</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-merchant-industry</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Your business category.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&quot;Fashion&quot;</code></p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">data-product-metadata</code></p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >⚙️ Optional</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " >Product details in JSON format.</p></td></div><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">&apos;{&quot;product_name&quot;: &quot;Skirt&quot;, &quot;price&quot;: 99.99, &quot;category&quot;: &quot;clothing&quot;}&apos;</code></p></td></div></tr></tbody></table></div></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Step 4 – Collect Data &amp; Analyze</h2><p class="slate-p " >For the APIs you can use to collect data about user engagement/interest use the following set of APIs. This feature is currently restricted to the test environment. </p><p class="slate-p " ></p><p class="slate-p " ></p>

 allows you to measure customer interest in paying with cryptocurrency before launch. By integrating this button, you can collect customer interactions, emails, and waitlist sign-ups—all without processing any payments immediately.

Step 2 – Add the Script to Your Website

Place the following script anywhere in your HTML:

The button can be fully customized using the 

 attributes. Here’s what each field does. You can customize the look of your buttons to match your website’s style. You can find real code examples 

Title

Description

For the APIs you can use to collect data about user engagement/interest use the following set of APIs. This feature is currently restricted to the test environment. 

Sections