Display Prices on your site

Make your pricing page dynamically display prices information based on your visitor's pricing.

Implementing Data Elements in HTML

In order for the prices to be displayed correctly on your website, you need to add specific data-pricery-* attributes to your HTML code. These attributes tell the JS snippet where and how to display the localized prices.

There are 4 types of data-pricery-* attributes that you can use:

  • data-pricery-product to identify a product

  • data-pricery-product to display product related information

  • data-pricery-link to change the buy button's URL parameters

  • data-pricery-product to monitor and change variant related information

Identify products with `data-pricery-product="stripe_product_id"`

data-pricery-product="prod_idxxxxxxx" is used to identify the parent div of a product. It must be placed on top of the children elements related to a product like the amount value, the currency symbol $ etc.

<div id="pricing">
  <div data-pricery="prod_M5Rjvwft1m9tpZ">
    // Small plan 
  </div>
    <div data-pricery="prod_H6cho3DW4J1KGI">
    // Medium plan 
  </div>
    <div data-pricery="prod_66fdwft9uityu">
    // Big plan 
  </div>
<div>

The value of that data-element must be equal to the stripe_product_id of the targeted product.

Display products data with `data-pricery-content="product.amount"`

Within each product's <div>, specify which information you want to display:

<div id="pricing">
  <div data-pricery="prod_M5Rjvwft1m9tpZ">
    <span data-pricery-content="price.currency.symbol">
      // Currency symbol will appear here. i.e. "$"
    </span>
    <span data-pricery-content="price.amount.full">
      // Full amount appears here. i.e. "9.99"
    </span>
  </div>
  // Other plans
<div>

Placeholder values. To make sure your pricing page works, even if Pricery's server get hit by a zombie apocalyspe, leave your current prices values, and URLs, so that your potential customers always see a price and can access your checkout page.

List of available data-elements

Here is the list of every visual value available to you at the moment:

Current price. The price currently show to your visitors.

If you wish to display more elements, reach out to us so we can add them to the list.

Last updated