Payment Buttons

Create customizable cryptocurrency payment buttons for your website or application.

Last updated: June 22, 2023

Overview

CryptoPay Payment Buttons are the simplest way to start accepting cryptocurrency payments on your website. With a simple copy-paste integration, you can add a customizable payment button that handles the entire payment flow, from cryptocurrency selection to payment confirmation.

Easy Integration

Simple to add to any website with just a few lines of code.

No backend code required
Works with any website platform
No complex API integration needed

Customizable Design

Tailor the button to match your brand and website design.

Custom colors and text
Multiple size options
Light and dark mode support

Flexible Pricing

Support various pricing models for your products or services.

Fixed price payments
Customer-defined amounts
Multi-currency support

Advanced Options

Additional features for more complex use cases.

Redirect URLs after payment
Webhook notifications
Custom metadata for tracking

Creating a Payment Button

Follow these steps to create and implement a payment button on your website:

Create a New Button

From your CryptoPay dashboard, navigate to Payments → Payment Buttons → Create New Button.

Configure Basic Settings

Enter the basic information for your payment button:

Button name (for your reference)
Product or service name (displayed to customers)
Description (optional)
Price and currency
Success and cancel URLs (where to redirect after payment)

Customize Appearance

Personalize your button to match your website's design:

Button text
Primary color
Button size (small, medium, large)
Button style (filled, outlined, text-only)
Icons (optional)

Payment Options

Select which cryptocurrencies you want to accept. You can choose specific ones or accept all supported cryptocurrencies.

Get Your Button Code

After saving, you'll receive HTML code for your button. Copy this code to use on your website.

Example Payment Button Code

<script src="https://js.CryptoPay.io/v1/button.js"></script>
<div class="CryptoPay-button" 
  data-button-id="btn_1234567890"
  data-price="25.00"
  data-currency="USD"
  data-name="Premium Subscription"
  data-color="#4F46E5"
  data-size="medium"
  data-style="filled"
  data-text="Pay with Crypto">
</div>

Customization Options

CryptoPay payment buttons can be customized using data attributes. Here's a comprehensive list of available customization options:

Core Attributes

Attribute	Description	Example
`data-button-id`	Your button ID from the dashboard	`btn_1234567890`
`data-price`	Payment amount	`25.00`
`data-currency`	Currency code	`USD`
`data-name`	Product/service name	`Premium Subscription`

Appearance Options

Attribute	Description	Example
`data-text`	Button text	`Pay with Crypto`
`data-color`	Primary color (hex)	`#4F46E5`
`data-size`	Button size	`small, medium, large`
`data-style`	Button style	`filled, outlined, text`
`data-theme`	Button theme	`light, dark, auto`

Advanced Options

Attribute	Description	Example
`data-success-url`	URL to redirect after successful payment	`https://yourdomain.com/thank-you`
`data-cancel-url`	URL to redirect after cancelled payment	`https://yourdomain.com/checkout`
`data-customer-email`	Pre-filled customer email	`user@example.com`
`data-metadata`	Custom JSON metadata	`"order_id":"12345"`

Dynamic Payment Buttons

For more dynamic use cases, you can create payment buttons programmatically using JavaScript:

Dynamic Payment Button Example

<script src="https://js.CryptoPay.io/v1/button.js"></script>
<div id="payment-container"></div>

<script>
  // Get product details from your page
  const product = {
    name: "Premium Plan",
    price: 49.99,
    currency: "USD"
  };
  
  // Create a payment button dynamically
  document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('payment-container');
    
    // Create button element
    const button = document.createElement('div');
    button.className = "CryptoPay-button";
    
    // Set attributes based on product
    button.setAttribute('data-button-id', 'btn_1234567890');
    button.setAttribute('data-name', product.name);
    button.setAttribute('data-price', product.price);
    button.setAttribute('data-currency', product.currency);
    button.setAttribute('data-color', '#4F46E5');
    button.setAttribute('data-text', 'Pay with Crypto');
    
    // Add to container
    container.appendChild(button);
    
    // Initialize button
    if (typeof CryptoPay !== 'undefined') {
      CryptoPay.buttons.initialize();
    }
  });
</script>