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.
Fields
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.
The following are examples of the types of fields to be included in your HTML code:
Values
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
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.
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 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.
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.
Blocks
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}}”>
Images
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.
Examples
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.
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Payment choice</h2>
{{st.block.standardpaymentchoicesdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Change payment type</h2>
{{st.block.smallpaymentchoicesdiv}}
<form name="paymentsdetails" id="paymentsdetails" method="post" action="details">
{{st.block.hiddendiv}}
<h2>Billing details</h2>
{{st.block.billingdetailsdiv}}
<h2>Delivery details</h2>
{{st.block.deliverydetailsdiv}}
<h2>Payment details</h2>
{{st.block.paymentdetailsdiv}}
{{st.block.requirednoticediv}}
</form>
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.requiredjs}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.hiddendiv}}
{{st.block.orderdetailsdiv}}
<h2>3-D Secure Process</h2>
{{st.block.3dredirectdiv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
<h2>Order details</h2>
{{st.block.orderdetailsdiv}}
<h2>Transaction response</h2>
{{st.block.transactionresponsediv}}
<h2>Billing details</h2>
{{st.block.billingresponsediv}}
<h2>Delivery details</h2>
{{st.block.deliveryresponsediv}}
</div>
{{st.block.footer}}
</body>
</html>
{{st.block.doctype}}
<html>
<head>
{{st.block.metatags}}
{{st.block.defaultcss}}
{{st.block.profilecss}}
{{st.block.defaultjs}}
{{st.block.profilejs}}
</head>
<body class="{{st.bodyclass.value}} st-inputs-style st-blocks-style">
{{st.block.header}}
<div class="st-content">
{{st.block.messagesdiv}}
{{st.block.lockeddiv}}
</div>
{{st.block.footer}}
</body>
</html>
Once you have written your mark-up and uploaded the files, you can enable your changes. Click here to continue.
