Customising Your Mobile Payment Pages

Corporate Gateway Customising Your Mobile Payment Pages V2.0 May 2014 Use this guide to: Understand how to customise your payment pages for mobile and tablet devices

XML Direct Integration Guide > Contents Contents 1 About this guide... 5 1.1 Audience... 5 1.2 Changes to the guide... 5 1.3 Copyright... 5 2 Mobile Payment Page Basics... 6 2.1 Support for Alternative Payment Methods... 6 2.2 Payment page flow... 6 2.2.1 Payment method selection page... 7 2.2.2 Payment page... 7 2.2.3 Payment result pages... 8 2.3 Payment Page Editor... 8 2.3.1 Basic steps for customising... 8 2.3.2 What you can customise... 9 2.4 JavaScript features... 10 2.4.1 Menu item selection... 10 2.4.2 Field validation... 10 2.4.3 Payment method carousel for tablets... 10 2.5 3D Secure... 12 2.6 Mobile device identification... 12 3 Setting Up Mobile Payment Pages... 13 3.1 Enabling optional features... 13 3.1.1 Shopper redirect: continue button... 14 3.1.2 Breadcrumb... 15 3.1.3 Remove header... 16

XML Direct Integration Guide > Contents 3 3.1.4 Remove footer... 17 4 Customising Your Mobile Payment Pages... 19 4.1 Accessing the Payment Page Editor... 19 4.2 Customising the Payment Page Editor... 19 4.3 Text styles... 20 4.3.1 Title... 20 4.3.2 Help title... 22 4.3.3 Body text... 22 4.3.4 Highlighted text... 23 4.3.5 Error text... 24 4.3.6 Input fields text... 25 4.4 Colours... 25 4.4.1 Breadcrumb colours... 26 4.4.2 Text colours... 26 4.4.3 Button colours... 27 4.5 Button Images... 27 4.5.1 Using custom button images... 28 4.5.2 Changing the colour of a default button... 29 4.6 Header... 30 4.7 Background... 30 4.7.1 Adding a background image... 31 4.7.2 Adding a background colour... 32 4.8 Emulating a mobile Web browser... 32 4.8.1 User agent switchers... 33 4.8.2 Emulators... 33 4.8.3 Browser layout engines... 33 4.9 Previewing your changes... 34 4.9.1 Using the test transaction submission page... 34 4.10 Copying your changes to production... 34

XML Direct Integration Guide > Contents 4 5 Best Practice Guidelines... 36 5.1 Specifying the language and country... 36 5.2 Optimising or removing order content... 36 5.2.1 Skipping the payment method selection page... 36 5.3 Payment page guidelines... 36 5.3.1 Address guidelines... 37 6 Uploading Images... 38 6.1 Deleting images... 38

