Displaying your prices
See how you can display all your dynamic data on your pricing page. Spoiler alert: It's easy and works with custom websites as well as website-builders.
To get your Pricery data to display on your site, you must first put 2 lines of JavaScript in the
<head>
section of your website. It will look something like:<script src="https://www.pricery.io/pricery.js"></script>
<script async>new Pricery("here-your-api-key").init()</script>
Don't forger to replace the
here-is-your-api-key
by your API key. You can find your API key in the "Settings" section of your Pricery account. 
Pricery first needs you to locate with
data-pricery
data-elements each one of your product. A product is identified by its Stripe ID:<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>
In order to replace visual elements of your page, Pricery gives you
data-pricery-content
data elements. Following the above example, we could display the currency symbol and price full value the following way: <div data-pricery="prod_M5Rjvwft1m9tpZ">
<h1>
<span data-pricery-content="price.amount.full"></span>
<span data-pricery-content="price.currency.symbol"></span>
<h1>
</div>
At some point, you'll probably need to inject some non-visual elements such as links to your products. In this case, use the
data-pricery-href
data-element to specify which part of the link should be changed.Below is the response your get from the Pricery API. You can call any data you want by writing the data path in your data element. For instance, to call the monthly price of the product, you need to write
data-pricery-content="price.amount.full"
The variant of your price (monthly/yearly) is determined by the Pricery variant button (see section below).
{
stripe_id: "prod_M5RcDwkVWRkMpo",
show_cosmetic: true,
default_variant: "monthly",
price: {
price_id: "price_1LNGjVCXz3Ph9GEINlchRiTv",
recurrence: {
display: "/mo",
interval: "month"
},
amount: {
full: "39.00",
major: "39",
minor: "00",
minor_with_decimal: ".00"
},
currency: {
name: "United States dollar",
code: "USD",
symbol: "$",
exchange_rate_to_usd: {
id: 385,
currency_id: 138,
target: "USD",
value: 1,
created_at: "2022-07-05T12:20:45.284Z",
updated_at: "2022-07-05T12:21:12.616Z"
}
},
location: {
country_name: "Spain",
country_flag: "🇪🇸"
},
cosmetic: {
recurrence: {
display: "/mo",
interval: "month"
},
amount: {
full: "38.12",
major: "38",
minor: "12",
minor_with_decimal: ".12"
},
currency: {
name: "Euro",
code: "EUR",
symbol: "€",
exchange_rate_to_usd: {
id: 121,
currency_id: 45,
target: "USD",
value: 1.023201,
created_at: "2022-07-05T12:20:43.891Z",
updated_at: "2022-07-19T16:09:11.133Z"
}
},
location: {
country_name: "Spain",
country_flag: "🇪🇸"
}
},
}
}

Pricery also comes with a switch button allowing users to quickly switch between your prices' variants (monthly/yearly pricing). You can add it to any link and a simple click will switch the values from one to the other.
<a href="#" data-pricery-button="monthly">Monthly</a>
<a href="#" data-pricery-button="yearly">Yearly</a>
Simple as that!
Last modified 9mo ago