Skin Creation Manual Version: 1.22 Contact details Simon Carmiggeltstraat 6-50 1011 DJ Amsterdam P.O. Box 10095 1001 EB Amsterdam The Netherlands T +31 20 240 1240 E support@adyen.com
Table of Contents 1. Introduction... 4 2. What Is A Skin?...5 2.1. Language Support...5 2.2. Payment Flow Selections...5 2.2.1. One-Page Payment Flow...5 2.2.2. Multi-Page Payment Flow...6 3. Creating A Skin In The Adyen CA...7 3.1. Skin List Tab... 7 3.1.1. Creating A New Skin... 7 3.1.2. Editing A Skin... 7 3.1.3. Uploading A Skin...8 3.1.4. Downloading A Skin...8 3.1.5. Removing A Skin...9 3.2. Skin Confguration...9 3.2.1. Skin Options...10 3.2.2. Extra Options... 12 3.3. Testing a Skin...14 4. Editing The Skin Files...15 4.1. Skin Files...15 4.2. Getting The Look Right... 16 4.2.1. The reset.css Stylesheet...16 4.3. Creating And Editing Translations: Skin Resource File...16 4.4. Custom Payment Methods... 17 4.4.1. Button Image...17 4.4.2. Button Name... 17 4.4.3. Custom favicon.ico...17 4.5. Payment Detail Reminder Email...17 5. A/B Testing...18 5.1. Setting Up The Payment...18 5.2. Payment Completion... 18 5.3. View Results...18 6. Publishing The Skin To LIVE...19 7. Getting Started With Customisations... 20 7.1. How To Change The Header Image...21 7.2. How To Change The Payment Method Logos...21 7.3. How To Change The Font Colours...21 7.4. How To Change The Pay Button... 22 7.5. How To Automatically Open The Credit Card Payment Option... 22 Appendix A: Standard Set of Languages...23 Appendix B: Payment Page HTML Skeleton... 24 Appendix C: Visualisation of the HTML Structure...25 Appendix D: reset.css Listing...26 Appendix E: Custom Fields...27 2 / 28
Changelog Version Date Changes 1.22 2015-03-10 Modifying reference to correct external manual 1.21 2013-12-12 Added Popup screenshot 1.20 2013-12-10 Added information regarding Popup functionality Changed formatting of document 1.19 2013-06-04 Added simple Skin customisations Added standard set of languages to Appendix Provide additional clarifcation Conform to Adyen brand guidelines 1.18 2012-05-14 Added section about A/B testing 1.17 2010-09-21 Added information about editing language fles in CA Extended Custom Fields section Explained js directory and altered illustration 1.16 2010-08-10 Added changelog and audience sections Manual reviewed for English and layout consistency Audience This is a technical manual aimed at IT personnel involved in integrating merchants' systems with those at Adyen. General Tips/Warnings Defensive Programming Adyen strongly recommends the use of defensive programming when integrating with the Adyen Services. This implies that automated decisions programmed into your systems should be defaulted to non-delivery of products and services. In other words, program your systems to only deliver products and/or services after receiving an explicit authorisation of the requested payment and NOT to deliver in situations where an explicit rejection is not received. Feedback The latest version of this document is available here: https://support.adyen.com/links/documentation Please direct any comments or suggestions about this manual to support@adyen.com. ADYEN CONFIDENTIAL INFORMATION Copyright (c) Adyen B.V. 2013 3 / 28
1. Introduction The purpose of this manual is to help you create and set up a Skin for the Adyen Hosted Payment Pages (HPPs). It is not intended to be used as a CSS tutorial. In the following chapters we will cover how you can: Design a Skin: Design your Skin to look like your web site Confgure the Skin: Set the confguration parameters on your Skin in the Adyen Merchant Back Ofce, known as the Customer Area (CA) Publish the Skin: Learn how to upload and publish your Skin to the TEST and LIVE systems This document does not cover: The life-cycle of a payment The Adyen Customer Area Basic architecture of the Adyen systems Integration with the Adyen systems These are documented separately on our support site at https://support.adyen.com/. 4 / 28
2. What Is A Skin? A Skin is an interface overlay that is applied to the Adyen Hosted Payment Page (HPP) to customise it according to your brand guidelines and create a seamless consumer checkout experience. The Skin is comprised of a set of custom HTML/JavaScript fragments, images and CSS. You may create multiple Skins to accommodate testing requirements or to target a specifc type of device or application, such as a mobile phone browser or point-of-sale terminal. The Skin provides you with the ability to determine which payment methods are ofered by default and in what order. Minimum and maximum transaction amounts per payment method, including a payment method-specifc surcharge, can also be specifed. Skins are not restricted to a single merchant account - if you have multiple merchant accounts associated with your company account, you may use the same Skin to process payments for each account. Likewise, you may have multiple Skins processing payments for a single merchant account 1. 2.1. Language Support You do not need to create separate Skins to support multiple languages. Adyen provides a base set of translations which may be customised via the Adyen CA, or via the Skin resource fles. The standard set of languages is provided in Appendix A. When displaying a message, the HPP will search for the string in the following locations: 1. The Skin resource fles using the payment session locale res fle (specifed via shopperlocale feld) 2. The Skin resource fles using the default locale 3. The default resource fles using the payment session locale (via the Adyen CA) 4. The default resource fles using the default locale (via the Adyen CA) Text strings can be set or overridden in two places: 1. In the Adyen CA - refer to page 11 2. In the Skin resource fle - refer to page 14 2.2. Payment Flow Selections You can choose between two diferent payment fows - the One-Page Payment fow which reduces the payment process to a single page, and the Multi-Page Payment fow which splits the payment process into two or three discrete steps. 2.2.1. One-Page Payment Flow The One-Page Payment fow uses Javascript extensively to manipulate and validate the page content. It is suited for use on modern browsers and when page complexity is not an issue. Some presentation and validation occurs automatically. For example, the credit card logo is highlighted when the shopper enters the frst digits of their card, and an error appears if the card number is invalid prior to payment submission. Using the One-Page Payment fow is achieved by calling pay.shtml e.g. https://test.adyen.com/hpp/pay.shtml 1 Processing over multiple accounts is usually due to reconciliation or accounting requirements, which are beyond the scope of this document. 5 / 28
2.2.2. Multi-Page Payment Flow The Multi-Page Payment fow is lightweight and doesn't require Javascript, ensuring maximum compatibility with a wide range of browsers and devices, including mobile phones and PDAs. Using the Multi-Page Payment fow is achieved by calling select.shtml e.g. https://test.adyen.com/hpp/select.shtml Optionally, the payment method selection page can be skipped, so the shopper starts directly on the payment details entry page. This is done by calling details.shtml instead of select.shtml. A further parameter, brandcode, should be supplied with the payment method chosen (please refer to the HPP API Manual for more details). 6 / 28
3. Creating A Skin In The Adyen CA You can create, edit, upload, test, and publish your Skin in the Adyen CA. 3.1. Skin List Tab The Skin List tab identifes all the Skins that have been created and are associated with the Company or Merchant account. 3.1.1. Creating A New Skin Click on the New tab and follow the instructions in section 2 below. You may further customise the Skin by manipulating the Skin fles directly. 3.1.2. Editing A Skin You may edit a Skin by clicking on its Skin Code in the Skin List tab. This displays the Edit Skin confguration screen and populates the values that were entered when creating the Skin. The felds are editable; if a shared secret was set, the input feld will be masked showing **** rather than clear text. 7 / 28
3.1.3. Uploading A Skin Once you have modifed the Skin fles and saved it in a ZIP fle (see chapter 4), it may be uploaded to the TEST system where it will be combined with the current UI Skin settings. Click on the disc image in the Upload column. When uploading the ZIP fle you will receive feedback on which fles were accepted and which fles were rejected. If, for instance, you attempted to upload a ZIP fle with an incorrect directory structure, or that has a diferent SkinCode to its root directory, all fles will be rejected. If you are satisfed that the accepted fle list is correct you can confrm the result of the upload. Doing so will save the current upload with the current Skin settings to the TEST environment. 3.1.4. Downloading A Skin Once you have created a Skin you may download the Skin to edit the fles contained within it. Click on the disc image in the Download column; the system will display the Skin Code, the Description, and the File version for confrmation. Click the Download button to proceed with the download. 8 / 28
3.1.5. Removing A Skin If a Skin is no longer required you may delete it; the system will display the Skin Code, the Description, and the File version for confrmation. Click the Remove button to proceed with the deletion. 3.2. Skin Confguration A Skin is identifed by a unique combination of eight digits and letters known as the Skin Code. It is a system generated feld; in the rare instance that the randomly generated Skin Code contains an undesirable combination of characters you may generate a new Skin Code by clicking on the New tab again. Since the new Skin will not be saved until the Save Skin to Test button is pressed, you can safely repeat this a number of times. When creating a Skin you are prompted to specify the following Skin properties. The details for the LIVE environment are required when publishing the Skin to LIVE but not for initial testing within the TEST environment. 9 / 28
Description A description of your Skin, to easily identify it should you have multiple Skins. Account(s) The merchant account(s) which will be able to process payments using the Skin. HMAC Key Specify the HMAC Key for each environment, the Key is used to compute the merchant signature. Please note the same Key cannot be used for both the TEST and LIVE environments (refer to Appendix B of the Adyen HPP API Manual for more information). Result URL OR Continue-to URL The result URL is the URL where you host your payment result page. Customers will be taken to this address after they complete payment. We append parameters to the result URL to inform you of the status of the payment. Although not recommended it is possible to override the result URL on a per-payment basis. Please refer to the Adyen Merchant Integration Manual. If the value of the result URL is not set, and if the resulturl parameter value is not passed with the Payment Request, the default Adyen result page will be used to display the payment result. The continue-to URL is only applicable if you use the default Adyen result page to display the payment result to the customer. When the customer has seen the payment result, clicking on the Continue button will take them to this URL. Please note, payment status parameters are not appended to the Continue-to URL. 3.2.1. Skin Options Clicking on Skin Options reveals less commonly used Skin options: Use inline frame for VbV and MSC 3-D Secure interaction For 3D secure payments the 3D window is iframed within the HPP. Use deprecated back-button behaviour The standard behaviour, when the consumer clicks the previous button on the HPP, is to redirect the consumer to the resulturl with authresult=cancelled. This option will perform the action browser minus 1, taking the consumer back to the previous page. 10 / 28
ShopperInteraction for this Skin It is recommended that this option remains set to Unset, this will ensure that the system will select the correct shopper interaction to be used. In specifc circumstances this setting may need to be changed, please contact the Support Team to discuss your needs. Support partial payments Enable partial payment for giftcards. This means that a shopper can pay a part of the transaction amount with their giftcard, the remaining amount can be paid with an other payment method. Billing Address Fields (AVS) Displays the billing address input felds on the HPP for credit card payments. These will be used for AVS (address verifcation) in the UK, US and Canada if available. This data can be pre-populated (see the Integration manual for details). Show extra costs/discount as Adyen provides the ability to set a surcharge or discount per payment method. This option determines how the extra cost or discount is displayed on the payment method selection screen. "Cost" will display the extra cost (or discount) itself, e.g. "EUR 0.50 + 3.50%", or "3.50%". "Value" will display the calculated cost value, e.g. "EUR 4.50". Break out of frame You may decide to implement an iframe solution, while this is supported, you should be aware that not all payment methods support iframes, an example is ideal. This setting provides you with 3 options: Selecting No will disable breaking out of iframes. Selecting Same window will open the redirect page in the same window. Selecting New Popup will result in the payment method redirect being opened within a popup screen. Once the shopper completes the payment fow, the popup will close and the session will continue within the iframe. Please note, the New Popup option is only available for a limited set of payment methods, please contact Support ( support@adyen.com) for more information. 11 / 28
OneClick options Use new OneClick layout When this option is enabled the OneClick values will be displayed at the payment method itself, instead of at the top of the page. Please note, not all payment methods currently support the OneClick functionality. OneClick Confguration Confgure which payment methods will display a 'store details' options to store the details for OneClick payments. Airline specifc options Show airline data on payment pages Displays the airline data felds on the HPP Show airline felds on callcenter page Displays the airline data felds on the callcenter page POS specifc options Show POS felds on callcenter page Displays the POS data felds on the callcenter page 3.2.2. Extra Options **You must save the Skin before clicking on the any of the following settings.** Payment Methods The Payment Methods confguration gives you control over which payment methods will be shown by default, the order in which they are displayed, the minimum/maximum amounts that you want to accept per payment method, and if you want to charge a surcharge per payment method. 12 / 28
Custom Fields Custom felds are a powerful feature of the payment pages that allow you to add form felds to the HPP. These will be sent to you before fnal payment submission for approval; you may use this feature to capture any additional data or permissions that you may require, such as collecting shipping data, forcing the shopper to accept terms and conditions, or checking a validation code. Any form feld whose name attribute is prefxed with customfelds. is considered to be a custom feld. Custom felds are added as HTML to the page in an include fle which is named customfelds.txt (or a localised variant, e.g. customfelds_nl.txt). See Appendix E-1 for an example. The contents of the custom felds are sent as a SOAP Web Service request to a URL of your choice as confgured using the Custom Fields link on the Edit Skin page. See Appendix E-2 for an example. If you respond with [accepted] the payment is allowed to continue. If not, you can specify which felds failed validation and the validation messages to display. See Appendix E-3 for an example of the response. If you need to store this data you must do so at this point, the data cannot be sent to you via the Notifcation server. Download Skin Takes you to the Download Skin page as described above. Remove Skin Takes you to the Remove Skin page as described above. Edit Language Files The Adyen CA ofers a visual interface in which to view and modify the text strings in the Adyen standard language set. Languages that are not part of the standard set can be added via the Skin resource fle method explained in chapter 4. With the Skin selected click the Edit Language Files link in the Extra Options section. A table is shown with the following felds: key A unique identifer for the text string (e.g. button.continue). adyen default The text string Adyen associates with the key (e.g. Continue). merchant default The text string you associate with the key (if set); this overrides the Adyen default if set. Set the Merchant default value for each key whose text you wish to change from the Adyen default and, when done, click the save button. It is important to ensure that you save every 5 minutes to avoid your session from timing out, resulting in a loss of any changes that have not been saved. Every time you save a new version of the Skin will be created. For the -default- language the res/resource.properties fle in the Skin will be created/updated each time you save. To edit another language, choose its shopper locale from the Language drop-down list. A table is shown with the following felds: key A unique identifer for the text string (e.g. button.continue). adyen default The text string Adyen associates with the key (e.g. Continue). adyen [language] (e.g. adyen nl) The text string Adyen associates with the key for the language chosen (e.g. Continue). 13 / 28
merchant [language] (e.g. merchant nl) The text string you associate with the key for the language chosen (if set). This overrides the Adyen default if set. For each language you set merchant values for, a fle called resources_[language].properties will be created in the res directory of the Skin. For example, if shopper locale nl is chosen, a fle called resources_nl.properties in the res directory will be created. Please note that language translations for new keys that Adyen introduces may not be immediately available in all languages. Once you have completed editing the text string be sure to download the latest version of the Skin to your PC before making any further changes. This will ensure you have the updated Skin resource fles. 3.3. Testing a Skin It is possible to send a payment request to the HPP directly from the Skin editor. This is a very useful tool to quickly test the correct operation of the Skin and allows you to submit payments to the system prior to completing your integration with the HPP. This page also shows you the versions of the Skin that are currently deployed on the TEST and LIVE HPP servers. There is always a delay between saving a Skin or publishing it to the LIVE server. When the Latest Version value corresponds with the Currently on Test or Currently on Live version, all the latest changes have been deployed to that system. The test functionality is also useful in debugging any problems you may have with your integration since it produces a complete payment setup form against which you can compare your implementation. 14 / 28
4. Editing The Skin Files This chapter covers the basics of editing the Skin fles you downloaded from the Adyen CA. Adyen provides a number of example Skins should you need a reference or starting point. If your requirements are not too complex creating your Skin may simply consist of replacing a logo and one or two images. 4.1. Skin Files As described previously, a Skin is comprised of a number of fles that are uploaded in the Adyen CA as a ZIP archive with the following structure (assuming that the SkinCode of your Skin is 57Hw8sLg): css screen.css screen_ie6.css print.css img images of your choice 57Hw8sLg inc cheader.txt cfooter.txt pmheader.txt pmfooter.txt pmheader_en_gb.txt pmheader_de.txt etc... res resources.properties resources_de.properties resources_fr.properties etc... js custom.js javascript of your choice The contents of the ZIP fle must exactly match the layout above otherwise the fle will not be accepted when uploading to the Adyen CA. File names and directory names are case sensitive and, as a rule, extra subdirectories are not allowed and flenames should be composed of simple characters 2. Expected contents of each subdirectory: css This directory contains the customised stylesheets which will be included in each page. The main stylesheet is screen.css which is valid for the media type screen. Optionally you can also supply a print.css to format a print version of the page. The optional screen_ie6.css fle is included conditionally in Microsoft Internet Explorer version 6 or lower as a workaround for some non-standard interpretations of the CSS stylesheet standard. See Appendix B for details on how the stylesheets are included in the pages. 2 Specifcally only characters in the range [a-z A-Z 0-9_-.] 15 / 28
img Any images referenced in the stylesheets or HTML include fles can be uploaded via this directory. Filenames should be composed of simple characters. inc You may provide custom HTML content such as menus, shop links, navigation, etc. This directory contains the HTML fragments that enable you to do so. If an included fle is language dependent it is possible to supply an include for each language locale. For details of where these includes are inserted in the page see Appendix B. res This directory contains fles named resources_$localename.properties with text overrides for the text in payment pages. The main fle is resources.properties which overrides the default string (language locale en_gb). For overriding a string in French you create fle resources_fr.properties. The format of the resource fles, as well as the allowed overrides, are described below. js This directory contains the javascript code for the Skin, any custom javascript should be added to the custom.js fle which is included on each page. 4.2. Getting The Look Right Adyen has created a HTML framework which, when combined with the Skin fles, forms the HPP. The framework was designed to provide the maximum amount of fexibility when designing and creating your layout. Appendix B shows the HTML skeleton which generates each page and indicates where each element of the Skin fles are represented. Appendix C shows a visualisation of the HTML skeleton. However when the default fow model is modifed using a stylesheet virtually any layout can be created. 4.2.1. The reset.css Stylesheet If you examine the HTML in Appendix B you will see that the frst stylesheet included is reset.css. This stylesheet is always included to nullify the default HTML styling applied by the browser. Default styling can vary between browsers, so applying the reset.css stylesheet makes it much easier to create a layout which renders consistently across browsers. The source listing for reset.css is in Appendix D 3. 4.3. Creating And Editing Translations: Skin Resource File Skin resource fles can be created manually in the Skin. This method may be used for adding languages not supported in the Adyen CA. Refer to Appendix A for the standard language set. When creating the fles you state the key name and it's value, for example button.continue=continue. The set of keys (with default values) can be seen via the Adyen CA (see above) or by navigating to our support website at https://support.adyen.com/ and searching for Language Translations. The resource fles use the Latin 1 (ISO 8859-1) encoding but it is recommended that you treat them as US-ASCII only. This means that any character that is outside the US-ASCII set should be encoded in Unicode using the notation \u + UTF-16 code point. Thus é becomes \u00e9 and Ř becomes \u0158. File names are resources.properties for the default locale (en_gb). For other languages the locale is included in the flename as resources_fr.properties for French and resources_en_us.properties for US English. 3 You may notice that there are some simple stylesheet classes which do not strictly belong in reset.css. This is purely an optimisation to reduce the number of requests to the server. 16 / 28
4.4. Custom Payment Methods Adyen ofers an option to display custom payment methods on your payment page. Please see the Adyen Merchant Integration Manual for more details. After the Support Team has confgured your custom payment method you can set a custom payment method button and a custom payment method name. A custom payment method will always start with c_. For example your custom payment method is c_custompaymentmethod. 4.4.1. Button Image To change the button image that is displayed for a standard payment method or to add the image of your custom payment method, you must add the image fle to the img directory of your Skin. You will then need to add an extra style to your screen.css fle. The syntax of this style is:.pmb<paymentmethodname> { background-image: url("../img/<imagename>")!important; } For example, if your custom payment method name is c_mycustompayment and you have added an image fle mycustompayment.png to the img directory of your Skin, the style that you should add to your screen.css fle is:.pmbc_mycustompayment { background-image: url("../img/mycustompayment.png")!important; } 4.4.2. Button Name The button name of your custom payment method must be added to the recources.properties fle. If you require specifc translations for diferent languages these may also be added to the resource fles. The syntax for the button name is: pm.<payment method name>.buttonname=<insert display name> For example, if your custom payment method is c_mycustompayment the entry in your resource fle would be: pm.c_mycustompayment.buttonname=my Custom Payment Method Name 4.4.3. Custom favicon.ico To override the default icon which is displayed in the URL area when on the payment pages place your favicon.ico fle 4 in the img directory of the Skin. It will be picked up automatically by the payment pages. 4.5. Payment Detail Reminder Email Please see the Adyen Email Manual for more details about using and Skinning the payment detail reminder email. 4 If you don't have tools to create a custom favicon.ico fle, you can generate one online at: http://www.favicon.cc/ 17 / 28
5. A/B Testing To analyse and optimise the conversion rate the Adyen HPPs support A/B testing. To create an A/B testing confguration click the Create new A/B testing confguration link on the List tab; enter the Description and HMAC key, and then click the Create New A/B confguration on TEST button. The system will generate a new wrapper Skin Code and return you to the List tab. Once you have created an A/B testing confguration, it must be updated to set the Skins to use and the distribution of payment requests. Click the A/B testing confguration Skin Code to edit the settings as you would with a regular Skin. From the Edit A/B testing confguration screen click Confgure Distribution to confgure how the shoppers are distributed between the diferent regular Skins. The Skin Codes that are available are listed in the Deselected Skins column, select the Skin Codes that are to be used and click the --> arrow to move them to the Selected Skins column. You will note that as you add each Skin the percentage distribution appears to the right of the Skin Codes and a slide scale appears below it, so that you can adjust the distribution. There is a slider for each Skin. A/B testing confguraton Skin A (40%) Skin B (30%) Skin C (30%) 5.1. Setting Up The Payment When you want to use A/B testing use the Skin Code and HMAC key of the A/B testing confguration to set up a payment session. When the shopper reaches the HPP the Skin Code of the A/B testing confguration is randomly replaced by one of the Skins confgured within it. 5.2. Payment Completion Due to the Skin Code of the A/B testing confguration being replaced by one of the confgured Skins, once the shopper reaches the HPP the remainder of the payment session will continue as if the regular Skin Code was submitted in the payment session request. As such, the Skin Code and HMAC key of the regular Skin will be used in the result URL. 5.3. View Results After running the A/B test for the necessary period of time you can view the results and start analysing them. This is done by navigating to the Reports menu, Conversion tab, and then selecting the Skin Comparison option in the Adyen CA. 18 / 28
6. Publishing The Skin To LIVE If you are satisfed with the way the Skin operates on the TEST system you can publish the Skin to the LIVE system. Please note, the publish-to-live operation does not change any settings, it replicates the Skin as it is on the TEST environment to the LIVE environment. Ensure that the relevant felds in the Properties on Live Only have been populated and click the Save Skin to Test button. Click the Publish tab. Click the Publish to Live button. 19 / 28
7. Getting Started With Customisations When the Skin is generated, the default settings render as follows: Once you have downloaded the Skin you can edit the fles and directories to customise it; here are some quick changes that you can easily implement. 20 / 28
7.1. How To Change The Header Image 1. Save the header image that you want to use in the img directory of the Skin fles 2. Update the screen.css fle to reference your header image: # logoheader: { height: 118px; background: url("../img/<imagename>"); background-position: left; background-repeat: no-repeat; background-color: white; } 7.2. How To Change The Payment Method Logos 1. Save the logos you want to use in the img directory of the Skin fles 1. Update the screen.css fle to override the.pmb element as shown:.pmb<paymentmethodname> { background-image: url("../img/<imagename>"); width: 400px; height: 42px; padding-left: 85px; text-align: left; margin-bottom: 6px; font-size: 1.1em; background-color: transparent!important; } 7.3. How To Change The Font Colours 1. Update the screen.css fle to set the fonts you want to use: html { } font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; 21 / 28
7.4. How To Change The Pay Button 1. Save the logos you want to use in the img directory of the Skin fles 2. Update the screen.css fle to add the following line to the.paysubmit block:.paysubmit { background: url("../img/<imagename>"); background-repeat: no-repeat; height: 16px; width: 50px; font-size: 0px; border: 0px; } 7.5. How To Automatically Open The Credit Card Payment Option 1. Open the cfooter.txt fle that is saved in the inc folder of the Skin fles 2. Add the following script to the fle and save: </div> <script type="text/javascript"> if (collapsecard) { settimeout(function() { show(collapsecard, 'completecard.shtml', 'card', 'brandcodeundef'); }, 1000); } </script> 22 / 28
Appendix A: Standard Set of Languages Language ShopperLocale Language ShopperLocale Chinese Traditional zh Greek el Czech cz Hungarian hu Danish da Italian it Dutch nl Lithuanian li English British* en_gb Norwegian no English Canadian en_ca Polish pl English US en_us Portuguese pt Finnish f Russian ru French fr Slovak sk French Belgian fr_be Spanish es French Canadian fr_ca Swedish sv French Swiss fr_ch Thai th Frisian fy_nl Turkish tr German de Ukrainian uk * British English is the default shopperlocale 23 / 28
Appendix B: Payment Page HTML Skeleton <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>page Title</title> <link rel="stylesheet" media="screen" type="text/css" href="/hpp/css/reset.css" /> <link rel="stylesheet" media="screen" type="text/css" href="/sf/ $SkinCode/css/screen.css" /> <link rel="stylesheet" media="print" type="text/css" href="/sf/ $SkinCode/css/print.css" /> <script type="text/javascript" src="/hpp/js/default.js"></script> <script type="text/javascript" src="/sf/$skincode/js/custom.js"></script> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/sf/$skincode/css/screen_ie6.css" /> <![endif]--> </head> <body> <!-- ### inc/cheader_[locale].txt or inc/cheader.txt (fallback) ### --> <form id="pageform" action="" method="post" onsubmit="return formvalidate(this);"> <script type="text/javascript"> //<![CDATA[ if (notnull(document.getelementbyid('pageform'))) { document.getelementbyid('pageform').setattribute("autocomplete","off"); } //]]> </script> <div id="content"> <div id="pmcontent"> <!-- ### inc/pmheader_[locale].txt or in/pmheader.txt (fallback) ### --> <div class="paddiv1"></div> <!-- ==================== --> <!-- Adyen Main Content --> <!-- ==================== --> <div class="paddiv2"></div> <!-- ### inc/pmfooter_[locale].txt or inc/pmfooter.txt (fallback) ### --> <!-- ### inc/customfields_[locale].txt or inc/customfields.txt (fallback) ### --> </div> </div> <div id="foot"> <div id="footc"> <div id="nextstep"> <div id="nextstepc">next Step Text</div> </div> <div id="footerb1div"> <input onclick="" type="submit" id="mainsubmit" value="continue" class="footerb nextb" /> </div> <div id="footerb2div"> <input onclick="" type="button" id="mainback" value="previous" class="footerb backb" /> </div> </div> </div> </form> <!-- ### inc/cfooter_[locale].txt or inc/cfooter.txt (fallback) ### --> </body> </html> *[locale] is the locale specifed in the payment setup as shopperlocale (see Adyen Merchant Integration Manual) 24 / 28
Appendix C: Visualisation of the HTML Structure 25 / 28
Appendix D: reset.css Listing @media screen { /* Don't forget to set a foreground and background color */ /* on the 'html' or 'body' element! */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,add ress,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: baseline; } a img,:link img,:visited img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol,ul { list-style: none; } q:before,q:after,blockquote:before,blockquote:after { content: ""; } } @media print {.hideforprint { } display: none;} /* Some Layout Shortcuts */.r { text-align: right; }.l { text-align: left; }.fr { float: right; }.fl { float: left; }.b { font-weight: bold; }.mid { vertical-align: middle; }.red { color: #c00; } 26 / 28
Appendix E: Custom Fields E-1: customfelds.txt <table id="basetable"> <tr> <td> <div class="fielddiv"> <input type="checkbox" name="customfields.subscribe" id="customfields.subscribe" value="true" CHECKED/>Next<br /> <input type="name" name="customfields.email" id="customfields.email" value=""/> Email address<br /> </div> </td> </tr> </table> E-2: SOAP Request <?xml version="1.0" encoding="utf-8"?> <soap:envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope" xmlns:xsd="http://www.w3.org/2001/xmlschema" xmlns:xsi="http://www.w3.org/2001/xmlschema -instance"> <soap:body> <check xmlns="http://customfields.services.adyen.com"> <Request> <customfields> <CustomField> <name>subscribe</name> <value>true</value> </CustomField> <CustomField> <name>vat</name> <value>nlxxxb01</value> </CustomField> </customfields> <merchantaccount>yourmerchantaccount</merchantaccount> <merchantreference>yourmerchantreference</merchantreference> <sessionfields> <sessionfield> <name>skincode</name> <value>wjcp5ytj</value> </sessionfield> <sessionfield> <name>countrycode</name> <value>nl</value> </sessionfield> <sessionfield> <name>paymentamount</name> <value>550</value> </sessionfield> <sessionfield> <name>currencycode</name> <value>eur</value> </sessionfield> 27 / 28
<sessionfield> <name>shopperemail</name> <value>test@test.com</value> </sessionfield> <sessionfield> <name>shopperreference</name> <value>user1234</value> </sessionfield> </sessionfields> </Request> </check> </soap:body> </soap:envelope> E-3: SOAP Response <?xml version="1.0" encoding="utf-8"?> <SOAP-ENV:Envelope xmlns:soap-env="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ns1="http://www.customfields.services.adyen.com"> <SOAP-ENV:Body> <ns1:checkresponse> <ns1:response> <ns1:customfields/> <ns1:response>[accepted]</ns1:response> <ns1:sessionfields/> </ns1:response> </ns1:checkresponse> </SOAP-ENV:Body> </SOAP-ENV:Envelope> 28 / 28