-
Skin Creation Manual Version: 1.21 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.
-
Table of Contents 1. Introduction...............................................................................................................................................................................................................................................................................................................................................4 2. What Is A Skin?............................................................................................................................
-
Changelog Version Date Changes 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 • • • • 1.18 2012-05-14 • Added section about A/B testing 1.17 2010-09-21 • Added information about editing language files in CA • Extended Custom Fields section • Explained js directory and altered illustration 1.
-
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.
-
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 specific type of device or application, such as a mobile phone browser or point-of-sale terminal.
-
2.2.2. Multi-Page Payment Flow The Multi-Page Payment flow 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 flow 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.
-
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 identifies 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 files directly. 3.1.2.
-
3.1.3. Uploading A Skin Once you have modified the Skin files and saved it in a ZIP file (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 file you will receive feedback on which files were accepted and which files were rejected.
-
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 confirmation. Click the Remove button to proceed with the deletion. 3.2. Skin Configuration A Skin is identified by a unique combination of eight digits and letters known as the Skin Code.
-
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 Merchant Integration Manual for more information).
-
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 specific 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.
-
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 Configuration Configure which payment methods will display a 'store details' options to store the details for OneClick payments.
-
Custom Fields Custom fields are a powerful feature of the payment pages that allow you to add form fields to the HPP. These will be sent to you before final 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 field whose name attribute is prefixed with customfields. is considered to be a custom field.
-
• 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 file called resources_[language].properties will be created in the res directory of the Skin. For example, if shopper locale nl is chosen, a file called resources_nl.properties in the res directory will be created.
-
4. Editing The Skin Files This chapter covers the basics of editing the Skin files 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.
-
• img Any images referenced in the stylesheets or HTML include files 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 file 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.
-
4.4. Custom Payment Methods Adyen offers 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 configured 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.
-
5. A/B Testing To analyse and optimise the conversion rate the Adyen HPPs support A/B testing. To create an A/B testing configuration click the Create new A/B testing configuration link on the List tab; enter the Description and HMAC key, and then click the Create New A/B configuration on TEST button. The system will generate a new wrapper Skin Code and return you to the List tab.
-
6. Publishing The Skin To LIVE If you are satisfied 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 fields 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.
-
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 files and directories to customise it; here are some quick changes that you can easily implement.
-
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 files 2. Update the screen.css file to reference your header image: # logoheader: { height: 118px; background: url("../img/"); 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 files 1. Update the screen.
-
7.4. How To Change The Pay Button 1. Save the logos you want to use in the img directory of the Skin files 2. Update the screen.css file to add the following line to the .paySubmit block: .paySubmit { background: url("../img/"); 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 file that is saved in the inc folder of the Skin files 2.
-
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 fi 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 U
-
Appendix B: Payment Page HTML Skeleton
Page Title PAGE 25
Appendix C: Visualisation of the HTML Structure 25 / 28 Skin Creation Manual
-
Appendix D: reset.
-
Appendix E: Custom Fields E-1: customfields.txt
E-2: SOAP Request PAGE 28
shopperEmail test@test.com shopperReference user1234
E-3: SOAP Response
ManualShelf © 2013-2024
