Writing HTML to customise Payment Pages

  Last updated: 


By uploading custom HTML, you have greater control of the content and layout of each page. When writing your HTML code, you will need to make use of in-built fields and blocks in order to display fields on the pages when rendered by Trust Payments.

  If you customise your site’s Payment Pages, it is your responsibility to ensure your solution remains compliant with relevant schemes.

  Click here to view a full list of available fields and blocks in a new tab.
You may find it useful to keep this to hand as you read the rest of this document.



You can include st.field in your HTML to easily display information from the session, and inputs such as text-boxes and drop-down boxes as part of the rendered page. Using CSS and HTML, you can fully customise these elements, and their location on the page.


Field types

The following are examples of the types of fields to be included in your HTML code:



A value is used to display previously-entered info. e.g.

You can use the following reference to track your order: {{st.orderreference .value}}


Text fields

A text field allows the customer to type in new info. e.g.

Please enter your postcode: {{st.billingpostcode.textfield}}



Drop-downs allow customers to select info from a list. e.g.

Country: {{st.billingcountryiso2a.dropdown}}



Certain fields do not support being displayed as text input or drop-downs.
Click here for a full list of fields and their supported implementations.

Pre-fill and validation

The HTML forms outlined in previous sections are automatically pre-filled with information from the session, if it has already been provided. If the customer fails to provide information in all the required fields or enters invalid information, the payment will not continue and the field in question will be highlighted on screen.

All Trust Payments fields are validated. Custom fields cannot be validated by Trust Payments.


  Field errors are only shown to the customer if the relevant input fields are included on the page

e.g. If an invalid email address has been submitted in post, the customer will be unable to correct this on the Payment Pages if this input field has been hidden from view, meaning they will not be able to complete their payment.

Please ensure that all data has been validated to our specification before posting to the Payment Pages, OR that you display the necessary billing / delivery details on the Payment Pages to allow the customer to make changes if necessary.

Custom fields

Custom text input fields and values can be entered in the same way as the built-in fields outlined previously. e.g.

Enter your Membership Id: {{st.memberid.textfield}}
This is your Membership Id: {{st.memberid.value}}
  • The st.field functionality does not support drop-downs for custom fields.
  • Trust Payments cannot validate custom fields.
Notifications and redirects

The majority of fields used in a Payment Pages session, including custom fields, can be posted to your website as part of a redirect or as part of a URL notification.



An st.block is a reference you can include in your HTML to display grouped page elements when the page is rendered, instead of defining each element individually. Blocks are written as follows (including curly brackets): {{st.block.blockname}}

e.g. When passing the reference {{st.block.paymentdetailsdiv}} on the payment details page, Trust Payments will display the payment fields when rendering the page.


  Certain st.block are required on uploaded HTML files.
Click here to open the full list of available blocks in a new tab.


Body class

Trust Payments recommends specifying {{st.bodyclass.value}} in the class attribute of the body tag on all pages, to ensure shortcuts appear with the correct styling in the following situations:

  • If you are planning on using Trust Payments CSS with modifications.
  • If you are planning on uploading CSS that applies different styling depending on the page being rendered.

For example: <body class=”{{st.bodyclass.value}}”>



Include {{stresource.<filename>}} in your HTML to reference images uploaded to your account using the MyST File Manager.

e.g. {{stresource.companylogo.gif}}

  We recommend that you only reference images stored in the MyST File Manager and not an external source, otherwise the customer’s browser may show a warning that the page isn’t secure.



The following are examples of customised pages using the ST blocks. Please feel free to use these templates to help build your own pages, using the block and field reference as a guide.

  Be aware that there are some mandatory blocks for each page, as described in this reference. As part of these requirements, please ensure that the blocks specified in <head> are in the same order as shown in the examples below.

choice.html details.html 3dredirect.html response.html locked.html
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
<div class="st-content">
<h2>Order details</h2>
<h2>Payment choice</h2>

Once you have written your mark-up and uploaded the files, you can enable your changes. Click here to continue.

Was this article helpful?
0 out of 0 found this helpful