Monthly Payment Estimator | PayTomorrow Developers

Preview financing messages in staging and copy installation code for your store.

The Monthly Payment Estimator (MPE) reads prices on your page and shows an estimated monthly payment next to them. Clicking it opens a PayTomorrow popup that explains financing to the customer.

Try it

The preview always loads the real staging MPE script with a demo account. Configure the message, then choose Production or Staging for your installation code and enter your own Public ID. Your ID is never sent to the demo. Click Learn More in the preview to open the staging financing popup.

Build your payment message

Try the staging demo, then copy installation code for your own store.

Store name

Maximum termLogo colorMinimum priceMaximum price

Prime offersShow 0% APR badgeShow Learn More link

PrefixLink text

Staging preview

Loading staging demo…

Uses a demo account. Your Public ID is only added to the code below.

Product price

The demo account may allow different terms and amounts from your account. Confirm the result with your own Public ID before going live.

Your installation code

Installation environmentProductionStaging

Your Public ID

Add your Public ID before installing. The demo account is never included in your code.

Keep the script once per page. Add a price and an empty estimate element for each product; replace the sample price below.

<!-- Add to the page head --><link href="https://cdn.paytomorrow.com/css/pt-mpe.min.css" rel="stylesheet" /><!-- Add beside each product price --><span class="product-price">$1,149.97</span><div class="mpe"></div><!-- Add once before the closing body tag --><script src="https://cdn.paytomorrow.com/js/pt-mpe.min.js"></script><script>  PayTomorrow.mpeInit({  "publicId": "YOUR_PUBLIC_ID",  "storeDisplayName": "Your store",  "priceSelector": ".product-price",  "mpeSelector": ".mpe",  "minAmount": 500,  "maxAmount": 5000,  "maxTerm": 24,  "displayPrimeOffers": false,  "primeApr": 5.99,  "primeHasZero": false,  "logoColor": "original",  "prefixString": "As low as",  "postfixString": "Learn More",  "enableMoreInfoLink": true});</script>

Install

Add the stylesheet to <head> and the script before </body>, then call mpeInit:

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

<script src="https://cdn.paytomorrow.com/js/pt-mpe.min.js"></script>
<script>
  PayTomorrow.mpeInit({
    publicId: 'YOUR_PUBLIC_ID',
    storeDisplayName: 'Your Store Name',
    priceSelector: '.product-price',
    mpeSelector: '.mpe',
  });
</script>

Your Public ID is under Resources in the merchant dashboard. It's safe to put in browser code.

The MPE stays hidden without a real Public ID

If publicId is empty or still contains the word "your", mpeInit does nothing. Replace the placeholder before you test.

Staging

Staging uses a separate build of the script. It points the popup and account lookups at staging:

<link href="https://cdn-staging.paytomorrow.com/css/pt-mpe.min.css" rel="stylesheet" />
<script src="https://cdn-staging.paytomorrow.com/js/pt-mpe.min.js"></script>

Use your staging Public ID with it. Switch both URLs and the ID when you go live.

Where the estimate appears

The MPE finds every element matching priceSelector and reads the number in it. For each price that is greater than minAmount and less than maxAmount:

If you set mpeSelector, the estimate replaces the content of the matching element at the same position. The first price goes into the first mpeSelector element, the second into the second, and so on.
If you set appendSelector, a container is inserted right after each matching element.
If you set neither, the estimate is appended inside the price element.

For price ranges like $899 - $1,199, set priceDelimiter: '-' and the MPE uses the lower price.

Your account settings win when they're more generous

When the page loads, the MPE fetches the settings saved on your merchant account and combines them with the options you pass:

Option	Result
`maxTerm`	The longer of the two
`maxAmount`	The higher of the two
`minAmount`	The lower of the two
`primeApr`	The lower of the two
`displayPrimeOffers`, `primeHasZero`	On if either is on

So if the preview shows a longer term or a lower APR than you set, your account allows it. Ask your account manager to change the account values.

Options

Prop

Type

Methods

The script adds a global PayTomorrow object.

`mpeInit(options)`

Loads your account settings, finds prices, and renders estimates. Use this unless you're building your own UI.

`getMonthlyPayment(amount, term, options?)`

Returns the estimated monthly payment as a number, using the same math as mpeInit. Use it to render the estimate in your own markup.

const monthly = PayTomorrow.getMonthlyPayment(1199, 24, { displayPrimeOffers: true, primeApr: 9.99 });
document.querySelector('#monthly').textContent = `As low as ${monthly.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}/mo`;

getMonthlyPayment doesn't know your account settings, so pass the same options you would give mpeInit.

`addPayTomorrowIframe(storeDisplayName, publicId, channel?, enablePreApproval?)`

Adds the hidden popup to the page. mpeInit does this for you when enableMoreInfoLink is on. Call it yourself only if you turned the link off and want your own button.

`openMpeIframe()` and `openFaqIframe()`

Open the popup on its main page or its FAQ page.

<button type="button" onclick="PayTomorrow.openMpeIframe()">See financing options</button>

Using a platform plugin?

Shopify, Magento 2, and BigCommerce have MPE settings in the plugin, so you don't need to add the script by hand.