> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.clearpay.co.uk/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.clearpay.co.uk/_mcp/server.

# Migration

We support two messaging products:

* On-Site Messaging is our latest messaging product
* JavaScript Library V1 is our legacy messaging product

We recommend that you update to the On-Site Messaging product. Follow this guide to learn how.

## Migrate from the JavaScript Library V1 to On-Site Messaging

You have two migration choices:

* Self-migration: Your IT team does the migration

* Assisted migration: Clearpay helps you do some parts of the migration

## Self-migration

You do this migration alone, without any assistance from Clearpay.

### Light customizations

If you've made minor customizations to only the Clearpay JavaScript attributes, do the following:

1. Find the `<afterpay-placement>` element you currently have. Copy it and paste it somewhere you can refer back to. This gives you a list of configuration changes you've made.

For example, in:

```javascript
<afterpay-placement data-is-eligible="true" data-locale="en_GB" data-currency="GBP" data-amount="59" data-show-upper-limit="false" data-size="xs" data-logo-type="lockup" data-lockup-theme="black"></afterpay-placement>t>
```

The configuration changes could include:

* `data-show-upper-limit="false"`

* `data-size="xs"`

* `data-logo-type="lockup"`

* `data-lockup-theme="black"`

2. Delete the old script: `<script src="https://js.afterpay.com/afterpay-1.x.js" async></script>`

3. Find and remove all instances of the elements below from the code:

* `afterpay-placement`

* `Afterpay.createPlacements`

* `new Afterpay.AfterpayPlacement()`

* `Afterpay.launchModal`

* `afterpay-price-table`

4. Follow the instructions to [add On-Site Messaging to your website](/messaging-implementation).

5. Make attribute changes if needed. Click **Save all changes**.

### Major customizations

If you made larger customizations to the custom Cascading Style Sheet (CSS) and the JavaScript, do the following:

1. Log in to the Business Hub to install On-Site Messaging.

2. Follow the steps in the [Implementation guide](/messaging-implementation).

3. Go to the Implementation Guide page and find the `<data-mpid>` and `<data-placement-id>` for each placement (both Product and Cart).

4. Go to your codebase and add your MPID to each placement as a `data-mpid` attribute.

5. Add your placement IDs to each placement as `data-placement-id` attributes.

6. Return to the messaging tool and make attribute changes if needed. Click **Save all changes**.

### Migrate from the dynamic widget to On-Site Messaging

The widget isn't actively supported by Clearpay; we strongly recommend migrating to On-Site Messaging. If you already have an agreement to use the widget, you can wait until this agreement expires.

To remove the widget:

1. Find the previous code and note the inline customisations that have been made.

2. Remove script from head section:

`<script src="https://portal.afterpay.com/afterpay.js" async onload="createMessaging()"></script>`

3. Remove the previous code:

`<div id="afterpay-messaging-widget"></div>`

4. Follow the On-Site Messaging implementation instructions.