Skip to main content

Set up a drop-in UI

The drop-in UI JavaScript library contains lines of code for rendering the checkout UI on a webpage. Using the library saves time and eases your programming workload, making your page load faster.

Note

You can import and test the drop-in UI JavaScript library only after gaining access to the client testing environment. For more information about becoming a client, contact sales.

Set up the Drop-in UI JavaScript library by performing the following steps.

Step 1: Import the library

Import the Drop-In UI JavaScript library by adding the following to your checkout page:

Plaintext
<html>
   <body>
       <script type="module" src="https://checkout-cat.merchant.jpmorgan.com/drop-in-ui.mjs"></script>
       <!--Existing website-->
   </body>
</html>

Production JavaScript library URL: https://checkout.merchant.jpmorgan.com/drop-in-ui.mjs

Step 2: Verify the package

Run the following command in your browser’s console to verify that the package has loaded correctly:

console.log(DropInUI.VERSION).

If the script file has loaded properly, the current version and build reference should be visible in your console (for example, v1.2.3-ABC123).

Step 3: Render the Checkout form

To render the Checkout form, you must first establish a container for the drop-In UI. Create a div element on the page where you want to render the form:

<div id="location-to-render"/>

Assign a unique ID to the div element so it can be targeted by the Drop-In UI JavaScript library.

With the checkout session token, use the Drop-in UI to initialize your form.

Javascript
// set up your drop in UI
const myDropInUI = new DropInUI({
checkoutSessionToken: "exampleCh3ck0utT0k3n",
});

// add the checkout form on the page by targeting the id of the element you want it to target
myDropInUI.mount("location-to-render")
Tip

An optional subscriber can be registered to manage SUCCESS and ERROR statuses using the Drop-in UI Event bus.

The following example shows how you can trigger displaying a successful order page:

Javascript
const handlePublishedMessage = (pubMsg) => {
    if (pubMsg.namespace === "payment" && pubMsg.level === "info") {
      if (pubMsg.message === "PaymentSuccess") {
         handlePaymentSuccess(pubMsg);
       }
    if (pubMsg.message === "PaymentUnsuccessful") {
        handlePaymentFailure(pubMsg);
      }
    }
    if (pubMsg.namespace ==="payment" && pubMsg.level === "error") {
    handlePaymentFailure(pubMsg);
   }
};

// set up your drop in UI
const myDropInUI = new DropInUI({
    checkoutSessionToken: "exampleCh3ck0utT0k3n",
});

// add the checkout form on the page by targeting the ID of the element you want
myDropInUI.mount("location-to-render")
myDropInUI.subscribe(handlePublishedMessage)

Use the Drop-in UI event bus to access announcements about what is occurring inside the DropInUI library.

Drop-in UI