When using our systems to process transactions through your account you are able to customise the payment pages on your account.
By using our customised payment pages you will be able to amend the look and feel of your payment pages to feel like the rest of your website.
For more information, check out our customised payment pages article.
Getting Started
When using our Form or Server integration on your website you are able to download our customised payment page kits that you can amend to change the look and feel of your website.
The customised payment pages used on our systems are XSLT version 2 code with no customised tags or non-standard additions.
Your web developers will be able to help you make the changes to your payment pages if you are unfamiliar with XSLT.
The Customised Payment Page download we offer includes all of the standard XSLT templates, the XML needed to populate the pages, and all images that are used on our payment pages.
Along with this we also give you all of the tools you need to render the XSLT files into HTML pages. We give you both Saxon, and Kernow which you can use to test your customised payment pages.
What do I need?
To customise your payment pages you don’t need anything from us except the download with all files.
You will need a Java runtime version of 1.4 or higher to run both Saxon and Kernow. If you do not have this version or higher you will be able get these at http://java.sun.com
Once you have the download and Java you are ready to go!
Customising your Payment Pages
Now that you have downloaded our payment page files you are ready to customise these.
Included in the download you will find all of these files you can customise.
Main Files
In the download you will be given all files that you can customise. Not all files can be used at the same time though, if you are using Form or Server integration the main pages you will customise are -
- Card Selection – card_selection.xslt – Is the first Opayo screen that your shopper will see when they are on our system. The shopper will select the card type they are using by selecting an image of the cards available.
- Card Details – card_details.xslt – The card details page is where we capture the details of the card, such as the card number, expiry date, and security code. The card details page also includes pop-up links to static pages in the images folder that you can also amend.
- Card Confirmation – card_confirmation.xslt – Your shopper will be shown this page with a summary of the order, and the details they have entered.
- Card Authentication – card_authentication.xslt – This page frames the 3d Secure page that is shown to your shoppers, if you have 3d Secure enabled this page will be in your payment process.
- Authorisation – authorisation.xslt – Is the “Authorising please wait” screen your shopper is shown when the transaction is sent to the bank for authorisation. This page is usually only shown for a few seconds.
- Errors – error.xslt – If your shopper has any problems with their order they will be shown this page.
- 3d Secure – 3d_callback.xslt, 3d_redirect.xslt – These pages won’t really need to be customised, they are used to forward your shopper to and from the 3d secure pages and will only ever be shown if your shoppers computer has Java turned off.
- 3d Secure – post_through_browser.xslt – This page automatically directs your shopper to the 3d secure pages and as above will only be shown if your shopper has Java disabled.
Along with these pages your integration method will depend which other files you will be able to customise.
Form
If you are using our Form integration you will also be able to customise –
- Error page – form_response.xslt – This page will be shown to your shoppers if they get errors with the transactions. This page will re-direct your shopper back to your Failure URL on your website.
- Shoppers E-mail – customer_email.xslt – Is a confirmation e-mail that is sent to your shopper when their payment has been successful.
- Your E-mail – vendor_email.xslt – We will send you an e-mail whenever a transaction successfully completes. This is sent to your VendorEMail address.
InFrame
If you are using the InFrame on your website you are also able to customise the page that is displayed within your own page.
The InFrame lets you use our payment pages, but embed them into your own website. Because you are still using our payment pages you will be able to customise the pages of the InFrames.
These pages will change the InFrame and not your website, the benefit of this is you can customise your InFrame to match the layout of your website –
- Card Details InFrame – card_details_low.xslt – A simplified version of the main card details page that asks for the same details except for the card type.
- Card Authentication – card_authentication_low.xslt – Another simplified version of the main authentication page. This page is used to move your shopper from the InFrame to a full screen 3D Secure page.
- Card Authorisation – authorisation_low.xslt – Is a basic full screen authorising screen that your shopper will see when we send the payment for authorisation.
Other
There are 2 other files included in the Customised Payment Page download that although they can be customised we would advise you not to.
They are –
- Countries – countries.xml – This file is used to build the list of countries that are available for your shopper to select from a drop down box.
- US States – states.xml – We use this file to create the list of states your shopper can choose if they are a customer based in the United States.
Languages
All of our files are able to be used with multiple languages.
Our payment pages use text that is obtained from another file within the download – i18n.xml.
If you would like to use multiple languages on your payment pages you can add more text entries into the i18n.xml file.
Once you are happy with your customised payment pages in English you can create a new string for the other languages you want to add.
By adding <texts xml:lang=”xx”> you will be able to specify when the new language is to be used. The “xx” is the 2 character ISO 639 language reference, for example – fr, French, de, German.
You can then use the same text labels but simply translate the content to the new language you would like to add to the pages.
Images
Along with being able to change the look and feel of each of your payment pages you are also able to change the images that we use.
You can change your own company logo, and the card images we use for the payment pages.
All of the images that are used on the payment pages are stored in the Images folder.
The logo we use for your company shares the same name as our vendor name.
For example if your vendor name is sagepaytest your main company logo will be saved at https://{sagePaysystemURL}/images/sagepayest/sagepaytest.gif .
Your logo will be stored on our systems and will be used on both your customised, and standard payment pages so if you need to move back to our standard payment pages your logo will still be displayed and your shoppers will still know who they are buying from.
In the customised payment page download your logo (named YourImages.gif) identifies the location of your real logo.
If you want to change this simply overwrite the logo but leave the filename as YourImages.gif and this will replace the current logo we have stored on your account.
Rendering your Customised Payment Pages
Once you have customised your payment pages you will want to see how they look.
To do this select the Kernow.bat batch file in the download folder.
Select the single file tab, followed by checking the “Send Output to File” box.
Once you have done this follow these steps to load your customised pages to be viewed.
- Select the button next to the XML file edit box and browse to – “customtemplates/XML/card_confirmation.xml”
- Select the button next to the Stylesheet file edit box and browse to – “CustomTemplates/XSLT/card_confirmation.xslt”
- Select the button next to the Output file edit box and browse to – “CustomTemplates/HTML and create a new file called card_confirmation.html” and select “Run”. Then open your browser and go directly to CustomTemplates/HTMLcard_confirmation.html
Sending your Customised Payment Pages to us
Once you have downloaded the customised payment pages and made the changes you want all that is needed is for us to add these to your account.
We will need you to zip up the full customised payment pages file and send this in an e-mail to templates@opayo.io
Once we have received this we will add these to your Test account for you to ensure the pages look how they should.
If you are happy with the pages we will then add this onto your Live account and your shoppers will be able to use your new customised payment pages.