updatePrice

updatePrice(price)

Updates the payment amount without re-rendering the button.

Syntax

button.updatePrice(price)

Parameters

Parameter
Type
Required
Description

price

number

Yes

New payment amount in USD

Returns

  • Type: void

  • Description: No return value

Important Notes

  • Only updates the internal price value

  • Does NOT automatically update button text

  • You must manually update button.button.textContent if you want to show the new price

  • Next checkout will use the updated price

Usage

Basic Price Update:

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

// Update price
button.updatePrice(75.00);

button.button.textContent = "Buy Now - $75.00";

Quantity Selector Example:

let quantity = 1;
const unitPrice = 19.99;

const button = new ButtonDynamicPrice({
  price: unitPrice,
  apiKey: "your_api_key",
  title: `Buy ${quantity} item - $${unitPrice.toFixed(2)}`
});

document.getElementById('container').appendChild(button.render());

// Quantity input handler
document.getElementById('quantity').addEventListener('change', (e) => {
  quantity = parseInt(e.target.value);
  const newPrice = unitPrice * quantity;

  // Update price
  button.updatePrice(newPrice);

  // Update button text
  button.button.textContent = `Buy ${quantity} items - $${newPrice.toFixed(2)}`;
});

Dynamic Pricing Example:

const button = new ButtonDynamicPrice({
  price: 0,
  apiKey: "your_api_key",
  title: "Calculate & Pay"
});

function calculateTotal(items) {
  const total = items.reduce((sum, item) => sum + item.price, 0);

  button.updatePrice(total);
  button.button.textContent = `Pay Total - $${total.toFixed(2)}`;
}

// When cart changes
cart.addEventListener('update', () => {
  calculateTotal(cart.items);
});

Subscription Plan Selector:

const plans = {
  monthly: 9.99,
  yearly: 99.99,
  lifetime: 299.99
};

const button = new ButtonDynamicPrice({
  price: plans.monthly,
  apiKey: "your_api_key",
  title: "Subscribe - Monthly $9.99"
});

document.getElementById('plan-select').addEventListener('change', (e) => {
  const selectedPlan = e.target.value;
  const price = plans[selectedPlan];

  button.updatePrice(price);

  const titles = {
    monthly: `Subscribe - Monthly $${price}`,
    yearly: `Subscribe - Yearly $${price}`,
    lifetime: `Subscribe - Lifetime $${price}`
  };

  button.button.textContent = titles[selectedPlan];
});

Last updated

Was this helpful?