Dynamic updates

Accordero automatically handles dynamic content without any extra configuration. Whether you're building a single-page application (SPA), using JavaScript frameworks, or updating prices in real-time, the SDK watches for changes and keeps everything in sync.

How it works

The SDK uses two MutationObservers to handle dynamic content:

1. Node Observer: Watches for new pricing elements added to the DOM
2. Attribute Observer: Watches for changes to data-pf-base-price attributes

When changes are detected, Accordero automatically:

• Converts prices to the visitor's local currency
• Wires up checkout buttons on new elements
• Updates the display instantly

Single-page applications (SPAs)

If you're using React, Vue, Angular, or any other JavaScript framework, Accordero works seamlessly. As your app renders new pricing components, they're automatically localized.

// React example - prices are localized automatically
function PricingPage() {
  const [plan, setPlan] = useState("monthly");

  return (
    <Card
      data-pf-base-price={plan === "monthly" ? 29 : 290}
      data-pf-base-currency="usd"
    >
      <CardContent>
        <div data-pf-price-formatted>{plan === "monthly" ? "$29" : "$290"}</div>
      </CardContent>
    </Card>
  );
}

Real-time price updates

Change prices dynamically and Accordero will re-convert them instantly:

<!-- Initial price -->
<Card data-pf-base-price="50" data-pf-base-currency="usd">
  <div data-pf-price-formatted>$50</div>
</Card>

<script>
  // Update the price - Accordero will re-convert automatically
  document.querySelector("[data-pf-base-price]").dataset.pfBasePrice = "100";
</script>

Dynamically added content

Content added after page load is automatically handled:

// Add a new pricing card dynamically
const newCard = document.createElement("div");
newCard.innerHTML = `
  <div data-pf-base-price="99" data-pf-base-currency="usd">
    <span data-pf-price-formatted>$99</span>
    <button data-pf-checkout>Buy Now</button>
  </div>
`;
document.body.appendChild(newCard);
// Accordero automatically localizes and wires up the checkout button

Performance considerations

The SDK is optimized for performance:

• Debounced updates: Price recalculations are debounced (120ms) to prevent excessive updates
• Cached rates: Exchange rates are fetched once and cached for the session
• Efficient observers: Only watches relevant attributes and elements
• No polling: Uses native MutationObserver API instead of polling

Next steps