Payment Buttons

<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>

<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>