Customising Your Mobile Payment Pages > 1 About this guide 5 1 About this guide This guide explains how you can customise the Worldpay payment pages for mobile phones and tablets. 1.1 Audience This guide is aimed at Corporate Gateway merchants using the XML Redirect model. For more about the XML Redirect model, see the XML Redirect Integration Guide, available from http://www.worldpay.com/support/guides. 1.2 Changes to the guide Version Change Description Date Affected Pages 2.0 Worldpay rebrand May 2014 All pages 1.0 New guide July 2012 All pages 1.3 Copyright Worldpay 2014. All rights reserved. Table 1: Changes to the guide This document and its content are confidential and proprietary to Worldpay and may not be reproduced, published or resold. The information is provided on an AS IS basis for information purposes only and Worldpay makes no warranties of any kind including in relation to the content or suitability. Terms and Conditions apply to all our services. Worldpay (UK) Limited (Company No: 07316500/ FCA No: 530923), Worldpay Limited (Company No: 03424752 / FCA No: 504504), Worldpay AP Limited (Company No: 5593466 / FCA No: 502597). Registered Office: The Walbrook Building, 25 Walbrook, London EC4N 8AF and authorised by the Financial Conduct Authority under the Payment Service Regulations 2009 for the provision of payment services. Worldpay (UK) Limited is authorised and regulated by the Financial Conduct Authority for consumer credit activities. Worldpay, the logo, and any associated brand names are all trade marks of the Worldpay Group of companies.

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 6 2 Mobile Payment Page Basics You can display Worldpay secure payment pages on your shoppers' mobile phones and tablet devices. Worldpay provides you with default payment pages that you can use right away. Or, you can edit the mobile payment pages and customise them to match your own branding. Editing is made easy with the mobile options of the Payment Page Editor. You can try out changes in the secure test environment before finalising them for production. Benefits of Worldpay's mobile payment pages include: Stylish default mobile payment pages that make out-of-the box implementation simple. Mobile payment pages that are fully customisable. You can tailor colours, text styles and images to match your branding. Form validation using client-side JavaScript. Shoppers get immediate feedback when they fill in payment and address details. If shoppers have JavaScript disabled, server-side validation is used. Redirect button. An optional redirect feature adds a redirect button to the payment result page that takes the shopper back to your website. 2.1 Support for Alternative Payment Methods The following alternative payment methods are currently supported on the mobile payment pages: Online bank transfers Offline bank transfers Alternative payment methods such as: PayPal ELV (Elektronisches Lastschrift Verfahren) ideal Some, but not all, alternative payment methods have been optimised for mobile devices. For some nonoptimised payment methods, shoppers may be presented with payment pages that have been developed for the desktop environment. 2.2 Payment page flow By default, Worldpay provide shoppers with the following secure payment pages for card payments: Payment method selection page Payment page Payment result pages

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 7 2.2.1 Payment method selection page Shoppers select their desired payment method on this page. Shoppers can also select the language for the text displayed and their country. 2.2.2 Payment page Figure 1: Payment Method Selection Page Shoppers enter their payment details and billing address on the payment page.

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 8 2.2.3 Payment result pages The payment result page shows one of four standard result pages indicating the following: Figure 2: Payment Result Page The four possible results are: success, pending, failure and cancel. For more information, refer to the Hosted Payment Page (XML Redirect) Guide. 2.3 Payment Page Editor Use the Payment Page Editor to customise mobile payment pages. The Payment Page Editor is available in the Merchant Interface. 2.3.1 Basic steps for customising There are three basic steps for customising your mobile payment pages:

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 9 Figure 3: Basic steps for editing It is recommended that you back up your mobile payment pages before copying any customisations to production. To create a back up, use the Backup and Restore function of the Payment Page Editor. 1. Customise the characteristics of the payment pages using the Payment Page Editor. You can customise elements such as text styles, colours and button images to match your branding. Customisations are saved to your test installation. 2. Use the Payment Page Editor to preview your changes. To simulate a mobile or tablet device, you need to download software that lets you emulate these devices. For more information, see the topics under Emulating a Mobile Web Browser. 3. Copy your changes to your production installation. Copying your changes to production copies all changes - including those made to the desktop payment pages - since the last time changes were copied to production. It is recommended that you check settings for both desktop and mobile payment pages before copying to production. 2.3.2 What you can customise You can customise almost every element in the mobile payment pages. Element Text styles Colours Button images Header Customisations You can choose from four fonts when customising text. You can customise the colours of different elements on the mobile payment pages, including the breadcrumb and large buttons. For smaller buttons, you can upload and use your own button images or you can use Worldpay's default versions. If you use the default buttons, you can optionally customise their colours by selecting from eight colours. You can upload a custom logo to replace the Worldpay logo at the top of the payment pages.

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 10 Element Background Customisations You can upload a background image or add a background colour to the entire page or to specific page sections (header, body, footer). Colours can be either gradients or solid colours. Table 2: What you can customise 2.4 JavaScript features Worldpay offers enhanced functionality for shoppers who have JavaScript enabled on their mobile and tablet devices. 2.4.1 Menu item selection To personalise the shopping experience, shoppers can optionally select a language or country from a corresponding drop-down list. JavaScript status Enabled Disabled Behaviour Once a selection is made, the payment page is automatically updated with the selected language or country. Shoppers can select an option and then select a button next to the field to have their selection confirmed. These buttons can be customised. Table 3: JavaScript menu item selection 2.4.2 Field validation Field validation ensures that information is entered correctly into fields. It also checks that mandatory fields have been completed. JavaScript status Enabled Disabled Behaviour If the shopper completes a field incorrectly or does not complete a mandatory field, feedback is provided as soon as they leave the field. Server-side validation is used. Feedback about an incorrectly completed or missed field is provided when the shopper submits the information for the payment page. Table 4: Field validation options

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 11 2.4.3 Payment method carousel for tablets The display of available payment methods is enhanced for tablet users who have JavaScript enabled. JavaScript status Enabled Disabled Behaviour Shoppers can scroll through available payment methods by swiping horizontally across the screen or by pressing one of the circular markers shown below the payment method icons. All payment methods are displayed on the page Table 5: Payment method carousel options Figure 4: Carousel for viewing payment methods. Available on tablets only

