Step 1: Add the script to your website
First, add our script to your page. Copy the code below and place it inside the <head> tag or right before the closing </body> tag:
script.html
<script src="https://payment.coinpayon.com/assets/widgets/embed.js" async></script>Step 2: Choose how to display the payment widget
You have two options for different integration needs:
Option A — Simple button (shows the amount)
Use this when you need a simple button that already displays the amount for quick checkout.
widget-button.html
<div
data-pay-widget
data-type="button"
data-button-text="Pay Now"
data-amount="[YOUR_AMOUNT]"
data-token="USDT"
data-currency="USDT"
data-show-amount="true"
data-theme="light"
data-network="Sui Network"
data-wallet-address="[YOUR_WALLET_ADDRESS]"
data-public-key="[YOUR_PUBLIC_KEY]"></div>Option B — Detailed layout
Use this when you want a full checkout block: title, description, order summary, quantity, etc.
widget-detailed.html
<div
data-pay-widget
data-type="detailed"
data-header-text="Checkout - Premium Product"
data-description="Includes advanced features and priority support."
data-button-text="Pay Now"
data-amount="[YOUR_AMOUNT]"
data-token="USDT"
data-currency="USDT"
data-theme="light"
data-network="Sui Network"
data-wallet-address="[YOUR_WALLET_ADDRESS]"
data-public-key="[YOUR_PUBLIC_KEY]"></div>Tip: If you want to attach multiple buttons per product in a table, see "Example Choice A" below.
Example Choice A — Simple button
Basic product table with payment buttons for each item.
example-choice-a.html
<!-- Loading source from /assets/live-demo/widget-edit-demo.html ... -->Example Choice B — Detailed layout
Complete checkout experience with cart items, order summary, dynamic quantity updates, and detailed payment widget.
example-choice-b.html
<!-- Loading source from /live-demo/widget-detailed-demo.html ... -->Configuration Reference
All available attributes for the payment widget.
| Attribute | Required | Description | Example |
|---|---|---|---|
data-pay-widget |
Yes | Widget identifier | - |
data-type |
Yes | Widget type | "button" or "detailed" |
data-header-text |
No | Header text displayed on widget | "Product Name" |
data-description |
No | Description of product/service | "Product description" |
data-button-text |
Yes | Button text | "Pay Now" |
data-amount |
Yes | Payment amount | "100" |
data-token |
Yes | Cryptocurrency token | "USDT" |
data-wallet-address |
Yes | Wallet address for payments | "0x1234..." |
data-public-key |
Yes | Public key for encryption | "AA28-E540-..." |
data-primary-color |
No | Button color | "#007bff" |
data-theme |
No | Widget theme | "light" or "dark" |
data-callback |
No | JavaScript callback function | "" |
data-redirect-url |
No | Redirect URL after payment | "https://smstoproxy.com/payment-completed?paymentId=1ac2fad1-90c6-4335-af62-df824aa9cd58" |
data-show-amount |
No | Show amount on the button | "true" |
data-border-radius |
No | Border radius for button/widget | "6px" |
data-border-width |
No | Border width for detailed widget | "1px" |
data-font-size |
No | Button text font size | "14px" |
data-button-width |
No | Custom button width | "auto" |
data-width |
No | Detailed widget width | "auto" |
data-height |
No | Detailed widget height | "auto" |
data-show-description |
No | Show product description in detailed widget | "true" |
data-show-wallet-address |
No | Show destination wallet address in detailed widget | "true" |
data-network |
No | Blockchain network selection | "Sui Network" |