JavaScript SDK

A modern, lightweight SDK for embedding EmbPay checkout on any website. Includes license verification, event handling, and customizable UI.

Installation

Script Tag (Recommended)

Add this to your HTML before the closing </body> tag:

<script src="https://embpay.vercel.app/sdk.js"></script>
<script>
  const embpay = new EmbPay({ merchantId: 'usr_xxx' });
</script>

Legacy Embed (Auto-Init)

For backward compatibility with older embed code:

<script 
  src="https://embpay.vercel.app/embed.js"
  data-product="prod_abc123"
  data-merchant="usr_xxx"
  data-text="Buy Now — $97"
  data-color="#6366f1"
  data-mode="popup"
></script>

React Integration

Use in React components with useEffect:

import { useEffect, useRef } from 'react';

function CheckoutButton({ productId }) {
  const embpayRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://embpay.vercel.app/sdk.js';
    script.async = true;
    script.onload = () => {
      embpayRef.current = new window.EmbPay({ 
        merchantId: 'usr_xxx' 
      });
      
      embpayRef.current.on('purchase', (data) => {
        console.log('Purchase:', data);
      });
    };
    document.body.appendChild(script);
    
    return () => {
      if (embpayRef.current) {
        embpayRef.current.off('purchase');
      }
    };
  }, []);

  const handleClick = () => {
    if (embpayRef.current) {
      embpayRef.current.checkout(productId, {
        onSuccess: (order) => {
          alert('Payment successful!');
        },
        theme: 'dark',
      });
    }
  };

  return (
    <button onClick={handleClick}>
      Buy Now
    </button>
  );
}

Checkout Method

Open a checkout popup for a specific product:

embpay.checkout('prod_abc123', {
  // Customer data (optional)
  customerEmail: 'customer@example.com',
  customerName: 'John Doe',
  
  // Theme (optional)
  theme: 'dark', // 'dark' | 'light'
  
  // Callbacks
  onSuccess: (order) => {
    console.log('Payment successful!', order);
    // order.orderId, order.productId, order.email, order.licenseKey
  },
  
  onCancel: () => {
    console.log('Checkout cancelled');
  }
});

Parameters

productIdThe product ID to checkout
customerEmailPrefill customer email
customerNamePrefill customer name
theme'dark' or 'light'
onSuccessCallback when payment completes
onCancelCallback when checkout is cancelled

License Verification

Verify license keys for software products. Perfect for desktop apps, SaaS, and digital products:

const result = await embpay.verifyLicense('EMBP-XXXX-XXXX-XXXX-XXXX', {
  machineId: 'device_123',     // Optional: Device/machine ID
  productId: 'prod_abc123',    // Optional: Validate specific product
});

if (result.valid) {
  console.log('License is valid!');
  console.log('Product:', result.productId);
  console.log('Customer:', result.email);
  console.log('Expires:', result.expiresAt);
  console.log('Activations:', result.activations + '/' + result.maxActivations);
} else {
  console.error('Invalid license');
}

Response Object

validbooleanLicense validity status
productIdstringAssociated product ID
emailstringCustomer email
expiresAtstring?Expiration date (null = lifetime)
activationsnumberCurrent activation count
maxActivationsnumberMaximum allowed activations

Use Cases

  • • Desktop software license validation
  • • SaaS subscription verification
  • • Plugin/extension activation
  • • API access control

Create Button

Programmatically create a buy button and attach it to any DOM element:

const container = document.getElementById('checkout-container');

embpay.createButton('prod_abc123', container, {
  text: 'Buy Now — $97',
  color: '#6366f1',
  mode: 'popup', // 'popup' | 'redirect' | 'embed'
  
  // Optional: all checkout() options
  customerEmail: 'customer@example.com',
  theme: 'dark',
  onSuccess: (order) => { /* ... */ },
  onCancel: () => { /* ... */ }
});

popup

Opens checkout in a centered popup window

redirect

Redirects to checkout page

embed

Replaces button with embedded iframe

Event Listeners

Listen for global events across all checkout sessions:

// Listen for purchase events
embpay.on('purchase', (data) => {
  console.log('New purchase!', data);
  // { orderId, productId, email, licenseKey }
  
  // Example: Send to analytics
  gtag('event', 'purchase', {
    transaction_id: data.orderId,
    value: data.amount,
    currency: 'USD'
  });
});

// Listen for checkout open
embpay.on('checkout:open', (data) => {
  console.log('Checkout opened for product:', data.productId);
});

// Listen for checkout close
embpay.on('checkout:close', (data) => {
  console.log('Checkout closed');
});

// Remove event listener
embpay.off('purchase'); // Remove all listeners
embpay.off('purchase', specificCallback); // Remove specific listener

Available Events

purchase—Fired when a purchase completes
checkout:open—Fired when checkout popup opens
checkout:close—Fired when checkout popup closes

Complete Example

A full integration example with all features:

<!DOCTYPE html>
<html>
<head>
  <title>My Product</title>
</head>
<body>
  <div id="checkout-button"></div>
  <div id="license-check"></div>

  <script src="https://embpay.vercel.app/sdk.js"></script>
  <script>
    // Initialize SDK
    const embpay = new EmbPay({ merchantId: 'usr_xxx' });

    // Listen for purchases globally
    embpay.on('purchase', (data) => {
      console.log('Purchase completed!', data);
      
      // Show license key
      document.getElementById('license-check').innerHTML = `
        <div style="padding: 20px; background: #10b981; color: white; border-radius: 8px;">
          <h3>Thank you for your purchase!</h3>
          <p>License Key: <strong>${data.licenseKey}</strong></p>
          <p>Order ID: ${data.orderId}</p>
        </div>
      `;
      
      // Send to analytics
      if (window.gtag) {
        gtag('event', 'purchase', {
          transaction_id: data.orderId,
          value: 97.00,
          currency: 'USD'
        });
      }
    });

    // Create checkout button
    const container = document.getElementById('checkout-button');
    embpay.createButton('prod_abc123', container, {
      text: 'Buy Now — $97',
      color: '#6366f1',
      mode: 'popup',
      theme: 'dark',
      onSuccess: (order) => {
        // Additional success handling
        console.log('Payment successful!', order);
      },
      onCancel: () => {
        console.log('User cancelled checkout');
      }
    });

    // Optional: Verify existing license
    async function checkLicense(key) {
      try {
        const result = await embpay.verifyLicense(key, {
          machineId: 'device_' + Date.now(),
          productId: 'prod_abc123'
        });
        
        if (result.valid) {
          console.log('License valid!', result);
        } else {
          console.error('Invalid license');
        }
      } catch (error) {
        console.error('License verification failed:', error);
      }
    }
  </script>
</body>
</html>

Need Help?

Check out our full API documentation or contact support.

API DocsContact Support