We support two messaging products:
We recommend that you update to the On-Site Messaging product. Follow this guide to learn how.
You have two migration choices:
Self-migration: Your IT team does the migration
Assisted migration: Afterpay helps you do some parts of the migration
Depending on how customized your implementation is, follow one of these two paths.
If you’ve made minor customizations to the Afterpay JavaScript attributes, do the following:
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:
<afterpay-placement data-is-eligible="true" data-locale="en_US" data-currency="USD" data-amount="59" data-show-upper-limit="false" data-size="xs" data-logo-type="lockup" data-lockup-theme="black"></afterpay-placement>
The configuration changes could include:
data-show-upper-limit="false"data-size="xs"data-logo-type="lockup"data-lockup-theme="black"Delete the old script: <script src="https://js.afterpay.com/afterpay-1.x.js" async></script>
Find and remove all instances of the elements below from the code:
afterpay-placement
Afterpay.createPlacements
new Afterpay.AfterpayPlacement()
Afterpay.launchModal
afterpay-price-table
Follow the instructions to add On-Site Messaging to your website.
Make attribute changes if needed. Click Save all changes.
If you’ve made larger customizations to the custom Cascading Style Sheet (CSS) and the JavaScript, do the following:
Log in to the Business Hub to install On-Site Messaging.
Follow the steps in the Implementation guide.
Go to the Implementation Guide page and find the <data-mpid> and <data-placement-id> for each placement (both Product and Cart).
Go to your codebase, add your MPID to each placement as a data-mpid attribute.
Add your placement IDs to each placement as data-placement-id attributes.
Return to the messaging tool and make attribute changes if needed. Click Save all changes.
The widget isn’t actively supported by Afterpay; 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:
Find the previous code and note the inline customisations that have been made.
Remove script from head section:
<script src="https://portal.afterpay.com/afterpay.js" async onload="createMessaging()"></script>
Remove the previous code:
<div id="afterpay-messaging-widget"></div>
Follow the On-Site Messaging implementation instructions.