Create customizable cryptocurrency payment buttons for your website or application.
ZenPay 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.
Simple to add to any website with just a few lines of code.
Tailor the button to match your brand and website design.
Support various pricing models for your products or services.
Additional features for more complex use cases.
Follow these steps to create and implement a payment button on your website:
From your ZenPay dashboard, navigate to Payments → Payment Buttons → Create New Button.
Enter the basic information for your payment button:
Personalize your button to match your website's design:
Select which cryptocurrencies you want to accept. You can choose specific ones or accept all supported cryptocurrencies.
After saving, you'll receive HTML code for your button. Copy this code to use on your website.
<script src="https://js.zenpay.io/v1/button.js"></script>
<div class="zenpay-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>ZenPay payment buttons can be customized using data attributes. Here's a comprehensive list of available customization options:
| 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 |
| 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 |
| 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" |
For more dynamic use cases, you can create payment buttons programmatically using JavaScript:
<script src="https://js.zenpay.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 = "zenpay-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 ZenPay !== 'undefined') {
ZenPay.buttons.initialize();
}
});
</script>You can listen for payment events to trigger custom actions on your website:
<script src="https://js.zenpay.io/v1/button.js"></script>
<div class="zenpay-button"
data-button-id="btn_1234567890"
data-price="25.00"
data-currency="USD"
data-name="Premium Subscription">
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Listen for payment initialization
window.addEventListener('zenpay:payment-initiated', (event) => {
console.log('Payment started', event.detail);
// You could show a loading indicator, disable forms, etc.
});
// Listen for successful payments
window.addEventListener('zenpay:payment-success', (event) => {
console.log('Payment successful', event.detail);
// Get payment details
const { paymentId, amount, currency } = event.detail;
// Show success message or redirect
alert(`Thank you for your payment of ${amount} ${currency}!`);
// Optional: Redirect to a thank you page
// window.location.href = '/thank-you?payment_id=' + paymentId;
});
// Listen for payment cancellations
window.addEventListener('zenpay:payment-cancel', (event) => {
console.log('Payment cancelled', event.detail);
// Handle cancellation
});
// Listen for payment errors
window.addEventListener('zenpay:payment-error', (event) => {
console.error('Payment error', event.detail);
// Show error message
});
});
</script>Follow these tips to optimize your payment button implementation:
Make sure payment buttons are easy to find and clearly visible on your page.
Make the purpose of the button obvious with text like "Pay Now" or "Subscribe with Crypto".
For critical payments, always implement webhooks to ensure your systems get notified about successful payments even if users close their browser.
Always test your payment buttons in test mode before going live with real payments.