![]() |
The Form and Server systems allow you to customise not only the look and feel of the payment pages presented to your customers, but also the design of the completion e-mails, error pages and 3D-secure frame pages.
The templates are XSLT version 2 code, with no customised tags or non-standard additions. You can find a wealth of help on XSLT on the Internet and in numerous paper publications. Your web developers will be able to help you if you are unfamiliar with XSLT. If you do not have a Web Developer, Sage Pay have a number of partners in your area that will be able to help (please refer to our partners list at (http://www.sagepay.co.uk/partners-and-developers/partner-directory)
This kit not only provides the Sage Pay Default XSLT templates, the XML to populate them, and all images used on our pages, but also provides everything you need to render the XSLT templates into HTML pages during testing (using the freeware versions of Saxon (http://saxon.sourceforge.net/) and Kernow (http://sourceforge.net/projects/kernowforsaxon/)).
XML is provided for protocol 4.00.XML.
All you need to use the renderers is the Java runtime version 1.4 or higher. The latest Java runtimes can be found at http://java.sun.com/
Once you've installed the Java runtime, you're ready to go.
To render a template, follow these simple steps:
It's a simple as that. When you are changing the XSLT pages, any mistakes you make in the XSLT or XHTML code will be reported in the bottom window of the Kernow page when you click Run. The line number and position are displayed with each error, so it's very easy to debug your code.
The following templates are included in this kit:
To edit the templates, simply open the XSLT file in your preferred editor and change the layout at your leisure. We use DreamWeaver at Sage Pay, but many XSLT editors are available on the net (including freeware editors).
Address Read-Only and No Address Templates
The default templates within this pack offer address fields which can be edited by the shopper while they are on the payment page. Should you wish to restrict this, you also have the option of setting the address to read-only or even show no address on the payment page at all.
Card_Details.xslt and Card_Details_Low.xslt files are provided for read-only and no address payment pages within the XSLT_AddReadOnly and XSLT_NoAddress directories respectively. The default XSLT directory contains the default files with address fields which can be modified by the shopper. If you wish to use address read-only templates or templates with no address simply copy the relevant files from the XSLT_AddReadOnly or XSLT_NoAddress directory and paste into the XSLT directory.
Note: Please ensure only one copy of the Card_Details.xslt and Card_Details_Low.xslt files are returned to the customer service team to ensure there is no confusion over which templates you wish to have uploaded.
Low Profile Templates
Low profile templates are designed to run inside I-frames and present full screen HTML pages with no pop-ups, no positional data and minimal graphics.
To display these templates you need to pass a PROFILE=LOW name/value pair in your Server transaction registration. Please see 'Appendix A1:Transaction registration' of the 'Server Protocol and Integration Guidelines' document which can be downloaded from http://www.sagepay.co.uk/support/integration-kits-protocols-document
Please note: Low profile templates are optional. You are not required to provide versions of these templates if you are not using low profile functionality.
Images and linked files
The images you can change are all included in the CustomTemplates/images/YourImages folder. Place any additional images or pop-ups in that folder, or subfolders thereof. Don't try to access images from anywhere else. Your templates will not work on our systems if you do so.
You'll notice that all access to the images and documents in the YourImages folder is made using the XSLT variable called $imageloc. This is built dynamically at the top of each page and will contain the absolute path to your images when they are loaded onto our servers. DO NOT use other references, such as "../images". This code will not find your images when your templates are uploaded to our servers.
When you reference your new images from the your code, use the XSLT code <xsl:copy-of select="$imageloc"/>, then your image name. So, for example, if you wanted to display an image called cheese.gif that you've placed in he YourImages folder, you would use the code:
<img>
<xsl:attribute name="src"><xsl:copy-of select="$imageloc"/>cheese.gif</xsl:attribute>
</img>
If you wanted to support multiple languages, you would added <text> fields to the il8n.xml file to define the image location and alt tag, like this:
<text label="cheese">My favourite cheese </text>
<text label="cheese_img_file">cheese.gif</text>
Then create your image tag as follows:
<img>
<xsl:attribute name="src"><xsl:copy-of select="$imageloc"/><xsl:value-of select="$i18n/multi-lingual-text/texts[lang($lang)]/text[@label='cheese_img_file']"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="$i18n/multi-lingual-text/texts[lang($lang)]/text[@label='cheese']"/></xsl:attribute>
</img>
Your Logo
Your logo is referenced slightly differently from other images. When Sage Pay store your logo, it is held in a subfolder of our central images folder with the same name as your Vendor Name, called [VendorName].gif. So, for example, if your Vendor Name is wonka, your main logo will be at https://[Sage Pay system URL]/images/wonka/wonka.gif
This logo will be displayed in our default templates as well as your custom templates, so if you need to switch back to our templates, your customers will still know they are buying from you.
In the custom template kit, this image (called YourImages.gif): represents the location of your real logo (which you provide to Sage Pay when your account is set up). If you wish to replace this with your real logo whilst testing these pages, simply overwrite it, but leave your logo called YourImages.gif and leave the references to it in the style sheets as they are i.e.
<img border="0">
<xsl:attribute name="src"><xsl:value-of select="payment-model/imagesURL"/><xsl:value-of select="payment-model/vendor/vspvendorname"/><xsl:text disable-output-escaping="yes">/</xsl:text><xsl:value-of select="payment-model/vendor/logo"/></xsl:attribute>
</img>
Bear in mind that your real logo will be called [VendorName].gif, so don't create any other images with that name.
Code and images you cannot change
You'll notice that the Sage Pay logo and the JavaScript code is loaded from the images/sagepay folder. You cannot change this code or the images there (when your templates are uploaded, nothing from this folder will be uploaded to our servers) but you can use the JavaScript mouseover and pop-up functions in your code.
The Customer Services team will validate your templates, but cannot offer to debug them for you. Please ask your web-developers for help if you are experiencing difficulties with XSLT or the multi-language support.
The templates are extremely flexible and allow you to completely customise the look and feel of the pages, but there are some rules you must follow:
When you are happy that your pages work correctly on your local machine (and have tested with JavaScript enabled AND disabled), zip up the contents of your XSLT and YourImages folders and e-mail them, along with your Vendor Name to templates@sagepay.com.
The team there will validate them against the rules above, and if everything is okay, upload them to the test server for you. This process can take up to 72 hours. Once the team has come back to you, log into your Test My Sage Pay screens and set your templates to Custom in the Account Administration area, then test them.
Unfortunately we cannot debug your XSLT code for you. Our team can only validate your templates against the rules above, not correct the XSLT itself (although we will validate that the XSLT is valid using the same tools we've provided to you). If you need help with XSLT, your web developer should be able to provide it.
If you are happy with them on the test server, mail that address again and ask for your templates to be set live. The team will upload them for you and let you know when they are there. Again, you can set them live in your Live My Sage Pay.
If you have questions about templates, please e-mail support@sagepay.com (include your Vendor Name) and we'll do our best to help you.