Customising Your Mobile Payment Pages > 2 Mobile Payment Page Basics 12 2.5 3D Secure 3D Secure (Verified by Visa and MasterCard SecureCode) is shown to shoppers in the following ways on mobile and tablet devices: The web page(s) for 3D Secure are displayed in an inline frame (iframe). An iframe is an HTML tag that is used to embed a web page within the current web page. The submission of 3D Secure information differs depending on whether JavaScript is enabled: JavaScript status Enabled Disabled Behaviour Once the shopper has completed all mandatory fields, the 3D Secure page is automatically submitted. Shoppers can select a Continue button to submit the page. Table 6: 3D Secure Worldpay has no control over the display of 3D Secure content in the iframe. In some instances, when JavaScript is disabled, the 3D Secure content is not displayed properly in the iframe. This is the result of issues outside of Worldpay's control. However, a Start again button is provided, allowing the shopper to try another payment method. 2.6 Mobile device identification After a payment has been completed, Worldpay provides information that can help you identify the device used to make the payment. Worldpay automatically appends the following data to result URLs: Mobile operating system Device resolution Browser A mobile flag. This flag is set to true if a mobile device was used.. The following example shows sample parameters obtained using an iphone simulation: ismobile=true mobilebrowser=safari mobileos=iphone%20os mobileres=768x1024

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 13 3 Setting Up Mobile Payment Pages You can enable mobile payment pages in Installations in the Merchant Interface. It is recommended that you enable mobile payment pages in your secure-test environment. You can customise the mobile payment pages in the test environment and also submit test transactions. Your customisations will only go live when you copy them to production. You can also select optional features for mobile payment pages. For more information, see Enabling Optional Features. To enable mobile payment pages: 1. In the Merchant Interface, click Installations. 2. Under Integration Setup: TEST, select the spanner icon for the installation you would like to customise. The Installation Administration page is displayed. 3. Select the Enable Mobile Pages check box. If the Enable Mobile Pages check box is not displayed, please contact support@worldpay.com to have this feature set up. Account amendments can only be requested by registered account contacts. 4. Click Save Changes. It is recommended that you test customisations to your mobile payment pages before making them live by copying them to production. 3.1 Enabling optional features Optional features let you customise aspects of your mobile payment pages such as removal of the breadcrumb. You can select specific optional features in Installations in the Merchant Interface. To enable optional features: 1. At the Merchant Interface application, click Installations. 2. Under Integration Setup: TEST, select the spanner icon for the installation for which you would like to enable optional features. The Installation Administration page is displayed. 3. Select the following features as required:

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 14 a. Shopper Redirect button enabled? Gives the shopper the option to return to your website. For more information, see Shopper Redirect - Continue Button. If you enable the Shopper Redirect button, you must also provide a Shopper Redirect URL. b. Remove Breadcrumb? Removes the breadcrumb, a navigation aid that lets shoppers see the stages of the transaction. For more information, see Breadcrumb. 4. Click Save Changes. It is recommended that you test customisations to your mobile payment pages before making them live by copying them to production. 3.1.1 Shopper redirect: continue button The shopper redirect feature adds a button to the Worldpay payment result page. It gives the shopper the option to return to your website at the end of the transaction. You can enable this feature in Installations in the Merchant Interface. In addition, you must also provide a complete URL. For instructions, see Enabling Mobile Payment Pages.

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 15 Figure 5: Shopper redirect button 3.1.2 Breadcrumb The breadcrumb indicates the stages of the transaction as the shopper moves through the mobile payment pages. You can optionally remove the breadcrumb by selecting the Remove Breadcrumb? check box in the Merchant Interface. For instructions, see Enabling Optional Features. With breadcrumb The following figure shows a mobile payment page with the breadcrumb enabled.

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 16 Figure 6: Mobile payment page with breadcrumb Breadcrumb removed The following figure shows a mobile payment page with the breadcrumb removed. Figure 7: Mobile payment page with breadcrumb disabled 3.1.3 Remove header You can optionally remove the header from the mobile payment pages. Removing the header removes the logo (by default, a Worldpay logo) and the language selection drop-down list. You may want to remove the header if you are integrating the payment pages into an app using a webview. For instructions on how to remove the header, see Enabling Optional Features. If you would like to specify a language for the mobile payment pages, you can use the language parameter. For more information, see the Corporate Gateway Submitting Transactions in the Redirect Model guide. With header The following figure shows the top of the payment method selection page. The header is included by default.

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 17 Figure 8: Payment method selection page with header Header removed The following figure shows the top of a payment method selection page where the header has been removed. Figure 9: Payment method selection page without header 3.1.4 Remove footer You can optionally remove the footer from the mobile payment pages. Removing the footer removes the Powered by Worldpay image and the Worldpay copyright text. You may want to remove the footer if you are integrating the payment page into an app using a webview. For instructions on how to remove the footer, see Enabling Optional Features.

