Using the HeidiPay price-per-month promotional messaging

You can instantly begin showing the customer a dynamic price-per-month promotional message.

Showing the promotional message on the **product page**

Showing the promotional message on the **customer's cart**

All you need to do is add a small HTML element to your product page (or cart page) wherever you want to show the promotional message and add a <script> to your website. Your webmaster or software engineers will be able to do this very easily.

This is the HTML element to add:

<div class="heidi_messaging">
	<div id="heidipay-container" data-heidipay="true" data-heidipay-currencySymbol="CHF" data-heidipay-type="PRODUCT_DESCRIPTION" data-heidipay-cadence="MONTHLY" data-heidipay-thousandsSeparator="." data-heidipay-decimalSeparator="," data-heidipay-symbolOnLeft="false" data-heidipay-spaceBetweenAmountAndSymbol="true" data-heidipay-decimalDigits="2" 
		data-heidipay-lang="<MODIFY_ME>"
		data-heidipay-apiKey="<MODIFY_ME>"
		data-heidipay-minorAmount="<MODIFY_ME>"
		data-heidipay-term="<MODIFY_ME>" 
  >
  </div> 
</div>

The four values that can be modified to dynamically show the correct message to your customers are displayed on lines 3 - 6:

data-heidipay-lang is a string, one of "en" for English, "fr"for French, "it"for Italian or "ge"for German.

data-heidipay-apiKey is a string and can be anything you like. However, it helps to use your storename in UPPERCASE e.g. "MYEXAMPLESTORE"

data-heidipay-minorAmount is the price of the product (or the basket total) in cents (centimes/ Rappen/ centesimo) as an integer.

data-heidipay-term is a string but should be the biggest number of installments you will offer the customer e.g. "6"

This, for example, is from a demonstration Shopify integration:

📘
You can also have your developers write logic to show or hide the component if the product/order value is too big or too small.

To make the promotional message appear on the page, you must also include this script. We suggest that you put the <script> at the bottom of the <body> of your pages.

<script src="https://upstream.heidipay.com/sdk/heidi-upstream-lib.js" ></script>

📘You can also have your developers write logic to show or hide the component if the product/order value is too big or too small.

📘
You can also have your developers write logic to show or hide the component if the product/order value is too big or too small.