Data Attributes
Update pricing on your page with zero custom JavaScript using GoPayLocal data attributes.
The JavaScript SDK can automatically update any HTML element that has a GoPayLocal data attribute. This lets you build localized pricing with zero custom rendering code.
How It Works
Section titled “How It Works”- Add data attributes to your HTML elements
- Initialize the SDK
- Call
gpl.bindPriceElements()to update all attributed elements
<div class="pricing-card"> <h3>Pro Plan</h3> <span data-gopaylocal-price="9.99">$9.99</span>/mo <p>Use code <code data-gopaylocal-coupon></code> for <span data-gopaylocal-discount></span> off </p></div>
<script type="module"> import { GoPayLocal } from '@gopaylocal/js';
const gpl = new GoPayLocal({ apiKey: 'gpl_pk_live_abc123' }); await gpl.init(); gpl.bindPriceElements();</script>After initialization, the elements update automatically:
<!-- Before (US visitor) --><span data-gopaylocal-price="9.99">$9.99</span>
<!-- After (India visitor, 30% off) --><span data-gopaylocal-price="9.99">₹499</span>Available Data Attributes
Section titled “Available Data Attributes”data-gopaylocal-price
Section titled “data-gopaylocal-price”Replace the element’s text content with the localized, discounted price.
<span data-gopaylocal-price="99.99">$99.99</span><!-- → "₹4,999" -->
<span data-gopaylocal-price="9">$9</span><!-- → "₹499" -->The attribute value is the base price in your default currency. The fallback text content ($99.99) is shown before the SDK loads.
data-gopaylocal-price-original
Section titled “data-gopaylocal-price-original”Replace with the original (non-discounted) price in the visitor’s local currency. Useful for strikethrough display.
<s data-gopaylocal-price-original="99.99">$99.99</s><span data-gopaylocal-price="99.99">$99.99</span><!-- → <s>₹7,499</s> ₹4,999 -->data-gopaylocal-currency-symbol
Section titled “data-gopaylocal-currency-symbol”Replace with the visitor’s local currency symbol.
<span data-gopaylocal-currency-symbol>$</span><!-- → "₹" (India), "€" (Germany), "¥" (Japan) -->data-gopaylocal-currency-code
Section titled “data-gopaylocal-currency-code”Replace with the visitor’s local currency code (ISO 4217).
<span data-gopaylocal-currency-code>USD</span><!-- → "INR" (India), "EUR" (Germany), "JPY" (Japan) -->data-gopaylocal-country
Section titled “data-gopaylocal-country”Replace with the visitor’s country name.
<span data-gopaylocal-country></span><!-- → "India", "Germany", "Japan" -->data-gopaylocal-country-flag
Section titled “data-gopaylocal-country-flag”Replace with the visitor’s country flag emoji.
<span data-gopaylocal-country-flag></span><!-- → "🇮🇳", "🇩🇪", "🇯🇵" -->data-gopaylocal-discount
Section titled “data-gopaylocal-discount”Replace with the discount percentage.
<span data-gopaylocal-discount></span><!-- → "30%" -->data-gopaylocal-coupon
Section titled “data-gopaylocal-coupon”Replace with the coupon code.
<code data-gopaylocal-coupon></code><!-- → "PPP-INDIA-30" -->Complete Example
Section titled “Complete Example”<!DOCTYPE html><html><head> <title>Pricing</title> <style> .pricing-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; max-width: 300px; } .price { font-size: 2rem; font-weight: 700; } .original { text-decoration: line-through; opacity: 0.5; } .discount-banner { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; margin-bottom: 16px; display: none; } </style></head><body>
<div class="discount-banner" id="ppp-banner"> <span data-gopaylocal-country-flag></span> <span data-gopaylocal-discount></span> off for <span data-gopaylocal-country></span>! Use code <code data-gopaylocal-coupon></code> </div>
<div class="pricing-card"> <h3>Pro Plan</h3> <div> <s class="original" data-gopaylocal-price-original="9.99">$9.99</s> <span class="price" data-gopaylocal-price="9.99">$9.99</span> <span>/mo</span> </div> <ul> <li>10 products</li> <li>1M API hits/mo</li> <li>No branding</li> </ul> <button>Get Started</button> </div>
<script type="module"> import { GoPayLocal } from '@gopaylocal/js';
const gpl = new GoPayLocal({ apiKey: 'gpl_pk_live_abc123' }); const data = await gpl.init();
if (data) { gpl.bindPriceElements(); // Show the discount banner document.getElementById('ppp-banner').style.display = 'block'; } </script>
</body></html>Re-binding After DOM Changes
Section titled “Re-binding After DOM Changes”If you dynamically add new elements with data attributes (e.g., after loading more products via a template), call bindPriceElements() again to update the new elements:
// After adding new DOM elements via your templating systemgpl.bindPriceElements();