Adyen Skin Creation Manual

Version 1.16 Adyen B.V.

.......................................................................................................................... 11 Skin Files...................................................................... 15 Custom favicon...................................................................................................................................................13 Custom Payment Methods........................................... 3 Changelog.....css Listing. 15 Payment Detail Reminder Email....................... 7 Downloading a Skin..............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................16 Appendix A: Payment Page HTML Skeleton....................................css” Stylesheet.............................18 Appendix C: reset................V...................................................................5 Editing a Skin.....................................................................................................................................................................................ico............... 8 Deleting a Skin.................................................................................................. 9 3 Designing a Skin...............................................................................5 Creating a New Skin............................................................................................................ 11 Getting the Look Right................................. 8 Uploading a Skin.....................................................................14 Button Image................................................................................................................17 Appendix B: Visualisation of the HTML Structure............................................................................................................................................................................................................................................................................ 12 The “reset.............................................................. 14 Name........... 13 Overriding Text Strings and Translations................................................. 7 Custom Fields.................... 19 2 Copyright © Adyen B.............................................................................. 2010 ............................................................................................................. 3 1 What is a Skin?............................................................................................................................................................................................ 4 2 Creating and Uploading a Skin................................................................................................................................................................................................. 6 Payment Methods...................... 9 Testing a Skin........................................................................................................................................................................................................................................................................................................................................................................Table of Contents Introduction................................................................. 3 Audience............................................................................

Introduction Introduction The purpose of this manual is to help you create and set up a “skin” for the Adyen Hosted Payment Pages (HPPs). A skin is a set of look-and-feel customisations which consist sof a set of custom HTML/JavaScript fragments.com/links/documentation Audience This is a technical manual aimed at IT personnel involved in integrating merchants' systems with those at Adyen. This manual is a work-in-progress and not yet complete.16 Date 2010-08-10 Changes • • Added changelog and audience sections Manual reviewed for English and layout consistency Copyright © Adyen B.com/. Changelog Version 1.adyen. The latest version of this document is available at: https://support. This document does specifically does not cover: ● ● ● ● the life-cycle of a payment the Adyen Merchant Backoffice basic architecture of the Adyen systems integration with the Adyen systems These are documented separately on our support site at https://support.V. Configure the Skin: Set the configuration parameters on your Skin in the Adyen Merchant Backoffice. images and CSS stylesheets. 2010 3 . Publish the Skin: Learn how to upload and publish your Skin to the test and live systems. In the following chapters we will cover how you can: ● ● ● Design a Skin: Design your own Skin to look like your web site.adyen.

All text strings are internationalised in the payment pages and multiple default translations are offered. Multiple skins can be created even if you have more than one web shop. Likewise.V. 2010 .if you have more than one merchant account you can use the same skin to process payments for each of the accounts. A skin allows you to integrate the payment pages in the same style as your web site. you can have multiple skins processing payments for a single merchant account 1. or if you want to target a different type of device or application such as a mobile phone browser or point-of-sale terminal. Minimum and maximum transaction amounts per payment method (and even a payment method-specific surcharge) can also be specified. The skin also allows you to manipulate which payment methods are offered by default and in what order. 1 Processing over multiple accounts is usually due to reconciliation or accounting requirements. Skins aren't restricted to a single merchant account . 4 Copyright © Adyen B. Supporting multiple languages does not require having more than one skin. HTML fragments which are included in the payment can also be supplied in different languages and many of the default strings and their translations can be changed by overriding them in resource files (which can also be supplied as part of the skin). A skin is uniquely identified using a random combination of eight digits and letters known as the “skinCode”.What is a Skin? 1 What is a Skin? A skin is a combination of settings and files which define the look and feel of the Adyen Hosted Payment Pages. which are beyond the scope of this document.

and a result URL (or a continue-to URL) for TEST and LIVE> The result URL is the URL where you host your payment result page. If the value of the result URL is not set. 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. edit.Creating and Uploading a Skin 2 Creating and Uploading a Skin You can create. Illustration 1: Skins in the Adyen Merchant Backoffice Creating a New Skin When creating a skin you are prompted to enter a few details such as a description of your skin (for convenience only. See the Adyen Merchant Integration Manual for an example. The continue-to URL is only applicable if you use the default Adyen result page to display the payment result to the customer. test and publish your skin in the Adyen Customer Area (CA) Backoffice. so you can identify it if you have more than one). Copyright © Adyen B.V. 2010 5 . You can set the shared secret keys for HMAC computation for testing and the live environments (see the Adyen Merchant Integration manual for more information). Customers will be taken to this address after they complete payment. clicking on the “continue” button will bring them to this URL. the shared secrets for TEST and LIVE accounts for computation of the HMAC (signature). When the customer has seen the payment result. and if no result URL parameter value is passed with the Payment Request. Note that we do not append parameters of the payment status to the continue URL. the merchant account(s) which can be used with this skin. upload. the default Adyen result page will be used to display the payment result.

