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.