Steps to Implement
1. Methods
Merchants may choose from two approved implementation options.
- Progressive JavaScript Snippet, where presentation is provided by Progressive with two presentation options (centered modal or right anchored modal). Parameters for the payment estimator are contained in the Progressive session.
- Merchant Container, where presentation is provided by the merchant to render Progressive payment estimator UI. Parameters for the payment estimator are provided in a URL. This option is most beneficial for merchants implementing custom buttons (“Continue with lease”, “Continue with order”, etc.) in a frame around the payment estimator.
Follow these steps to implement the payment estimator snippet on PDPs or Cart, using either Progressive’s JavaScript Snippet, or a Merchant Container to render Progressive’s UI.
2. Progressive JavaScript Snippet
To utilize the JavaScript Snippet on PDPs, the following library must be included on each page that displays banners:
<script src=”https://progressivelp.com/JSSnippet/ecom-hangtag.js?storeId=<storeid>&pluginType=GA&authName=<StoreEcomID>&authPass=<StoreKey>”>
StoreId: Your Progressive Store ID. This value will be provided by Progressive.
StoreEcomID, StoreKey: Will accept any provided values when using the Payment Estimator Snippet alone, but these values are required and authenticated when using the Payment Estimator Snippet with the Application option. When using the Payment Estimator Snippet alone, use <hangtagmerchant> for StoreEcomID and <hangtagkey> for StoreKey.
Example of default banner presentation:
To display the Payment Estimator link displayed above, include the following:
<pg-pdp placement=”right” price=”1000” state-code=”UT”></pg-pdp>
- Placement: "right" or "center". If omitted, display will default to center.
- Price: Retail cash price of leasable Items. Exclude the value of non-leasable items.
- State Code: 2-character state abbreviation.
If omitting state and retail price, include the following:
<pg-pdp placement=”right” price=”1000” state-code=”UT”></pg-pdp>
Without all required inputs, the payment estimator will render a page where the user may enter state, retail price, and pay frequency.
3. Retail Cash Price on PDPs
When providing this value, the best practice is to insert a price variable that can recognize the current retail price from any leasable product detail page. Without this variable, you may insert the retail price manually when placing the snippet, or the customer may enter the retail price directly into the payment estimator.
4. Testing the Payment Estimator Snippet
Use the following demo URL and your store’s demo store ID, provided by Progressive:
Demo URL
5. Merchant Container
If desired, the Progressive UI may be presented in a merchant customized container. To do so, the following is an example of HTML that will render the payment estimator.
5.1 Request Type
Two request types may be used:
- pdp: renders an editable payment estimator, intended to be used on product detail pages or other locations where customer's cart is not final
- checkout-pdp: renders a read-only payment estimator, intended to be a customer's final look at lease pricing prior to entering a lease signing session
5.2 Marketing Placement - Example HTML
<script>
function openEstimator()
{
let price = document.getElementsByClassName("price");
if(price.length > 0)
{
let parsedPrice = price[0].innerText.split("$")[1].replace(",","");
ProgHangtag.OpenPaymentEstimator(12345, "", parsedPrice, "pdp","center", “biWeekly”);
}
}
</script></head>
<div class="prog-pdp-modal" style="cursor: pointer" onclick='openEstimator()'>
<span style="font-family:sans-serif; font-size: 115%; font-weight: bold;">Lease-To-Own with</span> <img style="vertical-align: middle; margin-right: 5px; max-width: 170px; height: auto" src="https://progressivelp.com/jssnippet/assets/logo_horizontal.png"><span style="color: blue;font-family:sans-serif; font-size: 115%; font-weight: bold;">Learn More</span>
</div>
5.3 Render the Payment Estimator in a Merchant Container - Example HTML
(function (window, document) {
var __close_message__ = "__PROGRESSIVE_UI_CLOSE__";
window.ProgHangtag = window.ProgHangtag || {};
var ProgHangtag = window.ProgHangtag;
ProgHangtag.CloseApplicationUI = function () {
window.postMessage(__close_message__, "*");
};
ProgHangtag.OpenPaymentEstimator = function (storeId, stateCode, itemCost, requestType, placement) {
document.body.style.overflow = "hidden";
var mobileViewThreshold = 1024;
var url = "https://progressivelp.com/eComUI/#/apply/est-settings?storeId=" + storeId + "&itemCost=" + itemCost + "&requestType=" + requestType;
if (stateCode != null)
url = url + "&stateCode=" + stateCode;
var backdrop = document.createElement("div");
var iframe = document.createElement("iframe");
backdrop.id = "progressive-backdrop";
backdrop.zIndex = "1677727";
iframe.zIndex = "1677728";
iframe.src = url;
backdrop.style.opacity = 0;
iframe.style.opacity = 0;
backdrop.style.transition = "all 300ms";
iframe.style.transition = "all 300ms";
iframe.style.backgroundColor = "#FFFFFF";
iframe.style.zIndex = "1677728";
backdrop.style.zIndex = "1677727";
function isMobile() {
return window.innerWidth < mobileViewThreshold;
}
function setMobileStyles() {
backdrop.style.position = 'fixed';
backdrop.style.top = 0;
backdrop.style.left = 0;
backdrop.style.bottom = 0;
backdrop.style.right = 0;
backdrop.style.background = "#000000";
iframe.style.position = "fixed";
iframe.style.display = "block";
iframe.style.left = 0;
iframe.style.top = 0;
iframe.style.right = 0;
iframe.style.bottom = 0;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.marginLeft = "0px";
iframe.style.marginTop = "0px";
iframe.style.borderRadius = "0px";
iframe.style.border = "none";
}
function setDesktopStyles() {
backdrop.style.position = "fixed";
backdrop.style.top = 0;
backdrop.style.left = 0;
backdrop.style.bottom = 0;
backdrop.style.right = 0;
iframe.style.width = "500px";
iframe.style.maxHeight = "686px";
iframe.style.height = "calc(100vh - 80px - 5%)";
iframe.style.position = "fixed";
if (placement === "right") {
iframe.style.right = "8px";
iframe.style.bottom = 0;
iframe.style.boxShadow = "-1px -1px 0 0 rgb(223, 227, 232)";
} else { // style for center placement
backdrop.style.background = "#000000";
iframe.style.top = "80px";
iframe.style.left = "50%";
iframe.style.marginLeft = "-250px";
iframe.style.marginTop = "3%";
}
iframe.style.border = "1px solid rgb(223, 227, 232)";
}
function animateIn() {
body.appendChild(backdrop);
body.appendChild(iframe);
setTimeout(function () {
backdrop.style.opacity = 0.5;
setTimeout(function () {
iframe.style.opacity = 1;
}, 200);
}, 1);
}
function animateOut() {
iframe.style.opacity = 0;
backdrop.style.opacity = 0;
setTimeout(function() {
document.body.removeChild(iframe);
document.body.removeChild(backdrop);
document.body.style.overflow = null;
},
300);
}
function updateStyles() {
window.innerWidth >= mobileViewThreshold ? setDesktopStyles() : setMobileStyles();
}
window.addEventListener('resize', updateStyles);
var body = document.body;
updateStyles();
animateIn();
function handleFrameMessage(msg) {
if (msg.data === __close_message__) {
animateOut();
window.removeEventListener('message', handleFrameMessage);
}
}
window.addEventListener('message', handleFrameMessage);
};
})(window, document)
Replace <storeId>, <price> and <state> with appropriate values or dynamic variables. If retail price and state are omitted, the payment estimator will launch and the customer will be prompted to enter those values prior to receiving a payment estimate.
Updated about 3 years ago