Checkout Button

The ByteConnect Checkout Button is the fastest way to accept crypto payments on your website. No backend integration required.

Quick Setup

Add this snippet to your website:

<!-- ByteConnect Checkout Button -->
<script src="https://byteconnect.us/checkout.js"></script>

<button
  class="byteconnect-button"
  data-affiliate-id="YOUR_AFFILIATE_ID"
  data-amount="25.00"
  data-label="Product Name"
>
  Pay with Crypto
</button>

Replace YOUR_AFFILIATE_ID with your merchant ID from the admin panel.

Configuration Options

Attribute	Required	Description
`data-affiliate-id`	Yes	Your merchant affiliate ID
`data-amount`	Yes	Payment amount in USD
`data-label`	No	Reference label for the transaction
`data-email`	No	Pre-fill customer email
`data-crypto`	No	Pre-select cryptocurrency
`data-callback`	No	JavaScript function to call on completion

Examples

Basic Button

<button
  class="byteconnect-button"
  data-affiliate-id="abc123"
  data-amount="50.00"
>
  Pay $50 with Crypto
</button>

With Pre-selected Cryptocurrency

<button
  class="byteconnect-button"
  data-affiliate-id="abc123"
  data-amount="25.00"
  data-crypto="BTC"
  data-label="Bitcoin Payment"
>
  Pay with Bitcoin
</button>

With Callback Function

<button
  class="byteconnect-button"
  data-affiliate-id="abc123"
  data-amount="99.00"
  data-callback="handlePaymentComplete"
>
  Complete Purchase
</button>

<script>
function handlePaymentComplete(result) {
  if (result.status === 'succeeded') {
    console.log('Payment successful!', result.transaction_id);
    // Redirect or update UI
  }
}
</script>

Styling

Default Styles

The button comes with default ByteConnect styling. You can customize it with CSS:

.byteconnect-button {
  background: #ec0401;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.byteconnect-button:hover {
  background: #b50301;
}

Custom Button Design

Use your own button design by adding the required data attributes:

<button
  class="my-custom-button"
  data-byteconnect
  data-affiliate-id="abc123"
  data-amount="25.00"
>
  <img src="bitcoin-icon.svg" alt="">
  Pay with Crypto
</button>

When clicked, the button opens a payment modal that:

Displays available cryptocurrencies
Shows the QR code for payment
Converts USD to crypto in real-time
Monitors for payment confirmation
Shows success/failure status

Events

Listen for payment events:

document.addEventListener('byteconnect:payment', function(event) {
  const { status, transaction_id, amount } = event.detail;

  switch(status) {
    case 'started':
      console.log('Payment initiated');
      break;
    case 'succeeded':
      console.log('Payment complete!', transaction_id);
      break;
    case 'cancelled':
      console.log('Payment cancelled');
      break;
    case 'timedout':
      console.log('Payment timed out');
      break;
  }
});

Testing

Test your integration with small amounts before going live:

Set data-amount="1.00" for testing
Complete a real payment to verify the flow
Check the transaction in your admin panel

Troubleshooting

Button Not Appearing

Ensure the script is loaded before the button element
Check browser console for JavaScript errors
Verify your affiliate ID is correct

Payment Not Completing

Customer may need to complete payment within 15 minutes
Check transaction status in admin panel
Ensure the QR code is scannable