Customising Your Mobile Payment Pages > 3 Setting Up Mobile Payment Pages 18 With footer The following figure shows the lower part of the default payment method selection page. By default, the footer is included. Figure 10: Payment method selection page with footer Footer removed The following figure shows the lower part of the payment method selection page with the footer removed. The Powered by Worldpay image and the Worldpay copyright text are removed. Figure 11: Payment method selection page without footer

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 19 4 Customising Your Mobile Payment Pages 4.1 Accessing the Payment Page Editor To access the Payment Page Editor: 1. At the Merchant Interface application, click Installations. 2. Under Payment Page Editor, click Edit Payment Pages. 3. In the Installation Id list, click the installation you would like to edit and then select the Edit Payment check mark. The Payment Page Editor displays. To start editing your mobile payment pages, click any of the options under Edit Menu Mobile. 4.2 Customising the Payment Page Editor You can customise different aspects of the mobile payment pages and then see a preview of your changes. The preview presents a complete sequence of mobile payment pages, as if a shopper had decided to buy something from your website shop. No money changes hands because the preview feature operates within the test environment. Any customisations you make are saved to the TEST payment pages belonging to the installation. To make your changes live, you need to click Copy to Production under the File Menu. To customise the mobile payment pages using the Payment Page Editor: 1. Under Edit Menu Mobile, select a characteristic, such as Text Styles, that you would like to customise. 2. Make the desired changes and then select the check mark button to save your changes. Your changes are saved to the test installation. 3. To preview your customisations, click Preview. The Test Transaction Submission page is displayed. The values you choose on this page prepopulate the test payment pages showing your customisations. You must save your changes using the check mark button before you can preview them. 4. Optionally change the field values and then select the Submit check mark. A sequence of test mobile payment pages are displayed. 5. Select values as required on each test payment page to move through the test payment pages.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 20 4.3 Text styles You can change the text styles for different types of text on the mobile payment pages. You can select from four text styles in the Payment Page Editor. The Payment Page Editor gives you a preview of your selected text style when you save your selection. You can change the following types of text: Type of text Title Help Title Body Text Highlighted Text Error Text Input Fields Text Applies to Field names, section headings in the help. Title of a help page. Instructions, values displayed in fields by Worldpay Screen instructions that are highlighted. Error message text. Text input by the shopper into fields. Table 7: Text styles 4.3.1 Title Title text applies to: Field names Section headings in the help

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 21 Figure 12: Title

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 22 4.3.2 Help title Help title applies to the title of a help page. Figure 13: Help title 4.3.3 Body text Body text applies to: Instructions Values displayed in fields by Worldpay Figure 14: Body text

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 23 4.3.4 Highlighted text Highlighted text applies to screen instructions that are highlighted. Figure 15: Highlighted text

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 24 4.3.5 Error text Error text applies to error message text. Figure 16: Error text

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 25 4.3.6 Input fields text Input fields text applies to text input by the shopper into fields. Figure 17: Input fields text 4.4 Colours You can customise the colours of these elements on the mobile payment pages: Breadcrumb Text Buttons You can specify a colour using either the hexadecimal value or the HTML colour name. For more information about hexadecimal colour values, please refer to http://www.w3schools.com/html/html_colors.asp and http://www.w3.org/tr/css3-color/.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 26 To customise the colours: 1. At the Payment Page Editor, under the Edit Menu Mobile, click Colours. 2. See the following sections for information on customising the colours of various elements on the mobile payment pages. 3. To save your customisation(s), select the Set Colours check mark. Your changes are saved to the test environment. 4.4.1 Breadcrumb colours The breadcrumb appears at the top of a payment page. It lets the shopper know the current stage of the payment process. By default, the stage indicator or label is numeric. However, you can replace the number with a single alphanumeric character to match your order process. Breadcrumb colour The colour of the breadcrumb. Breadcrumb stage 1-3 label The stage indicator or label. To customise, enter a single alphanumeric character. Breadcrumb stage labels colour The colour of the alphanumeric stage indicator. Table 8: Breadcrumbs 4.4.2 Text colours You can customise the colours of different types of text on the mobile payment pages. You can quickly see a preview of a customised colour by looking at the two text boxes to the right of each text type. The text box on the left shows the default text colour. When you select the Set Colours check mark to save your customisations, the text box on the right shows the specified custom colour. You can also click Preview to see sample mobile payment pages containing all of your customisations. Type of text Title Help Title Body Text Highlighted Text Error Text Input Fields Text Applies to Field names, section headings in the help. Title of a help page. Instructions, values displayed in fields by Worldpay Screen instructions that are highlighted. Error message text. Text input by the shopper into fields. Table 9: Text colours

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 27 4.4.3 Button colours You can customise the colour and font of the following five buttons that can appear on the mobile payment pages: Continue Make Payment Continue Shopping Return to Merchant's Site Back (from the Help page) You can create a gradient effect on a button by specifying a starting colour and an ending gradient colours. The Payment Page Editor creates a smooth transition vertically from the start- to the end-colour. You can quickly see a preview of a customised button by checking the two buttons labelled Text. The button on the left shows a default button. When you select the Set Colours check mark to save your customisations, the button on the right shows any customisations. You can also click Preview to see sample mobile payment pages containing all of your customisations. Button characteristic Gradient start colour Gradient end colour Gradient end colour on focus Button border Button shadow Button text colour Button text font Meaning The starting colour at the top of the button. The ending colour at the bottom of the button. The gradient end colour at the bottom of a button that appears when a mouse pointer is hovered over the button. The border of a button. The shadow that appears when a mouse pointer is hovered over the button. The colour of the text on the button. The font of the text on the button. Table 10: Button colours 4.5 Button images You can customise a set of buttons that appear on the mobile payment pages. For any button in the set, you can make either of the following customisations: Replace it with a button image of your own. Change the colour of the default button.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 28 You can customise the following buttons: Image Name Use Java script off Input button. Used when JavaScript is not enabled. Cancel Cancels the transaction. Start Again Restarts the transaction from the first payment page. Help Displays help text on a new page. Small help Close small help Carousel buttons When JavaScript is enabled, displays help text on the same page. Hides the help text. This button is displayed when JavaScript is enabled. Appears on the payment method selection page on a tablet when JavaScript is enabled. 4.5.1 Using custom button images Table 11: Button images Use the fields in the top half of the page to do the following: Specify your custom button images. If you specify at least one custom button image, you can also use these fields to change the colour of any default button images. Please note the following about button image files: Before you can replace a default button image with a custom image of your own, you need to upload the custom button in File Management in the Payment Page Editor. Button image files must have one of the following extensions:.gif,.jpg,.png. For better rendering of the uploaded pictures, it is recommended that you use images that are similar in dimensions and size to the default images. This information is displayed to the right of each image under Specify a Button Image. To replace a default button image with a custom button image: 1. At the Payment Page Editor, under the Edit Menu Mobile, click Button images. 2. For each button that you want to replace, under Specify a Button Image, edit the path and file name to the following: ~/my_button.png where my_button.png is the name of your custom button image file.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 29 3. Make sure Use uploaded images is selected. 4. To save your changes, click Set Images. Your changes are saved to the test environment. To change the colour of a default button image: Follow this procedure if you are using at least one custom image. If you are using default buttons only, follow the procedure Changing the colour of a default button. 1. In the path field for the button, replace the colour in the file name with one of the following colour names: blue red green grey black orange yellow purple 2. Ensure Use uploaded images is selected. 3. Click the Set Images check mark to save your changes. Your changes are saved to the test environment. 4.5.2 Changing the colour of a default button Follow this procedure when you are not using any custom button images. To change the colour of a default button: 1. At the Payment Page Editor, under the Edit Menu Mobile, click Button images. The default buttons are shown in the lower half of the page. 2. For each default button you want to change, select a colour from the corresponding drop-down list. 3. Ensure Use default images is selected. 4. Select the Set Images check mark to save your changes. Your changes are saved to the test environment.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 30 4.6 Header You can upload a custom logo to replace the Worldpay logo at the top of the payment pages. You first need to upload the graphic of your logo using File Management in the Merchant Interface. Please note the following about image files: Image files must have one of the following extensions:.gif,.jpg,.png. The dimensions of your logo image must be less than 141 x 60 pixels. The logo should be less than 15 KB in size. Figure 18: Custom logo replacing default Worldpay logo To replace the default Worldpay logo with a custom logo: 1. At the Payment Page Editor, under the Edit Menu Mobile, click Header. 2. Optionally click the double-arrow button to display File Management. You can upload your logo image in File Management. 3. In the Header Image field, edit the file name to the following: ~/my_logo.png where my_logo.png is the name of your logo image file. 4. Click Set Options. Your change is saved to the test environment. 4.7 Background You can add an image or a colour to the background of the entire page or to specific page sections. When adding an image, you first need to use File Management in the Payment Page Editor to upload the image. The following figure shows the sections of a page where the background can be customised.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 31 Figure 19: Sections of a mobile payment page Please note the following about customising the background: Image files must have one of the following extensions:.gif,.jpg,.png. Adding a background image to a section or page overrides any custom colours for that section or page. If a custom image has been set for the entire page, any custom colour or image you add to the header, body or footer will override those parts of the page. 4.7.1 Adding a background image To add a background image: Before you can add an image, you need to upload it using File Management in the Payment Page Editor.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 32 1. In the Payment Page Editor, under the Edit Menu Mobile, click Background. 2. For each page section for which you want to add an image, under Image path, specify the path and file name as follows: ~/my_image.png where my_image.png is the name of your custom image file. 3. Select the Set background check mark. 4.7.2 Adding a background colour You can specify a background colour using either the hexadecimal value or the HTML colour name. For more information about hexadecimal colour values, please refer to http://www.w3schools.com/html/html_colors.asp and http://www.w3.org/tr/css3-color/. To add a background colour: 1. For each section to be customised, do either of the following: To specify a solid colour, enter the colour value or name in the Start colour box. Optionally enter the same colour value or name in the End colour box. To specify a gradient colour, enter a colour value or name in the Start colour box and a different colour value or name in the End Colour box. 2. To save your changes, select the Set background check mark. Your changes are saved to the test environment. For each page section, the Default box displays the Worldpay default colour and the Custom box displays the specified custom colour. You can also click Preview to see sample mobile payment pages containing all of your customisations. 4.8 Emulating a mobile Web browser Use the preview feature of the Payment Page Editor to see a preview of your customisations and to perform testing. The preview feature shows your customisations in a simulation of the payment pages. You can step through the payment pages and see them from the shopper's point of view. By default, a desktop version of the payment pages is provided. To simulate a mobile phone or tablet user's experience, you need to use an add-on or other method to simulate a mobile device browser. The following two methods can be used to simulate and display mobile payment pages for different mobile devices and operating systems: User agent switchers Emulators

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 33 4.8.1 User agent switchers A user agent switcher is a browser extension that you can download. When you use a user agent switcher, you can select the type of mobile device and operating system in which you would like to see the mobile payment pages rendered. Always check the permissions that a browser extension requires before installing it. Do not install extensions from creators you do not trust. It is recommended that you check user reviews and ratings of user agent browser extensions. 4.8.2 Emulators You can obtain mobile device emulators from the developers of mobile operating systems, such as Google, Apple, Microsoft and RIM. The device emulators allow you to emulate different devices running different versions of operating systems. For more information, contact the companies directly. 4.8.3 Browser layout engines The following table shows the browser layout engines that are used in several well-known browsers. A browser layout engine is a software component of web browsers that displays web content. Browser layout engines interpret and display HTML mark up and style information for web pages, email and other applications that display web content. This table may help you in determining the design your testing strategy. Many of the developers of the major operating systems provide version distribution statistics. The information in this table is subject to change. Operating System Browser Layout Engine Webkit Gecko Trident Presto Android X Blackberry X* Dolphin X Firefox X Internet Explorer X Opera X Safari X * Applies to the Blackberry default operating system browser version 6 and above. Table 12: Browser layout engines

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 34 4.9 Previewing your changes You can preview how your mobile payment pages will look to shoppers by clicking Preview from any page in the Payment Page Editor. The preview feature presents a complete sequence of mobile payment pages, as if a shopper had decided to buy something from your website shop. No money actually changes hands because it operates within the test environment. By default, the preview function presents the payment pages for a desktop environment. To preview a simulation of a mobile phone or tablet, you need to use an emulator, such as browser extensions. For more information, see Emulating a Mobile Web Browser. 4.9.1 Using the test transaction submission page When you select the Preview link, a Test Transaction Submission page will open, which enables you to enter a variety of field values so that you can test various scenarios. To test a transaction: 1. Click the Preview link from any page in the Payment Page Editor. The Test Transaction Submission page includes your Installation ID and other default values that you can use to test a transaction. 2. Review the default values, and then select the Submit check mark. 4.10 Copying your changes to production When you have finished customising the mobile payment pages and tested them fully you can copy the underlying files from secure-test to production where they will be used for live payments. Please be aware of the following when copying to production: Copying to production overwrites the current mobile payment page files for the production installation. You cannot make a back up of the files in the current production installation. Therefore, it is strongly recommended that you make a backup copy of the files you most recently copied to the production before overwriting the current files. For more information on back up and restore, refer to the Business Gateway Customising Guide (Standard) guide. Copying your changes to production copies all changes including those made to the desktop payment pages since the last time changes were copied to production. It is recommended that you check settings for both desktop and mobile payment pages before copying to production. You can also make a manual back up of your files in File Management in the Payment Page Editor. For each file you want to back up, right-click the file name and select the commands to save the file.