a random skinCode is generated. 6 Illustration 3: Editing a Skin Copyright © Adyen B. This allows you to edit the same fields you could when creating a Skin.V. In the rare case that the randomly generated skinCode contains an undesirable combination of characters you can choose a new one by clicking on the New tab again.Creating and Uploading a Skin When creating a skin. If a shared secret is set the input field will show (*******) rather than a blank field. Illustration 2: Creating a New Skin Editing a Skin You can edit a skin by clicking on its skinCode in the Skin listing screen. Since the new skin will not be saved until the Create New Skin submit button is pressed you can safely repeat this a number of times. 2010 .

what the minimum/maximum amounts are that you want to accept per payment method. These will be sent to you before final payment submission for approval. Payment Methods The Payment Methods configuration gives you control over which payment methods will be shown by default and in what order. and if you want to charge an additional cost (surcharge) per payment method. The contents of the custom fields are sent as a SOAP Web Service request to a URL of your choice which can be configured using the Custom Fields link on the Edit Skin page.V. You can use this to capture any data such as collecting shipping data. Illustration 4: Payment Methods Custom Fields Custom fields is a powerful feature of the payment pages that allows you to add form fields to the payment page. 2010 7 . etc.Creating and Uploading a Skin Below the basic skin settings are links to a number of extra options..txt). checking a validation code. If not you can specify which fields failed validation and what validation messages to show. Any form field whose name attribute is prefixed with customfields. Clicking on one of these links takes you to a separate configuration screen. Copyright © Adyen B. forcing the shopper to accept terms and conditions. Custom fields are added as HTML to the page in an include file which is named customfields. Please make sure you save any changes before following one of these links. is considered a custom field.. If you send an [accepted] response the payment is allowed to continue.txt (or a localised variant i.e. customfields_[locale].

From there you will combine the current skin settings with the uploaded ZIP file and save it to the TEST system. Uploading a Skin Once you have designed the skin and saved it in a ZIP file (see the next chapter) you can upload it. 2010 .Creating and Uploading a Skin Downloading a Skin Once you have created a skin you can download the skin to edit the files contained within it. This publish-to-live operation does not change any settings. for instance.V. or which has a different skinCode as its “root” directory. Illustration 6: Uploading a Skin When uploading the ZIP file you will receive feedback on which files were accepted and which files were rejected. Illustration 5: Downloading a Skin A downloaded skin is a good basis for the design of your own skin (see the next chapter). If. 8 Copyright © Adyen B. The download options is available via the skin overview (see Illustration 1) and under Extra options on the Edit tab of a skin (see Illustration 3). If you are satisfied with the way the skin operates on the test system you can publish the skin as it is on the TEST system directly to the LIVE system. Doing so will save the current upload with the current skin settings to the TEST environment. Instead it copies the skin as it is on the TEST environment to the LIVE environment. If you are satisfied that the accepted file list is correct you can confirm the result of the upload. you attempted to upload a ZIP file with the wrong directory structure. all files will be rejected.

When the Latest Version value corresponds with the Currently on Test or Currently on Live version. 2010 9 . The test functionality is also useful in debugging any problems you may have with your integration since it produces a complete payment setup form which you can compare your implementations against. This page also shows you what versions of the skin are currently deployed on the test and live Hosted Payment Page servers. The delete option is available via the skin overview (see Illustration 1) and under Extra options on the Edit tab of a skin (see Illustration 3).V.Creating and Uploading a Skin Deleting a Skin If a skin is not used anymore you can delete it. 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 Hosted Payment Pages. Testing a Skin Illustration 7: Deleting a Skin It is possible to send a payment request to the Hosted Payment Pages directly from the skin editor. all the latest changes have been deployed to that system. There is always a delay between saving a skin or publishing it to the LIVE server. Copyright © Adyen B.

Creating and Uploading a Skin Illustration 8: Testing a Skin 10 Copyright © Adyen B.V. 2010 .

properties etc..properties resources_fr.css screen_ie6. If your requirements are not too complex creating your skin may simply consist of replacing a logo and one or two images. Otherwise the file will not be accepted when uploading to the Adyen Merchant Backoffice.css print.. resources. As a rule no extra subdirectories are allowed and filenames should be composed of simple characters 2 .txt pmheader_en_GB. img 57Hw8sLg inc res The contents of the ZIP file must exactly match the layout above.txt etc.] Copyright © Adyen B.V. The skin files are uploaded in the Adyen Merchant Backoffice as a ZIP archive with the following structure (assuming that the skinCode of your Skin is 57Hw8sLg): css screen.txt cfooter.css images of your choice cheader. File names and directory names are case sensitive..txt pmheader_de.txt pmfooter..txt pmheader.Designing a Skin 3 Designing a Skin This chapter covers the basics of creating a skin.properties resources_de. Skin Files As described previously. 2 Specifically only characters in the range [a-zA-Z0-9_-. 2010 11 . a skin is comprised of a number of files. Although this assumes you are building a skin from scratch we have a number of example skins available to help you get started.

. ● ● ● Getting the Look Right Since you are able to supply your own stylesheets and images for your skin getting it to look the way you want it is easy to achieve. The main stylesheet is screen. etc. These files are combined with the basic (fixed) HTML structure for the pages. shop links. If an included file is language dependent it is possible to supply an include for each language locale.properties which overrides the default string (language locale en_GB).css which is valid for media type screen. Optionally you can also supply a print. 12 Copyright © Adyen B.properties. As well as images and stylesheets you can also add custom HTML content in key places in the pages which can hold menus.css is included conditionally in Microsoft Internet Explorer version 6 or lower to workaround some non-standard interpretations of the CSS stylesheet standard. The optional screen_ie6. The format of the resource files. inc This directory can contain HTML fragments which are included on each page. See Appendix A for details on how the stylesheets are included in the pages..properties with text overrides for the text in payment pages.Designing a Skin A quick run-down of the contents of each subdirectory: ● css This directory contains the customised stylesheets which will be included in each page. The main file is resources. Names of the files are your choice (limited to the characters per footnote 2). For details of where these includes are inserted in the page see Appendix A. 2010 . The HTML structure was created to allow maximum flexibility in creating a layout. img Any images referenced in the stylesheets or HTML includes can be included in this directory. res This directory contains files named resources_$localename. For overriding a string in French you create file resources_fr. are described below. as well as the allowed overrides.. disclaimers.css to produce a nice looking printout if a customer prints a page. navigation. We supply a number of stylesheet templates which you can base your design on.V.

The source listing for reset. This translates to a layout in the HTML default flow model shown in Appendix B. Overriding Text Strings and Translations By supplying internationalisation resource files in your skin you can override certain default strings in the payment pages. in the skin resource files using the default locale 3. However when the default flow model is modified using a stylesheet virtually any layout can be created.css is in Appendix C3. Because the default styling varies somewhat between browsers applying the reset. in the default resource files using the default locale 3 You may notice that there are some simple stylesheet classes which do not strictly belong in reset. If you override a string you will need to supply translations for the override in the languages your skin will be used with.V. the HPP will search for the string in the following locations: 1.css. in the skin resource files using the payment session locale 2.css stylesheet makes it much easier to create a layout which renders consistently on each browser. in the default resource files using the payment session locale 4. When displaying a message. The “reset. Copyright © Adyen B. This is purely an optimisation to reduce the number of requests to the server. This stylesheet is always included to “nullify” the default HTML styling applied by the browser. 2010 13 .css” Stylesheet If you examine the HTML in Appendix A you will see that the first stylesheet included is reset.Designing a Skin Illustration 9: Some Skin Style Examples Appendix A contains a listing of the HTML skeleton which generates each page.css.

Thus “é” becomes “\u00e9” and “Ř” becomes “\u0158”.header=: Please review and complete your payment For the total list please see our support website at https://support.png you also have to add an extra style to your screen..goods_shipped_before=Goods will be shipped before review.title=: Enter your Payment Details step2.pmB<paymentMethodName> { background-image: url(".cancel=cancel review. After your custom payment method is configured you can set a custom payment method button and a custom payment method name.properties for US English.header=: Please select your payment method step2.header=Ship Before Date review. 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.properties for French and resources_en_US. File names are resources.previous=previous button./img/<imageName>") !important. A custom payment method will always start with c_.goods_shipped_before. The resource files use the Latin 1 (ISO 8859-1) encoding but it is recommended that you treat them as USASCII only. Please see the Adyen Merchant Integration Manual for more details.com/ and search for Default Resource Entries.title=: Choose your Payment Method step1.Designing a Skin The set of keys (with default values) for which you can provide an override is: button. For other languages the locale is included in the filename as resources_fr.message=The goods listed will be shipped(.adyen. For example if you have added customPaymentMethod.total_payment_amount=Total payment amount review.title=: Review and Complete Your Payment step3.css file.header=: Enter your Payment Details step3. Button Image The image of your custom payment method must be added to the img directory of your skin..) nextstep=Next Step finalstep=Final Step step1=Step 1 step2=Step 2 step3=Step 3 step1.V.order_details=Order Details review. For example your custom payment method is c_customPaymentMethod.goods_shipped_before.. 2010 .pay=pay button. The format of this style must be: .properties for the default locale (en_GB). Custom Payment Methods Adyen offers an option to display custom payment methods on your payment page.continue=continue button. } 14 Copyright © Adyen B.

favicon./img/customPaymentMethod.ico file. if your custom payment method name is c_customPaymentMethod and your have added an image file customPaymentMethod. The key for the button name of your custom payment method is: pm.properties file.ico To override the default icon which is displayed in the URL area when on the payment pages place your favicon.ico Icon.. you can generate one online at http://www.Designing a Skin For example.png") !important.png to the img directory of your skin.<payment method name>.buttonName=Custom Payment Method Name Custom favicon.pmBc_customPaymentMethod { background-image: url(".V. If you need specific translations for different languages you can add it to those resource files as well. Illustration 10: Default favicon.buttonName For example. 2010 15 .c_customPaymentMethod. the style that you should add to your screen.css file is: . if your custom payment method is c_customPaymentMethod the entry in your resource file should look like: pm. 4 If you don't have tools to create a custom favicon. It will be picked up automatically by the payment pages. You should a least add it to the recources.ico file4 in the img directory of the skin. } Name The button name of your custom payment method must be added to your resources file.cc/ Copyright © Adyen B.

V. 2010 .Designing a Skin Payment Detail Reminder Email Please see the Adyen Email Manual for more details about using and skinning the payment detail reminder email. 16 Copyright © Adyen B.

getElementById('pageform').org/1999/xhtml " xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html.### inc/customfields_[locale].txt or inc/customfields.txt or inc/cfooter.js"></script> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="/sf/$skinCode/css/screen_ie6."off").### inc/cfooter_[locale].txt (fallback) ### --> <!-.0 Strict//EN" "http://www.w3.txt or in/pmheader.txt or inc/cheader. } //]]> </script> <div id="content"> <div id="pmcontent"> <!-.txt (fallback) ### --> <div class="padDiv1"></div> <!-. 2010 17 .==================== --> <!-."> <script type="text/javascript"> //<![CDATA[ if (notNull(document.css" /> <link rel="stylesheet" media="print" type="text/css" href="/sf/$skinCode/css/print.V.txt or inc/pmfooter.### inc/pmheader_[locale].Adyen Main Content --> <!-.dtd "> <html xmlns="http://www.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> <!-.w3.txt (fallback) ### --> <form id="pageform" action="" method="post" onsubmit="return formValidate(this).### inc/cheader_[locale]5.getElementById('pageform'))) { document.org/TR/xhtml1/DTD/xhtml1-strict.css" /> <script type="text/javascript" src="/hpp/js/default.==================== --> <div class="padDiv2"></div> <!-.js"></script> <script type="text/javascript" src="/sf/$skinCode/js/custom.Appendix A: Payment Page HTML Skeleton Appendix A: Payment Page HTML Skeleton <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.css" /> <link rel="stylesheet" media="screen" type="text/css" href="/sf/$skinCode/css/screen.### inc/pmfooter_[locale].css" /> <![endif]--> </head> <body> <!-. charset=utf-8" /> <title>Page Title</title> <link rel="stylesheet" media="screen" type="text/css" href="/hpp/css/reset.txt (fallback) ### --> </body> </html> 5 [locale] is the locale specified in the payment setup as shopperLocale (see Adyen Merchant Integration Manual) Copyright © Adyen B.setAttribute("autocomplete".

2010 .Appendix B: Visualisation of the HTML Structure Appendix B: Visualisation of the HTML Structure Illustration 11: Visual Representation of HTML Skeleton 18 Copyright © Adyen B.V.

span. } } @media print { . } .div.small. } .font.dl.ul { list-style: none.pre.thead.css Listing Appendix C: reset.cite.blockquote:after { content: "".q:after. } .tfoot. } table { border-collapse: collapse. dd.mid { vertical-align: middle.var.abbr. padding: 0.css Listing @media screen { /* Don't forget to set a foreground and background color */ /* on the 'html' or 'body' element! */ html.ins.acronym.tr.legend.a.del. } .em. text-align: left. } . font-size: 100%.kbd.h6.hideforprint { display: none.form. } Copyright © Adyen B.V.} } /* Some Layout Shortcuts */ .table.dt.fieldset.big.th.h3.caption.strike.l { text-align: left. font-weight: inherit.p.td { margin: 0.b { font-weight: bold.h1.fr { float: right.s.object.body. border-spacing: 0.applet.sup. border: 0.tbody.ul.ad dress.label.blockquote:before.tt.strong.sub.Appendix C: reset.iframe.dfn.:link img.h5.r { text-align: right.h2. line-height: 1. } .red { color: #c00. vertical-align: baseline. font-style: inherit.li.samp.h4. } ol. } a img.q. 2010 19 . font-family: inherit.img.fl { float: left.ol.blockquote. } q:before.code.:visited img { border: 0.

Sign up to vote on this title
UsefulNot useful