GuidesAPI Reference

Pay Monthly enhanced JavaScript library features

USA merchants only

If you are a US merchant and have a direct integration to Afterpay, you can access some enhanced features for Pay Monthly.

Merchants who have consumer lending (Pay Monthly) enabled can use the existing widget to display specific messaging on the Product Detail Page (PDP) and shopping cart.

📘

What is Pay Monthly?

Pay Monthly is a monthly payment product that is a long-term, instalment-based lending option. It gives your customers more flexible ways to pay for high-value orders greater than $400.

How does Pay Monthly work in practice? Messaging appears when the cart or item price is greater than or equal to $400. It is displayed up to the data-max value that is returned. See the screenshots below:

306

Your customer clicks the afterpay button on the shopping cart message.

604

Two monthly payment options appear to the customer, who can select the option they want.

There are two ways to add this attribute:

  • Afterpay placement: This way is applicable to most merchants

  • JavaScript create placement: This has more capabilities to dynamically create placements, and similar

These ways are described below.

Afterpay placement

If you already use the JavaScript Library's <afterpay-placement> element, do the following:

  1. Add the data-apr-loans-available="true" attribute.
  2. Add the data-max="4000" attribute. The default maximum value for Pay Monthly is $4000. If your Merchant Account configuration is set to offer customers a different maximum value, you can update this value.

A full code example, Webcomponent.html, is below. The data-max and data-apr-loans-available attributes are below the data-amount attribute. The data-max value is set to 4000 and the data-apr-loans-available is set to true. 

<!doctype html>
<html>
 <head>
   <script
    src="https://js.afterpay.com/afterpay-1.x.js"
    async
   ></script>
 </head>
 <body>
  <afterpay-placement 
        data-locale="en_US"
        data-currency="USD" 
        data-show-upper-limit="true"
        data-amount="2200"
        data-max="4000"
        data-apr-loans-available="true"
  ></afterpay-placement>
 </body>
</html>

JavaScript create placement

Do the following:

  1. Check that you use the JavaScript library's Afterpay.createPlacements method. If you do, continue to step 2.

  2. Find the attributes object and then add aprLoansAvailable:"true".

  3. Find the attributes object and then add max:"4000". The default maximum value for Pay Monthly is $4000. If your Merchant Account configuration is set to offer customers a different maximum value, you can update this value.

A full code example, Webcomponent.js is below. The max and aprLoansAvailable attributes are below the amount attribute, and are set to 4000 and true.

<!doctype html>
<html>
 <head>
   <script src="https://js.afterpay.com/afterpay-1.x.js" async onload="createMessaging()"></script>
   <script>
     function createMessaging () {
       Afterpay.createPlacements({
         targetSelector: "#afterpay-messaging-widget",
         attributes: {
           locale: "en_US",
           currency: "USD",
           amount: "2200",
           max:"4000",
           aprLoansAvailable: "true"
         }
       });
     }
   </script>
 </head>
 <body>
   <div id="afterpay-messaging-widget"></div>
 </body>
</html>

Updated 19 days ago