How to Build a Crypto Payment Button Widget with Paychainly

Architecture

The widget is a self-contained JavaScript bundle that: (1) renders a "Pay with USDT" button, (2) calls your backend to create a payment link, and (3) redirects to the Paychainly checkout page.

Widget Snippet (Customer Embeds)

<div
  data-paychainly-button
  data-amount="29.99"
  data-description="Pro License"
  data-product-id="prod_123">
</div>
<script src="https://yoursite.com/widget.js" defer></script>

Widget JavaScript

// widget.js
(function() {
  document.querySelectorAll('[data-paychainly-button]').forEach(el => {
    const btn = document.createElement('button');
    btn.textContent = 'Pay ' + el.dataset.amount + ' USDT';
    btn.className = 'paychainly-btn';
    btn.onclick = async () => {
      btn.disabled = true;
      btn.textContent = 'Creating payment...';
      try {
        const res = await fetch('/api/create-payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            amount: el.dataset.amount,
            description: el.dataset.description,
            productId: el.dataset.productId,
          }),
        });
        const { payUrl } = await res.json();
        window.location.href = payUrl;
      } catch (e) {
        btn.disabled = false;
        btn.textContent = 'Pay ' + el.dataset.amount + ' USDT';
        alert('Payment creation failed. Please try again.');
      }
    };
    el.replaceWith(btn);
  });
})();

Styling

.paychainly-btn {
  background: #f0b90b; /* BNB gold */
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.paychainly-btn:hover { opacity: 0.9; }
.paychainly-btn:disabled { opacity: 0.5; cursor: not-allowed; }

Security Note

Never put your API key in the widget JavaScript — it's public. The widget calls your backend, which holds the API key securely server-side.