Configuration Options

Complete reference for all button configuration options.

Interface: ButtonOptions

interface ButtonOptions {
  // Required if not set via data-attributes
  projectId?: string;
  buttonText?: string;
  projectOrderTitle?: string;
  projectOrderDescription?: string;

  // Order which you created on backend and want to display
  orderId?: string;

  // Order Configuration
  projectUserId?: string;
  projectOrderMeta?: string;
  defaultFiatCurrency?: 'usd' | 'eur';
  defaultFiatAmount?: string;
  
  // UI Customization
  uiSize?: 'mini' | 'normal';
  uiRadius?: '10' | '30';
  buttonColor?: 'white' | 'black' | 'colored' | 'transparent';
  colorScheme?: 'light' | 'dark' | 'auto';
}

Options

projectId

Type: string
Required: Yes
Data Attribute: data-project-id

Your CryptumPay project ID. Get this from your Merchant Console.

button.setOptions({
  projectId: 'your-project-id'
});

projectOrderTitle

Type: string
Required: Yes (unless provided from backend order)
Data Attribute: data-project-order-title

The title of the payment order displayed to the user. Required when creating orders from frontend, optional when restoring existing orders created on backend.

button.setOptions({
  projectOrderTitle: 'Premium Subscription'
});

projectOrderDescription

Type: string
Required: Yes (unless provided from backend order)
Data Attribute: data-project-order-description

Detailed description for the payment order. Required when creating orders from frontend, optional when restoring existing orders created on backend.

button.setOptions({
  projectOrderDescription: 'Monthly recurring payment for premium features'
});

projectUserId

Type: string
Required: No
Data Attribute: data-project-user-id

Your internal user ID to link the payment with a specific user in your system.

button.setOptions({
  projectUserId: 'user_12345'
});

projectOrderMeta

Type: string
Required: No
Data Attribute: data-project-order-meta

Custom metadata in JSON string format to attach to the order.

button.setOptions({
  projectOrderMeta: JSON.stringify({
    plan: 'premium',
    period: 'monthly'
  })
});

defaultFiatCurrency

Type: 'usd' | 'eur'
Required: No
Default: usd
Data Attribute: data-default-fiat-currency

The default fiat currency for the payment amount.

button.setOptions({
  defaultFiatCurrency: 'eur'
});

defaultFiatAmount

Type: string
Required: No
Data Attribute: data-default-fiat-amount

The default payment amount in fiat currency. If not specified, the user will be able to enter a custom amount (useful for donations).

button.setOptions({
  defaultFiatAmount: '99.99'
});

orderId

Type: string
Required: No
Data Attribute: data-order-id

CryptumPay Order ID for restoring an existing payment session.

button.setOptions({
  orderId: '11280ee0-fc4b-4616-b0bb-5751128b76fb'
});

Order Recovery

When orderId is set, the button will restore the existing order instead of creating a new one. Useful for resuming abandoned checkouts.

colorScheme

Type: 'light' | 'dark' | 'auto'
Required: No
Default: auto
Data Attribute: data-color-scheme

The color scheme for the payment gate.

button.setOptions({
  colorScheme: 'dark'
});

buttonColor

Type: 'white' | 'black' | 'colored' | 'transparent'
Required: No
Default: colored
Data Attribute: data-button-color

The color for the payment button.

button.setOptions({
  buttonColor: 'black'
});

Available Colors:

• white - White background with dark text
• black - Black background with light text
• colored - Branded purple gradient [Default]
• transparent - Transparent background

uiSize

Type: 'mini' | 'normal'
Required: No
Default: normal
Data Attribute: data-ui-size

The size of the payment button.

button.setOptions({
  uiSize: 'mini'
});

Sizes:

• mini - Compact button for tight spaces
• normal - Standard button size [Default]

uiRadius

Type: '10' | '30'
Required: No
Default: 30
Data Attribute: data-ui-radius

The border radius of the button in pixels.

button.setOptions({
  uiRadius: '10'
});

buttonText

Type: string
Required: No
Default: CryptumPay
Data Attribute: data-button-text

Custom text displayed inside the payment button.

button.setOptions({
  buttonText: 'Pay with CryptumPay'
});

Complete Example

button.setOptions({
  projectId: 'your-project-id',
  buttonText: 'Pay with CryptumPay',
  projectOrderTitle: 'Premium Subscription',
  projectOrderDescription: 'Monthly subscription with all features',
  projectUserId: 'user_12345',
  projectOrderMeta: JSON.stringify({ plan: 'premium' }),
  defaultFiatCurrency: 'usd',
  defaultFiatAmount: '99.99',
  uiSize: 'normal',
  uiRadius: '10',
  colorScheme: 'colored'
});

Updating Options

You can update options at any time. The button will automatically update:

// Initial setup
button.setOptions({
  projectId: 'your-project-id',
  buttonColor: 'colored'
});

// Later
button.setOptions({
  buttonColor: 'black',
});

Partial Updates

You don't need to specify projectId again when updating - existing options are preserved.

See Also

• Button Class - Button class methods and properties
• Events Flow - Events flow
• UI Customization - Visual customization guide