Developer Documents

A customer notice allows you to define some extra content to display to the customer while collecting payment details via a Hosted payment page. This can be used to convey additional information such as advisory or instructional text, compliance notices and so on.

Content may be varied on a per-session basis, and supports a limited subset of HTML.

Defining a customer notice

Include a customerNotice as part of the Hosted session initialisation request (see Hosted payments API):

Supported HTML

Content may include the following HTML elements: <p>, <br>, <em>, <strong>, <ul>, <ol>, <li>, <div> and <span>.

In addition, <div> and <span> elements may include a class attribute to enable targeted selection with CSS.

Malformed or unsupported HTML will be rejected with an error.

Display locations

• FORM_TOP: Displays the notice above the form
• FORM_BOTTOM: Displays the notice below the form
• FORM_AFTER: Displays the notice after all form components – including the submit/cancel buttons – but above the footer

FORM_TOP	FORM_BOTTOM	FORM_AFTER

Example

POST /hosted/rest/sessions/{instId}/payments
{
    "transaction": {
        "money": {
            "currency": "GBP",
            "amount": {
                "fixed": "12.99"
            }
        }
    },
    "session": {
        "returnUrl": {
            "url": "https://www.example.com"
        }
    },
    "customerNotice": {
        "content": "This is a customer notice located at FORM_TOP",
        "locator": "FORM_TOP"
    }
}

Styling with CSS

You can use a custom skin to style the customer notice and/or its content. To support this, we provide the following CSS classes:

• customer-notice: This class can be used to style the notice regardless of its position on the page
• customer-notice-form-(top|after|bottom): Use these specific classes to style the notice based on its position
  • customer-notice-form-top: Styles the notice when it appears at the top of the form
  • customer-notice-form-after: Styles the notice when it appears after the form but above the footer
  • customer-notice-form-bottom: Styles the notice when it appears at the bottom of the form

For instance:

<div class="customer-notice customer-notice-form-top">
   This is a customer notice located at FORM_TOP
</div>

Refer to Skin CSS for more information, including an overview showing how the customer notice is included relative to other key elements of the page.