Implementation Options

1. Placement

Merchants are required to display the payment estimator tool in any location where Progressive Leasing is advertised alongside an item price.

Product Detail Pages (PDPs) & Cart: On PDPs and Cart, limited information may be known about the user. For this reason, Pay Frequency may be provided if known, or else will default to Every 2 weeks. State will only be pre-filled when provided by the merchant.

Checkout: At checkout, customers are often already approved for a Progressive lease. For this reason, all known inputs (Retail Cash Price, State, Pay Frequency) can and should be provided to generate the most accurate lease payment details available to the customer.

  • Pay Frequency is retrieved from lease data on an approved customer and may be one of the following values: 'weekly', 'biWeekly', 'semiMonthly', or 'monthly'. These values are not case sensitive.
  • Retail Cash Price should include the total for only the leasable items in the customer’s cart at the time the payment estimator is generated to display at checkout.

2. Application Option

The application option creates a configuration of our payment estimator snippet that places an "Apply now" button at the bottom of the payment estimator results screen. The “Apply now” button links to the merchant’s Progressive Leasing application, which will open in a new browser tab on desktop or mobile. The payment estimator will remain open in the original tab until the customer closes it.

To implement the application option within the payment estimator, append this string to the end of the URL being used to display the payment estimator:

📘

URL Appendix for the Application Option

&approveMeName=merchantname&approveMeSlugValue=00000

Fill in the bolded values for <approveMeName> and <approveMeSlugValue> with the values provided to you by Progressive Leasing.

🚧

NOTE:

The approveMeSlugValue and your Progressive Store ID are not the same values

For example:

https://progressivelp.com/eComUI/#/apply/est-settings?storeId=12345&itemCost=1000&requestType=pdp&stateCode=UT&payFrequency=biWeekly&approveMeName=merchantname&approveMeSlugValue=00000

The "Apply now" button activates when the customer scrolls to the bottom of their lease-to-own estimate. See example:

268268

3. Keep Window Open Option

The keep window open option creates a configuration of our payment estimator snippet that allows merchants to redirect customers from the end of the payment estimator (provided it is currently being loaded in an iFrame) to the start of the Approve.Me approval flow within the same iFrame.

If a merchant is configured to host the Approve.Me application in an iFrame, clicking the "Apply Now" button on the payment estimator results screen will forward the user to the Approve.Me application while still in the same iFrame.

For merchants that are not configured to use the Approve.Me application in an iFrame, clicking the "Apply Now" button on the payment estimator results screen will still open the Approve.Me application, but in a new browser tab.

To implement the keep window option within the payment estimator, append this string to the end of the URL being used to display the payment estimator:

📘

URL Appendix to Enable the Keep Window Open Option

&keepWindow=True

If you have previously implemented the keep window option but would like to disable it, simply replace that string with this string instead:

📘

URL Appendix to Disable the Keep Window Open Option After Previous Enablement

&keepWindow=False

4. No-Header Payment Estimator for Merchant Containers

When implemented in a merchant container that includes its own exit UI, it may be necessary to use a no-header version of the payment estimator UI to avoid duplicating exit buttons. To do so, use the following modified URL:

📘

URL for No-Header Version of the Payment Estimator UI

https://progressivelp.com/eComUI/#/est-settings?storeId=12345&itemCost=1000&requestType=pdp&stateCode=UT&payFrequency=biWeekly

5. Testing the No-Header Read-Only Payment Estimator Snippet

Use the following demo URL and your store's demo store ID, provided by Progressive:

📘

Demo URL to Test No-Header Read-Only Payment Estimator Snippet

https://demo2.progressivelp.com/eComUI/#/est-settings?storeId=12345&itemCost=1000&requestType=checkout-pdp&stateCode=UT&payFrequency=biWeekly

6. Testing the No-Header Editable Payment Estimator Snippet

Simply replace requestType with pdp instead of checkout-pdp.

📘

Demo URL to Test No-Header Editable Payment Estimator Snippet

https://demo2.progressivelp.com/eComUI/#/est-settings?storeId=12345&itemCost=1000&requestType=pdp&stateCode=UT&payFrequency=biWeekly

The payment estimator will appear without the top X header, the blue section identifier, and the "Your estimate is ready!" title:

268268

7. Editable or Read-Only

Follow these steps to implement the payment estimator snippet at checkout, where it is used as a final lease pricing summary prior to a customer entering a lease signing session. When presented at checkout, the payment estimator should be presented in read-only mode, ensuring that inputs may not be manipulated by the customer.

