Cookie Consent by Free Privacy Policy Generator Update cookies preferences
GuidesAPI Reference

Implementation

How to implement on-site messaging

Messaging Installation

On-site messaging adds the pay-over-time messages to your store’s website. For example, in the picture below the messaging is:

Or 4 interest-free payments of £25.00 with Clearpay ⓘ

Updates to the messaging are automatic for compliance and messaging optimization. Use the WYSIWYG tool to customize and manage your messaging.

Requirements

To use this On-site messaging feature you must:

  • Be an existing Clearpay merchant

  • Have a direct integration with Clearpay

  • Have at least one retail website live and ready for use, although a Sandbox environment is available for testing without a retail website

📘

Note

If you already have Clearpay Messaging through the Dynamic Widget or the JavaScript library, we recommend you replace this with On-Site messaging instead. See the Migration page for details.

Sandbox Test Environment

We recommend that you use the Sandbox On-Site Messaging portal to review the Clearpay messaging on your store before you go live.

To test, you will need access to the Sandbox Portal and a set of Sandbox credentials. Click the links below for these:

The suggested tests are:

  • Run through the Clearpay payment flow. Check how your messaging appears at various points in the customer journey. For example, the product page and the shopping cart

  • Check that you meet Clearpay's technical and compliance requirements before you deploy live

  • Experiment with different customisations so you can choose the best option for messaging on your store and products. Remember to keep within Clearpay guidelines

Sandbox On-Site Messaging - Quickstart Guide

  1. From the Sandbox On-Site Messaging Portal go to the Placements page. See picture below:

  1. Select the Product page or the Cart page to customise your messaging from the options available.

  2. Click the Implementation guide tab and follow the instructions there to set up messaging. See picture below:

  1. Check the product page and cart page to see what your messaging looks like. From the Placements page, you can make adjustments to the logo, text size and theme.
  2. Visit the Settings page to review and configure overall messaging settings. These could include changes to your wording, or how messaging appears on products and orders that are unavailable through Clearpay. See pictures below:
  1. When you are satisfied with your testing, you're ready to go to the live Clearpay Messaging website. From here you can configure Clearpay messaging for the live system. The information on the rest of this page helps you do that.

Add the Messaging Widget to your website

These instructions assume that you are installing messaging for the first time on a production (live) site. Your system does not already feature messaging. If you already have messaging, go to the Migration page and follow the instructions there.

To add messaging for the first time:

  1. Go to the Clearpay Messaging website and log-in with your Merchant ID (MID) and Secret Key.

  1. Open the Implementation Guide and follow the instructions.

  2. Put the script tag in the head section of the codebase. See the Step 1 - Add script tag to head section in the screenshot below step 4.

  3. Configure the code snippets for the Product page and the Cart page snippets. See the Step 2 - Product page and Step 3 Cart page in the screenshot below.

  1. To display installment messaging, add the <square-placement> tag to the product page HTML files. Place the messaging immediately below the price element of the product.

  2. Set the data-amount with the amount that appears on the page to calculate the installments. Keep the data-mpid and data-placement-id attributes in place with their current values unchanged.

  3. Set the data-currency to the customer’s currency and data-consumer-locale to the customer’s country.

  4. Set data-item-skus to any unique product identifier you use, provided as a string. If you have multiple products in the cart, separate them with a comma.

  5. Set data-item-categories as one or more category names for the relevant product. This is provided as a string or for multiple categories, separate them with a comma.

  6. To restrict a product from sale with Clearpay, set the data-is-eligible attribute to false. To restrict a cart from sale with Clearpay, set the data-cart-is-eligible attribute to false. This is optional.

Customizing Messaging

You can customize the messaging so it fits your products and your web page design. To do this on a production (live) site:

  1. Go to the Clearpay Messaging website website and log-in with your Merchant ID (MID) and Secret Key.
  2. On the home page, select the Product page or the Cart page placement card.

  • Make configuration changes to the Product page and the Cart page in their placement cards on the homepage. More advanced configurations are under Settings.

  • The tool is WYSIWYG, so the preview accurately shows the effect of any changes you make.

  • You can customize multiple pages. When you are finished, click Save all changes. Your changes are updated automatically on your website (there could be up to 5 minutes of delay), provided that the code has been implemented.

Updated 24 days ago