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:

Product-related

data-element value	description	example
product.name	Current product/plan's Stripe name	ACME Big Plan
product.stripe_product_id	Its Stripe ID	prod_a1b2c3d4
product.default_variant	The variant shown first to your visitors	"month"
product.default_volume	Current variant's amount after comma with dot	1

Price-related

Current price. The price currently show to your visitors.

data-element value	description	example
price.amount.full	Current variant's full amount	9.99
price.amount.major	Current variant's amount before comma	9
price.amount.minor	Current variant's amount after comma	99
price.amount.minor_with_dot	Current variant's amount after comma with dot	.99
price.amount.symbol	Current variant's currency symbol	$

Currency-related

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

currency.name	Current price's currency name	Euro
currency.code	Its currency code	EUR
currency.symbol	And symbol	€
currency.exchange_rate_to_usd	Multiply your price by this amount to find its USD value	1.15