From Pricing and Information Modal

Overview

Uplift’s API will enable “Pay Monthly” messaging and pricing to be shown throughout the consumer purchase funnel in order to increase awareness and conversion. It does this using Pricing Nodes which are HTML elements showcasing the Pay Monthly Offer to the customer as an alternative payment method. An example of a Pricing Node is as shown below.

The Pricing Node is composed of 3 required elements:

• “From” wording
• Pay Monthly Offer
• Information icon

Additionally, by clicking a Pricing Node (Pay Monthly Offer), an Informational Modal will be automatically shown to the consumer. This modal provides important product, consumer financial and regulatory information. An example of such a modal as shown below.

Configuration

In order to configure Uplift’s Monthly Pricing Nodes as mentioned above, add the hidden Pay Monthly nodes wherever the offers are to be displayed using the HTML code as shown below.

<span style="display:none; cursor: pointer" data-up-price-value="257600" data-up-price-type="total">
or from
    <span data-up-from-currency-unit-major=""></span>/mo
    <span data-up-tooltip="">
        <!--Replace with your preferred icon/svg-->
    </span>
</span>

We have provided a default tooltip (icon: ), in order to use it just copy the script below and place it in the corresponding spot in the Pay Monthly node script (above).

//default svg informational icon
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
</svg>

Note that once the Pay Monthly Nodes have been configured, a single call of the window.Uplift.Payments.load(orderInfo) method will fetch and display the Pay Monthly pricing (offers) for each node as per their respective data-up-price-value attribute.

Thus, it is the best recommended practice to configure all Pay Monthly nodes with the updated data-up-price-value attribute (not fixed amounts), followed by a single window.Uplift.Payments.load(orderInfo) call to create and attach the updated offers on all the nodes.

As mentioned above, when a customer clicks on the Pay Monthly offer, an information modal as will be displayed; Let’s review the different attributes of this modal in the image below:

Note: “at checkout” messaging in the informational modal is dependent on whether the library was initialized as a payment or non-payment page. Specifically “at checkout”, will only be shown on non-payment pages.

Styling guidelines

The From Pricing should always be positioned immediately next to or under total prices, below are sample layouts:

Styling guidelines are as follows:

1. From Pricing (i.e. “$XX/mo”) to reflect a hyperlinked state so users know it’s clickable on a hover action (applies to all placements of From Pricing)
2. Link color and text colour must pass WCAG AA color contrast
3. From pricing is no larger than 80% of the price font size (e.g. if the price font size is 24px, the From Pricing is no larger than 19px)
4. From pricing style should match the price style:
   1. If the price is “$900”, the from pricing is “$81”
   2. If the price is “$900 USD”, the from pricing is “$81 USD”
5. Feel free to customize the info icon that best matches your website

Alignment related compliance guidelines are as follows:

1. “from” must be on the same line as the price “$xx/mo ”
2. “or” can be on a separate line above “from $xx/mo ”
3. The icon must also be present after and on the same line as the From Pricing
4. When the pricing is shown as an additional cost, use “or add from $xx/mo ” or "or from +$xx/mo "
   1. “or add” can be on a separate line above “from $xx/mo ”
5. For the total price at Payment Page from pricing can be displayed as “or Pay Monthly from $xx/mo ”
   1. “from” must be right beside “$xx/mo ”

French Translations

Please use the following image as reference if you require a French translation for the Uplift From Pricing messaging.