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.

Put the JS snippet in your website's header
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. 
Locate your products with data elements
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>
Specify where to display your data
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>
​
Regarding non-visual elements (href)
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.
List of all available data
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: "🇪🇸"
      }
    },
  }
}
Monthly/yearly switch
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!

Guides - Previous

Creating your localized prices

Next - Use Cases

Webflow integration

Last modified 9mo ago