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/

NPM Setup

Installation

Via npm:

npm install @paytomorrow/pt-mpe

Usage

Import the module:

import { mpeInit } from "@paytomorrow/pt-mpe";
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"
})

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;
}
NameTypeDefaultDescription
debugMode{boolean}falseDisplay PayTomorrow's MPE console logs for debugging errors.
enableMoreInfoLink{boolean}trueDisplay 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}5000Max price limit at which the MPE appears.
maxTerm{number}24Max financing term available on your PayTomorrow account.
minAmount{number}500Min 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}falseDisplay Micro offers on purchases bellow the maxMicroAmount threshold.
displayPrimeOffers{boolean}falseDisplay Prime offers for the maxTerm selected and the primeApr.
maxMicroAmount{number}500Maximum amount for a micro loan offer.
primeApr{number}0The 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.

Edit this page