{"title":"Skins for Hosted Payment Pages","category":"default","creationDate":1776961627,"content":"
\n

Hosted Payment Pages are no longer available<\/strong><\/p>\n

To accept payments through an Adyen-hosted page, use our Hosted Checkout<\/a>.<\/p>\n

This page is for the classic Hosted Payment Pages (HPP) integration, which has reached end-of-life. We are no longer processing transactions though HPP.<\/p>\n<\/div><\/div>\n

Skin is an interface overlay that is applied to the Adyen Hosted Payment Page (HPP) to customize it according to your brand guidelines and create a seamless consumer checkout experience. The skin comprises a set of custom HTML\/JavaScript fragments, images, and CSS.<\/p>\n

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.\u00a0<\/p>\n

The skin provides you with the ability to determine which payment methods are offered by default and in what order. Minimum and maximum transaction amounts per payment method, including a payment method-specific surcharge, can also be specified.<\/p>\n

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. Processing of multiple accounts is usually due to reconciliation or accounting requirements, which are not covered in this section.<\/p>\n

Managing skins in CA<\/h2>\n
\n

You can only access skin management from the test platform.<\/p>\n<\/div><\/div>\n

You can create, edit, upload, test, and publish your skins\u00a0in your\u00a0Customer Area<\/a>\u00a0> Account<\/strong> > Skins<\/strong>.<\/p>\n

The\u00a0List<\/strong>\u00a0tab identifies all the skins that have been created and\u00a0associated with the company or merchant account:<\/p>\n

    \n
  1. Click the\u00a0New\u00a0<\/strong>tab\u00a0and follow the instructions\u00a0Configuration\u00a0section. You may further customize the skin by manipulating the\u00a0Skin files<\/a>\u00a0directly.<\/li>\n
  2. You can edit a skin by clicking the skin code on the\u00a0List<\/strong>\u00a0tab. This tab includes the\u00a0Edit skin configuration<\/strong>\u00a0screen and populates the values entered while creating the Skin. The fields are editable if you set a shared secret, the input field is masked showing \"****\" rather than clear text.<\/li>\n
  3. After you have created a skin, you may download its files to edit them directly on your machine. For this, click the arrow pointing down in the\u00a0Download<\/strong>\u00a0column; the system shows the skin code, the description, and the file version for confirmation. Then click the\u00a0Download<\/strong>\u00a0button to proceed with the download.<\/li>\n
  4. After you have modified the skin files and saved it in a ZIP file, you may\u00a0upload it to the TEST system to combine it with the\u00a0current skin settings.<\/li>\n
  5. If\u00a0skin is no longer required, you may delete it; the system shows the skin code, the description, and the file version for confirmation. Click the\u00a0Remove<\/strong>\u00a0button to proceed.<\/li>\n<\/ol>\n

    Configuration<\/h2>\n

    A skin is identified by a unique combination of eight digits and letters known as the\u00a0skin code. It is a system-generated field; in the rare instance (for example when the randomly generated skin code contains an undesirable combination of characters) you may generate a new skin code by clicking the\u00a0New<\/strong>\u00a0tab again. Because a new skin is not saved until the\u00a0Save Skin to Test\u00a0<\/strong>button is clicked, you can safely repeat this a number of times.<\/p>\n

    When creating a skin, you are prompted to specify the following skin properties. You require the details for the LIVE environment when publishing the skin to LIVE, but not for initial testing within the TEST environment.<\/p>\n