GuidesAPI Reference

Migration

Update to the latest version of on-site messaging.

Migration 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 with most of the migration work, although we cannot do everything

Self Migration

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

Light customizations

If you have light customizations of only the Clearpay JavaScript attributes, do the following:

  1. Find the <afterpay-placement> element you currently have and copy that. This so you have the list of config changes you have made.

For example:

<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"

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

  2. Find and remove any/all instances of the elements below from the code:

  • afterpay-placement

  • Afterpay.createPlacements

  • new Afterpay.AfterpayPlacement()

  • Afterpay.launchModal

  • afterpay-price-table

  1. Follow the instructions To Add the Messaging Widget to your Website in the Implementation page to add the new script and configure new placements.

  2. Make the attribute changes in step 1 in the editor UI and click Save all changes.

Heavy Customizations

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

  1. Change the script src from https://js.afterpay.com/afterpay-1.x.js to https://js.squarecdn.com/square-marketplace.js.

  2. Find the <afterpay-placement> element you currently have and copy that. This so you have the list of config changes you have made. Do not make any changes to this <afterpay-placement> information for now.

For example, the config could include:

  • data-show-upper-limit="false"

  • data-size="xs"

  • data-logo-type="lockup"

  • data-lockup-theme="black"

  1. Follow the instructions to Install On-Site Messaging in the Implementation page to log into the messaging tool with your MID and Secret Key.

  2. Go to the Implementation Guide page in the tool, find the <data-mpid> and <data-placement-id> for each placement (both Product and Cart).

  3. Go to your codebase, add your MPID to each placement as a data-mpid attribute.

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

  5. Return to the messaging tool and make attribute changes from Step 2, if needed. Click Save all changes.

Migration from the Dynamic Widget to On-Site Messaging

The widget is no longer promoted by Clearpay but still works as designed. Soon the widget will no longer be supported, so it is best to switch to On-Site Messaging. If you already have an agreement to use the widget to run campaigns, 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>

  1. Remove the previous code:

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

  1. Follow the instructions for Messaging installation

Updated about 1 month ago