PayTomorrow Monthly Payment Estimator (MPE)

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

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;
}

|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.

openMpeIframe(): void;

Displays PayTomorrow's iframe.