# JPMC-PDP Documentation from https://developer.payments.jpmorgan.com
# 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.
> 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](https://developer.payments.jpmorgan.com/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:
```
```
**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:
```
```
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")
```
> 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](https://developer.payments.jpmorgan.com/docs/commerce/online-payments/capabilities/checkout/drop-in-ui#announcement-details) about what is occurring inside the DropInUI library.
## Related
[Drop-in UI](/docs/commerce/online-payments/capabilities/checkout/drop-in-ui)
[Drop-in UI event bus announcement details](https://developer.payments.jpmorgan.com/docs/commerce/online-payments/capabilities/checkout/drop-in-ui#announcement-details)