Contents

Writing HTML

 

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.

Info
If you customise your site’s Payment Pages, it is your responsibility to ensure your solution remains compliant with relevant schemes.
External
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.fields 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:

 

 

Note: 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.

 

 

 

Info
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}}

Warning
  • 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.

 

 


 

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.

 

External
Certain st.blocks 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:

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}}

Warning
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.

Please also be aware that there are some mandatory blocks for each page.


{{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>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.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.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>

 

Tick
Your progress

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