Opayo SagePay mobile templates
Author: Ben Jeffery
If you're building a responsive or mobile-friendly e-commerce site with Opayo (previously SagePay), you may be surprised to find that they don't provide standard template files for mobiles. Their default files have fixed width fields that can't be scaled to a small display, so customers get a page that's too wide for their screen.
iPhone and Android-friendly Opayo (SagePay) pages
You can either create a custom template yourself, or you can download ours below. We've created a mobile page template for responsive websites that scales for different size screens. Now your customers can get a nice mobile site all the way through the shopping process, suitable for Android, iPhone and iPad.
The template files below are for the 'low profile' version of SagePay's integration, which is where customers stay on your website and use the SagePay forms within a frame. We had to make some changes to the SagePay low profile templates themselves and also change the IFrame that we use to embed the card process into our sites.
Custom SagePay template for mobiles
- Two new stylesheets - sagepay_auth_resize.css and sagepay_resize.css - make the field widths dynamic
- Added these new stylesheets to the authorisation_low.xslt and card_details_low.xslt files
- Created a set of column tags so we could control the widths in card_details_low.xslt
Adapting the SagePay Iframe for smartphones
We use an Iframe to display the SagePay pages with a CSS Media Query to set the width. On screens wider than 640 pixels this is set to around 660 pixels. For screens below 640 pixels wide, we override the styling to 95% of the width to allow for additional margins.
This is the new CSS code for mobile responsive SagePay Iframe:
Iframe CSS