@paytomorrow/pt-mpe
TypeScript icon, indicating that this package has built-in type declarations

1.4.2 • Public • Published

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.

/@paytomorrow/pt-mpe/

    Package Sidebar

    Install

    npm i @paytomorrow/pt-mpe

    Weekly Downloads

    1

    Version

    1.4.2

    License

    ISC

    Unpacked Size

    41.4 kB

    Total Files

    26

    Last publish

    Collaborators

    • abenti
    • ddomingo
    • ededdah