7.1 Progressive JavaScript Snippet

To utilize the JavaScript Snippet on checkout, the following library must be included:

<script src=”https://progressivelp.com/JSSnippet/ecom-lib.js?storeId=<**storeid**>&pluginType=GA&authName=<**StoreEcomID**>&authPass=<**StoreKey**>”>
  • StoreId, StoreEcomID and StoreKey will be provided to you by Progressive.
  • StoreId: Your Progressive Store ID.
  • StoreEcomID: Your Progressive Store Username.
  • StoreKey: Your Progressive ECOM Store Key.

To display the read-only Payment Estimator link, include the following:

<pg-checkout-pdp placement="**right**" price="**1000**" state-code="**UT**" pay-frequency="**weekly**"></pg-checkout-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.
  • Pay Frequency: 'weekly', ‘biWeekly, ‘semiMonthly’, or 'monthly'. These values are not case sensitive.

7.2 Retail Cash Price at Checkout

Provide Progressive with the leasable item total when passing in Retail Cash Price at checkout. Do not include non-leasable items in the Retail Cash Price.

For retailers using one of Progressive’s eCommerce platform plugins (Magento, Demandware, etc.), utilize the is_Leasable product attribute to send total for leasable items only. Include discounts or any other relevant price modifiers when sending the total to Progressive. This amount should exclude tax, as the payment estimator will display values for lease payments and initial payment excluding tax. Tax is added in the lease agreement prior to customer signing.

7.3 Find Pay Frequency for an Approved Customer | By Lease ID

To retrieve the payment frequency, use the customer’s Lease ID and the below Progressive API call. Note that “Lease ID” is referred to here as “AccountNumber”.

RequestLeaseInformation service call:

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:app="http://progfinance.com/Application"> 
   <soapenv:Header/> 
   <soapenv:Body> 
      <RequestLeaseInformation xmlns="http://progfinance.com/Application"> 
      <request xmlns:i="http://www.w3.org/2001/XMLSchema-instance"> 
        <Authentication> 
          <Username>onlineappuser12345</Username> 
          <Password>merchpassword</Password> 
          <IPAddress i:nil="true" /> 
          <Source i:nil="true" /> 
        </Authentication> 
        <Store> 
          <StoreId>12345</StoreId> 
          <StoreName /> 
          <StoreApplicationIdentifier /> 
        </Store> 
        <AccountNumber>12345678</AccountNumber> 
      </request> 
    </RequestLeaseInformation> 
   </soapenv:Body> 
</soapenv:Envelope>

Sample response (irrelevant fields omitted for brevity):

<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"> 
   <s:Body> 
      <RequestLeaseInformationResponse xmlns="http://progfinance.com/Application"> 
         <RequestLeaseInformationResult xmlns:i="http://www.w3.org/2001/XMLSchema-instance"> 
            <CreateDate>2020-01-23T13:44:00</CreateDate> 
            <AccountNumber>12345678</AccountNumber> 
            <ApprovalLimit>1000</ApprovalLimit> 
…             
            <Frequency>Bi-Weekly</Frequency> 
            <ApprovalReason/> 
            <OkayToDeliver>false</OkayToDeliver> 
                     </RequestLeaseInformationResult> 
      </RequestLeaseInformationResponse> 
   </s:Body> 
</s:Envelope>

Retrieve pay frequency from the response, and supply the pay frequency to . Accepted values: ‘weekly’, ‘biWeekly’, ‘semiMonthly’, ‘monthly’. These values are not case sensitive.

7.4 Testing the Read-Only Payment Estimator Snippet

Use the following demo URL and your store's demo store ID, provided by Progressive:

📘

Demo URL to Test the Read-Only Payment Estimator Snippet

https://demo2.progressivelp.com/eComUI/#/apply/est-settings?storeId=12345&itemCost=1000&requestType=checkout-pdp&stateCode=UT&payFrequency=biWeekly

7.5 Screen Examples

456456

"Lease-to-Own" marketing callout on PDP

456456

Payment estimator snippet inputs screen

456456

Payment estimator snippet results screen (scroll 1) where inputs may be updated

456456

Payment estimator snippet results screen (scroll 2), displaying recurring payment, 12-month lease-to-own summary

456456

Payment estimator snippet results screen (scroll 3), displaying the early purchase option tool and digital hang tag

Demo Video (1:10)


Did this page help you?