Comment on page

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
​
​
​

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

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	$

Get started - Previous

3a. Plug your Website (No-Code)

Handle Buy Buttons URLs

Last modified 3d ago

`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