Integration Patterns

These are just some common integration patterns, which might help with your SDK integration.

Pattern 1: Single Product Button

Best for landing pages with one product:

const button = new ButtonDynamicPrice({
  price: 49.99,
  apiKey: "your_api_key",
  title: "Buy Premium Plan - $49.99",
  style: {
    backgroundColor: '#6366f1',
    padding: '16px 32px',
    fontSize: '18px'
  }
});

Pattern 2: Multiple Product Buttons

Best for product catalogs:

const products = [
  { id: 1, name: 'Basic Plan', price: 9.99 },
  { id: 2, name: 'Pro Plan', price: 29.99 },
  { id: 3, name: 'Enterprise Plan', price: 99.99 }
];

products.forEach(product => {
  const button = new ButtonDynamicPrice({
    price: product.price,
    apiKey: "your_api_key",
    title: `Buy ${product.name}`,
    customOrderId: `product_${product.id}`
  });

  document.getElementById(`button-${product.id}`)
    .appendChild(button.render());
});

Pattern 3: Dynamic Pricing

Best for quantity selectors or custom amounts:

let quantity = 1;
const basePrice = 19.99;

const button = new ButtonDynamicPrice({
  price: basePrice,
  apiKey: "your_api_key",
  title: `Buy Now - $${basePrice}`
});

// Update price when quantity changes
document.getElementById('quantity').addEventListener('change', (e) => {
  quantity = parseInt(e.target.value);
  const newPrice = basePrice * quantity;

  button.updatePrice(newPrice);
  button.button.textContent = `Buy ${quantity} - $${newPrice.toFixed(2)}`;
});