Landing page integration


Getting Started


To automatically display prices in a local currency depending on where you users are located, you'll need to:

  1. Tag your prices on your pages
  2. Add a javascript snippet

1. Tag your page:

  • Add the data-priceur HTML attribute to the HTML element containing the price
  • Optionally, you can customize the value being displayed or replaced. See below for possible customization options.
2. Add a small code snippet into your landing pages' <script> tag:

Copy the following Javascript snippet in the pages that need to be localized: 
<script>
(function(pr, i, c, e, u, r) {
  pr['PriceurCommand'] = e;
  pr[e] = pr[e] || function() { (pr[e].q = pr[e].q || []).push(arguments) };
  u = i.createElement('script');
  r = i.getElementsByTagName('script')[0];
  u.async = 1;
  u.src = c;
  r.parentNode.insertBefore(u, r);
})(window, document, "//priceur.com/api/v1/priceur.js", 'priceur');

priceur('init', 'public_test_123EXAMPLE321', true);
</script>

Landing page customization


Use data-priceur attributes on any element of your webpage to localize it.
Here are the attributes you can use to further customize your pages:

Attribute Presence Value Description
data-priceur Mandatory Plan id The plan id that needs to be localized.
If data-priceur is the only Priceur tag on the HTML element, Priceur will auto-detect how to replace the data depending on the HTML element's content. Use optional attributes below to adapt the default behavior to your exact needs.
data-priceur-content Optional Plan attribute One of the attribute for a plan returned by Priceur API. See documentation for more information.
Default: description for <label /> and <option /> elements and amount.tag for other elements.
data-priceur-attr Optional HTML attribute The name of the HTML attribute to update.
Default: value for form elements only.
data-priceur-attr-value Optional Plan attribute One of the attribute for a plan returned by Priceur API. Will only be used if data-priceur-attr is set.
Default: provider_id (the plan id).
data-priceur-replace-id Optional HTML attribute The name of the HTML attribute where to set the plan id. This tag will replace the plan id by the localized plan id (useful to localize links with the correct plan id).
Default: href for link elements only.
data-priceur-replace-currency Optional HTML attribute The name of the HTML attribute in which to replace the currency code. This tag will replace any USD string in the attribute by the localized currency (useful to pass favorite currency during sign up for example).
Default: href for link elements only.
data-priceur-checkout Optional no value Indicate that the Stripe Checkout form has to be localized.
Can only be applied to a <script> element of a Stripe Checkout form. Attribute takes no value.

Examples and common use cases


Examples below demonstrate how Priceur can localize Plans and pricing for the most common use cases

Let's say you have the following pricing table:

<div class="card">
  <div class="card-header">
    <h3>Startup Plan</h3>
  </div>
  <div class="card-body">
    <span>$99.00</span> / mo
    <a href="https://example.com/signup?plan=startup">Get Started</a>
  </div>
</div>

You want to localize the displayed price and the sign up URL to include the localized plan ID. Just add the data-priceur elements on the elements you want to be localized. 

<div class="card">
  <div class="card-header">
    <h3>Startup Plan</h3>
  </div>
  <div class="card-body">
    <span data-priceur="startup">$99.00</span> / mo
    <a href="/signup?plan=startup" data-priceur="startup">Get Started</a>
  </div>
</div>

Sometimes, the currency is split from the price:

<div>
  <span class="currency">$</span>
  <span class="price">99</span>
</div>

In that case, you can specify which content to insert in each HTML element: 

<div>
  <span class="currency" data-priceur="startup" data-priceur-content="currency.symbol_before">$</span>
  <span class="price" data-priceur="startup" data-priceur-content="amount.major">99</span>
  <span class="currency" data-priceur="startup" data-priceur-content="currency.symbol_after"></span>
</div>

You can easily localize the Stripe Checkout Modal. All you need to do is:

<form action="/path/to/your/server" method="POST">
  <script class="stripe-button"
    src="https://checkout.stripe.com/checkout.js"
    data-key="<your_stripe_key>"
    data-amount="99"
    data-name="Priceur"
    data-description="Starter Plan ($99/month)"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-zip-code="true"
    data-currency="USD">
  </script>
</form>

All you need to do is:

  1. Remove the src="https://checkout.stripe.com/checkout.js" attribute (Priceur will add take care of adding it later)
  2. Add the plan in data-priceur
  3. Add the data-priceur-checkout attribute

<form action="/path/to/your/server" method="POST">
  <script class="stripe-button"
    data-key="<your_stripe_key>"
    data-amount="99"
    data-name="Priceur"
    data-description="Starter Plan ($99/month)"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-zip-code="true"
    data-currency="USD"
    data-priceur="starter"
    data-priceur-checkout>
  </script>
</form>

In a payment form you typically hide the plan on a hidden input:

<form action="/subscribe">
  <input type="hidden" name="plan" value="starter"/>
  ...
</form>

Add a data-priceur element to the input to localize its value. 

<form action="/subscribe">
  <input type="hidden" name="plan" value="starter" data-priceur="startup"/>
  ...
</form>

If your payment forms contains radio buttons to choose their plan, you can also localize them:

<form action="/subscribe">
  <label for="starter_plan">Starter ($49 / month)</label>
  <input type="radio" name="plan" id="starter_plan" value="starter"><br>
  <label for="premium_plan">Premium ($99 / month)</label>
  <input type="radio" name="plan" id="premium_plan" value="premium"><br>
  <label for="pro_plan">Pro ($249 / month)</label>
  <input type="radio" name="plan" id="pro_plan" value="pro"><br><br>
  <input type="submit" value="Submit">
</form>

Add a data-priceur to the label to update the description and another one to the input to localize the value. Of course you can always tweak those default values with data-priceur-content and data-priceur-attr. 

<form action="/subscribe">
  <label for="starter_plan" data-priceur="starter">Starter ($49 / month)</label>
  <input type="radio" name="plan" id="starter_plan" value="starter" data-priceur="starter"><br>
  <label for="premium_plan" data-priceur="premium">Premium ($99 / month)</label>
  <input type="radio" name="plan" id="premium_plan" value="premium" data-priceur="premium"><br>
  <label for="pro_plan" data-priceur="pro">Pro ($249 / month)</label>
  <input type="radio" name="plan" id="pro_plan" value="pro" data-priceur="pro"><br><br>
  <input type="submit" value="Submit">
</form>