- No pages viewed yet
|The following chapters are only relevant if you do NOT use the responsive design of Wirecard Checkout Page. If you wish to switch to the responsive design, please contact our support teams.|
If the default design and layout of Wirecard Checkout Page do not fit to the design and layout of your online shop, you have the possibility to modify the current design of Wirecard Checkout Page.
This is done by customizing some template files in HTML and style sheets in CSS to your personal needs.
Within the custom template files (we provide to you) you are able to customize the following aspects of Wirecard Checkout Page:
Based on these template files you are able to customize the following pages within the payment process of Wirecard Checkout Page:
Please be aware that you are not able to customize 3rd party pages which may be shown to your consumer during the payment process. Typical examples of such 3rd party pages are handling the 3-D Secure process of credit cards or financial institution dependent online banking pages.
During your customization please be aware of the following rules:
To customize Wirecard Checkout Page you have to perform the following steps:
First of all, please download the zip-file containing the templates for customizations: customization template for desktop (MD5 Hash: 256417901739DC7FC801A81812DFB191)
This zip-file contains the following elements:
qtemplate.info.html… template for managing user input
qtemplate.intermediate.html… template for displaying intermediate information within the payment process
qtemplate.payment.html… template for displaying external pages within the payment process
/img… folder containing required images
/styles… folder containing CSS files
merchant.css… CSS file where you can add your CSS related customizations
qstyles.css… CSS File of standard design of Wirecard Checkout Page (please do not edit this file)
Within the HTML files (qtemplate.info.html, qtemplate.intermediate.html and qtemplate.payment.html) you can see HTML comments which start always with the text ”
QENTA” and end always with ”
BEGIN” or ”
END”. In between there are individual names, depending on the individual tag.
These tags define the beginning and the end of page elements which are replaced with current values of the actual payment of your consumer when using Wirecard Checkout Page. To help you during your customization of these template files, we have added typical dummy texts between these tags. In production mode all content between these tags will be replaced by Wirecard Checkout Page.
<!--QENTA-[tagname]-BEGIN--> ... some dummy content ... <!--QENTA-[tagname]-END-->
Within the customization possibilities you can modify the following elements:
merchant.css” within the folder ”
/img” which are not used within the Wirecard tags.
In order to avoid any display problems in your online shop resulting from the use of special characters it is required that you mask such special characters with HTML entities in the templates you forward to Wirecard.
For a list of HTML entities to mask special characters please visit HTML entities.
You can either open the HTML files directly in the file system in your favorite browser or upload them to your web server to test in real conditions like https.
Contains the title of the HTML page, the include of the default CSS (”
Contains the logo of your online shop, i.e. the image you alternatively define by setting a URL in the request parameter
Depending on the tag you use in the template files your logo can have the following dimensions in pixel:
|Tag||Image width||Image height|
Please be aware that you can use only one of these two tags in your customized checkout page.
Contains the logos of the brands of payment methods you offer in your online shop which may be displayed within the payment process. Depending on the tag you use within the template files the brand logos can have the following dimensions in pixel:
|Tag||Image width||Image height|
Please be aware that you can use only one of these four tags within your customized checkout page.
If you set a different background color for the HTML pages, you are able to set also the background color for the brand image containing the logos. This can be done by using ”
backgroundColor” as an additional optional request parameter. The value for this parameter is a hex-coded RGB color-value for the color you are using as your background color, e.g. ”
Contains the certification logo of VeriSign.
Contains the logo of Wirecard, which is required for each page within the Wirecard Checkout Page.
Contains information about the current order of your consumer in your online shop. This is the text you send as request parameter ”
displayText” to Wirecard Checkout Page. Additionally the amount, currency and current date are displayed to your consumer.
Contains a visible horizontal line with the word or in the middle of it, and is only displayed above the card holder data input fields when Masterpass is enabled.
Contains the header for the input fields.
Contains the footer of the input fields.
Contains information texts regarding the current state within the payment process.
Contains information texts regarding error messages or critical information texts.
Contains input elements like text fields, option buttons, radio buttons, check boxes or selection lists. These elements are always encapsulated within the tags ”
QINPUTHEAD” and ”
Contains the buttons for the actions “Cancel”, “Back” and “Next”. Please be aware that these buttons are defined as unordered list items and designed as buttons via corresponding CSS definitions.
Contains the buttons as images for the actions “Cancel”, “Back” and “Next”. These buttons are defined as images with the following names:
where [language] means the two-character shortcut for a language, e.g.
button_back_en.gif is the image for the back button in English.
Contains pages of 3rd party financial institutions like 3-D Secure for credit cards or online banking pages.
Contains a list of express checkout and “Buy with …” buttons. Only displayed on the credit card input page.