This page outlines how to make basic changes to the layout of your Payment Pages to better reflect your brand identity.
Getting started
To customise the layout of your Payment Pages, you will need to make use of stprofile. We provide a number of default profiles that are ready to use. They are responsive and suit most use-cases without modification. To apply these changes, you will need to either:
- Modify your request to Trust Payments to include an extra field (we provide examples below), OR;
- Contact our Support Team to assign a specific default profile that will be applied to all of your Payment Pages sessions.
You can submit a customer’s billing details in the post to Payment Pages and apply one of our default stprofile options to hide unnecessary address and contact fields from the form on the Payment Pages.
We strongly recommend that you ensure all of your transactions have a billing address, as these details are used in AVS checks to help prevent attempts at fraud.
The standard layout for a default stprofile is to first display the billing and delivery address fields.
This is followed by fields for the customer to enter their payment credentials. These fields are dependent on the payment method selected by the customer, so a card payment such as Visa Debit would require the customer to enter their card number, but a bank transfer method may instead prompt the customer for their bank account number.
Ensure the following is included in your POST to Payment Pages:
<input type="hidden" name="stprofile" value="default">
If you would like to display a live preview of the customer’s card, beneath the form where the customer enters their address details, include the following in your POST to Payment Pages:
<input type="hidden" name="stprofile" value="default">
<input type="hidden" name="stdefaultprofile" value="st_paymentcard">
If including the above in your POST, the value of the field stdefaultprofile needs to be included in the correct position within the string used to generate your request site security hash. Failure to do so will result in the customer being shown an “Invalid details” error message. Click here for further information on site security, and the default order of fields in the string.
If you would like to hide the address fields and display a live preview of the customer’s card, include the following in your POST to Payment Pages:
<input type="hidden" name="stprofile" value="default">
<input type="hidden" name="stdefaultprofile" value="st_paymentcardonly">
If including the above in your POST, the value of the field stdefaultprofile needs to be included in the correct position within the string used to generate your request site security hash. Failure to do so will result in the customer being shown an “Invalid details” error message. Click here for further information on site security, and the default order of fields in the string.
If you would like to hide the address fields and only prompt for the payment details, include the following in your POST to Payment Pages:
<input type="hidden" name="stprofile" value="default">
<input type="hidden" name="stdefaultprofile" value="st_cardonly">
If including the above in your POST, the value of the field stdefaultprofile needs to be included in the correct position within the string used to generate your request site security hash. Failure to do so will result in the customer being shown an “Invalid details” error message. Click here for further information on site security, and the default order of fields in the string.
If you would like to hide the address fields and image of the card, and only prompt for the payment details, include the following in your POST to Payment Pages:
<input type="hidden" name="stprofile" value="default">
<input type="hidden" name="stdefaultprofile" value="st_iframe_cardonly">
If including the above in your POST, the value of the field stdefaultprofile needs to be included in the correct position within the string used to generate your request site security hash. Failure to do so will result in the customer being shown an “Invalid details” error message. Click here for further information on site security, and the default order of fields in the string.
You can define custom profiles and perform advanced customisation using your own mark-up.
Click here to learn more.
