Button Initialization

Learn different ways to initialize CryptumPay payment buttons.

Auto-Initialization

For simple use cases, you can use auto-initialization without JavaScript:

<div
  class="cryptumpay-auto-button-v1"
  id="payment-button"
  data-button-text="Pay with CryptumPay"
  data-project-id="your-project-id"
  data-project-order-title="Premium Subscription"
  data-project-order-description="3 months access to all premium features"
  data-default-fiat-currency="usd"
  data-default-fiat-amount="99.99"
  data-ui-size="normal"
  data-ui-radius="10"
  data-color-scheme="light"
  data-button-color="colored"
></div>

Refer to the full list of data attributes:
Configuration Options

Zero JavaScript

The widget automatically initializes any element with the cryptumpay-auto-button-v1 class. Auto-initialization is perfect for static sites or when you want to avoid writing JavaScript.

Basic Initialization

The most common way to create a button:

document.addEventListener('CryptumPay:ready', () => {
  const button = new CryptumPay.Button('payment-button');
  
  button.setOptions({
    projectId: 'your-project-id',
    buttonText: 'Pay with CryptumPay',
    projectOrderTitle: 'Premium Subscription',
    projectOrderDescription: 'Monthly subscription payment',
    defaultFiatAmount: '99.99'
  });
});

Refer to the full list of configuration options:
Configuration Options

Accessing Auto-Initialized Buttons

Use Button.find() to get references to auto-initialized buttons:

document.addEventListener('CryptumPay:ready', () => {
  // Find by element ID
  const button = CryptumPay.Button.find('payment-button');
  
  // Add callbacks
  button.onFinishOrder((orderId, projectData) => {
    console.log('Payment completed:', orderId);
  });

  // Or change options
  button.setOptions({
    projectOrderMeta: 'user123'
  });
});

Container Requirements

The button container must exist in the DOM before initialization:

// ❌ BAD: Container doesn't exist yet
const button = new CryptumPay.Button('payment-button');
document.body.innerHTML = '<div id="payment-button"></div>';

// ✅ GOOD: Container exists first
document.body.innerHTML = '<div id="payment-button"></div>';
const button = new CryptumPay.Button('payment-button');

Minimum Container Styles

The container should have a minimum height to prevent layout shift:

<div id="payment-button" style="min-height: 50px;"></div>

Or with CSS:

#payment-button {
  min-height: 50px;
}

Error Handling

Container Not Found

try {
  const button = new CryptumPay.Button('nonexistent');
} catch (error) {
  console.error('Container not found:', error);
}

Widget Not Ready

// ❌ BAD: Using before widget loads
const button = new CryptumPay.Button('payment-button');

// ✅ GOOD: Wait for ready event
document.addEventListener('CryptumPay:ready', () => {
  const button = new CryptumPay.Button('payment-button');
});

See Also

• Callbacks - Handling payment events