Button Class

The Button class is the main interface for integrating CryptumPay Widget into your website.

Constructor

new Button(containerId: string)

Creates a new payment button instance and mounts it to the specified container.

Parameters:

• containerId (string) - ID of the DOM element where the button will be rendered

Example:

const button = new CryptumPay.Button('payment-button');

Lifecycle Methods

setOptions(options: ButtonOptions): void

Configures the payment button with the specified options.

Parameters:

• options (ButtonOptions) - Configuration object

Example:

button.setOptions({
  projectId: 'your-project-id',
  buttonText: 'Pay with CryptumPay',
  buttonColor: 'colored',
  colorScheme: 'light'
});

onCreateOrder(callback: () => Promise<string>): void

Fired when the payment button is clicked, before creating the order. Use this to generate a dynamic order ID from your backend.

Returns:

• Promise<string> - Must resolve to a CryptumPay Order ID

Example:

button.onCreateOrder(async () => {
  // Create order on your backend
  const response = await fetch('/api/create-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({})
  });
  
  const data = await response.json();
  return data.id; // Must return CryptumPay Order ID
});

Server-Side Order Creation

For server-side order creation, use the official Node.js SDK:

Installation:

npm install @cryptumpay/node-sdk

See the Backend Integration guide for complete examples.

onCreateCustomerOrder(callback: (customerOrderId: string, merchantOrderId: string, projectData: object) => void): void

Fired when the user selects a currency, network, and other parameters and a customer order is created inside the widget — before the payment is sent.

Parameters:

• customerOrderId - CryptumPay internal order ID created when the customer selected a cryptocurrency and network
• merchantOrderId - CryptumPay internal order ID created when the merchant created a fixed-amount order
• projectData - Custom data passed from your application (projectOrderMeta, projectUserId, etc.)

Example:

button.onCreateCustomerOrder((customerOrderId, merchantOrderId, projectData) => {
  console.log('Customer order created:', customerOrderId, merchantOrderId);
  console.log('Project data:', projectData);
});

onFinishOrder(callback: (orderId: string, projectData: any) => void): void

Fired when a payment is successfully completed.

Parameters:

• orderId - The unique CryptumPay order identifier
• projectData - Custom data passed from your application (projectOrderMeta, projectUserId, etc.)

Example:

button.onFinishOrder((orderId, projectData) => {
  console.log('Payment completed:', orderId);
  console.log('Project data:', projectData);
});

Callback Override

Calling onFinishOrder(), onCreateCustomerOrder(), or onCreateOrder() multiple times will override the previous callback, not stack them.

Security

Always verify payment completion on your backend using webhooks or the CryptumPay API. Never trust client-side events alone for order fulfillment.

unmount(): void

Removes the button and modal from the DOM and cleans up all event listeners. Use this when you need to remove the button (e.g., in SPA navigation).

Example:

// Clean up when navigating away
button.unmount();

Static Methods

Button.find(elementId?: string): Button

Finds an existing button instance. Useful with auto-initialized buttons.

Parameters:

• elementId (string, optional) - ID of the button element

Example:

// Find auto-initialized button
const button = CryptumPay.Button.find('payment-button');
button.unmount();

See Also

• Configuration Options - Full list of button configuration options
• Events Flow - Events flow
• Backend Integration - Creating orders on your server