Customising Your Mobile Payment Pages > 4 Customising Your Mobile Payment Pages 35 To copy the mobile payment page files from secure-test to production: 1. In the Merchant Interface, go to the Payment Page Editor. For instructions, see Accessing the Payment Page Editor. 2. Under the File menu, click Copy to Production. 3. At Confirm Copy to Production Environment, select the Yes check mark. The Home Welcome page is displayed, showing a message confirming that the files are being copied. The upload of your mobile payment pages may take up to two hours to appear as your new production mobile payment pages, as this action requires an update on our secure server.

Customising Your Mobile Payment Pages > 5 Best Practice Guidelines 36 5 Best Practice Guidelines This section provides guidelines for streamlining the payment process for your customers and for optimising your use of the smaller screen space of mobile devices. 5.1 Specifying the language and country If you know your customer s language and country, you can append it to the redirect URL using the following optional parameters: language country Providing the country and language eliminates the need for your customer to select this information on the payment method selection page. In addition, you can prevent the language and country fields from being displayed. To hide the language and country fields: 1. At the Merchant Interface application, click Profile. 2. Under Shopper pages, click no for the Country/language selection. 3. Click Save Profile. 5.2 Optimising or removing order content To maintain a streamlined appearance of your mobile payment pages and to make the best use of screen space, it is strongly recommended that you optimise or remove the order content from the payment method selection page. Order content is provided through the optional ordercontent element of an XML order. You may need to review the order content you provide, particularly if it is designed for a desktop environment. For more information, see Order Content in the Hosted Payment Page (XML Redirect) guide. 5.2.1 Skipping the payment method selection page Append the preferredpaymentmethod parameter to the redirect URL to provide the shopper s selected payment method to Worldpay. Appending this parameter causes the payment method selection page to be skipped completely and eliminates the need for your customer to re-select a payment method. For more information see Preferred Payment Method in the Hosted Payment Page (XML Redirect) guide. 5.3 Payment page guidelines This section provides guidance on the format of address information and on providing address and contact details with an order.

