Monthly Price Estimator (MPE)

Try MPE demo here http://mpe-demo.paytomorrow.com

Checkout the source code here https://bitbucket.org/paytomorrow/mpe-plugin/src/master/

HTML tag setup

Installation

Copy and paste this on your website:

<!-- Paste in head tag  -->
<link href="https://cdn.paytomorrow.com/css/pt-mpe.min.css" rel="stylesheet">

<!-- Paste in body tag  -->
<script type="text/javascript" src="https://cdn.paytomorrow.com/js/pt-mpe.min.js"></script>

Usage

<script>
    PayTomorrow.mpeInit({
        debugMode: false,
        enableMoreInfoLink: true,
        logoColor: "original",
        maxAmount: 5000,
        maxTerm: 24,
        minAmount: 500,
        mpeSelector: ".mpe",
        priceSelector: ".mpe-price",
        storeDisplayName: "Your Store Name",
        publicId: "YOUR_PUBLIC_ID"
    })
</script>

PayTomorrow MPE API

Public Methods

mpeInit(opt: MpeOptions): void;

Appends PayTomorrow's estimated monthly price to the desired CSS selector and adds an iframe that will be displayed when a user clicks on the monthly price.

NOTE: Use this method if you don't need custom UI for displaying the monthly price.

MpeOptions

interface MpeOptions {
  debugMode: boolean;
  enableMoreInfoLink: boolean;
  logoColor: "white" | "black" | "original";
  maxAmount: number;
  maxTerm: number;
  minAmount: number;
  mpeSelector: string;
  priceSelector: string;
  storeDisplayName: string;
  publicId: string;
  displayMicroOffers: boolean;
  displayPrimeOffers: boolean;
  maxMicroAmount: number;
  primeApr: number;
}

Name	Type	Default	Description
debugMode	{boolean}	false	Display PayTomorrow's MPE console logs for debugging errors.
enableMoreInfoLink	{boolean}	true	Display a link under the MPE for opening the MPE popup.
logoColor	{'white' or 'black' or 'original'}	'original'	PayTomorrow's logo color on the MPE.
maxAmount	{number}	5000	Max price limit at which the MPE appears.
maxTerm	{number}	24	Max financing term available on your PayTomorrow account.
minAmount	{number}	500	Min price limit at which the MPE appears.
mpeSelector	{string}	'.mpe'	CSS selector for the element in which the MPE will be added.
priceSelector	{string}	'.mpe-price'	CSS selector for scanning product prices.
storeDisplayName	{string}	'Your Favorite Merchant'	The store name you want us to display in the popup.
publicId	{string}	''	Your publicId provided by PayTomorrow (check your Resources tab on the Dashboard).
displayMicroOffers	{boolean}	false	Display Micro offers on purchases bellow the maxMicroAmount threshold.
displayPrimeOffers	{boolean}	false	Display Prime offers for the maxTerm selected and the primeApr.
maxMicroAmount	{number}	500	Maximum amount for a micro loan offer.
primeApr	{number}	0	The apr used by the prime offers.

getMonthlyPayment(amount: number, term: number, options?: MpeOptions): number;

Returns the estimated monthly price for the amount and finance term. The options parameter is optional.

addPayTomorrowIframe(storeDisplayName?: string, publicId?: string, channel?: string): void;

Appends PayTomorrow's iframe to the bottom of your page and is hidden by default. This method is only needed if you want to display the MPE popup from a custom page and event.

openMpeIframe(): void;

Displays PayTomorrow's iframe.