Customising Your Mobile Payment Pages > 5 Best Practice Guidelines 37 5.3.1 Address guidelines It is recommended that you use the three-line address format in preference to the block address format. The three-line format is WorldPay s preferred format and will benefit from any future enhancements. To streamline the payment process for your customers, it is recommended that you provide the address and contact details with the order. Providing this information eliminates the need for the shopper to reenter it on the payment page.

Customising Your Mobile Payment Pages > 6 Uploading Images 38 6 Uploading Images You can add your own custom images to the mobile payment pages. You can customise the following features with custom images: Some button images Header image Background image Before you can add custom images, you need to upload your images to the Payment Page Editor. Once you have uploaded images, you can click Button Images, Header or Background under Edit Menu Mobile to add them to the mobile payment pages. Image files must have one of the following extensions:.gif,.jpg,.png. If an image is missing or its upload failed, and changes are copied to production, the image will not appear on the mobile payment pages. Depending on the browser, a broken image link may be displayed. To upload an image: 1. At the Payment Page Editor, under the File Menu, click File Management. 2. Under Upload File, click Browse and navigate to the image file you want to upload. 3. Select the Upload check mark. A message indicates that the file has been uploaded successfully. The file name appears under Image Files. 6.1 Deleting images You can delete one or more image files when you no longer need them. Use File Management in the Payment Page Editor to delete images. Deleting an image in the Payment Page Editor removes it from the test environment only. To delete an image: 1. At the Payment Page Editor, under the File Menu, click File Management. A list of image files currently being stored by the Payment Page Editor is displayed under Image Files. 2. For the image you want to delete, select the Delete check mark. 3. When prompted, select the Yes check mark to confirm the deletion. The deletion of the image file applies to the test environment only.

Customising Your Mobile Payment Pages 39 Corporate support: +44 (0)1268 500612 UK Sales: 0845 3016251 International Sales: +44 (0)1268 500612 Email: corporatesupport@worldpay.com Worldpay Support Centre: http://www.worldpay.com/support/gg Worldpay 2014. All rights reserved. Worldpay, the logo and any associated brand names are all trademarks of the Worldpay group of companies. 1.