QPAY Customization
QPAY Customization
If the default design and layout of QPAY Checkout Page does not fit the design and layout of your online shop, you have different possibilities to modify the design.
Customization using CSS
The responsive design of QPAY Checkout Page can be adjusted using a valid CSS file. The URL to this CSS file is stored on your server and must be accessible from the Internet. The CSS file is received via the given URL in the request parameter cssUrl from your server.
Neither url() functions nor @import directives are allowed in the CSS file. The recommendation is to customize your fonts using CSS templates; otherwise, security checks may last several minutes and lead to payment cancelation. |
These templates are available on GitHub.
Customization using templates
Aspects of the QPAY Checkout Page in the custom template files that can be customized:
-
Display and positioning of additional images.
-
Adjustment of page layout.
-
Use of merchant font styles.
-
Use of additional texts.
Based on these template files you can customize the following pages within the payment process of QPAY Checkout Page:
-
Info page-manages user input of your consumer during the payment process.
-
Intermediate page-displaying status information to your consumer during the payment process.
-
Payment page-displays the content of external pages like the authentication of 3-D Secure codes.
You’re not able to customize 3rd party pages which may be shown to your consumer during the payment process. |
Customization restrictions are:
-
Don’t use JavaScript for security reasons.
-
Don’t change the folder structure or file names. You can add additional files regarding images, or CSS if you need.
-
Don’t remove the tags in template files; otherwise, you may lose some functionality within the payment process.
-
All your changes between the tags will be ignored and replaced by our content.
-
The maximum file size of your zipped template must not exceed 2 MB.
-
External links are not permitted.
The customization of QPAY Checkout Page is an optional feature. Contact our sales team to enable the feature. After editing the template files, send them as a zipped file to our integration specialists, and after checking your customization they will configure QPAY Checkout Page according to your needs. |
Templates are available at GitHub and contain 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 the standard design of QPAY Checkout Page (don’t edit this file!)
-
QPAY Checkout Page elements that can be customized are:
-
Customizing the HTML files outside the QENTA specific tags to modify the markup and content of these HTML pages.
-
Customizing the CSS file named
merchant.css
within the folder/styles
. -
Customizing of image files within the folder
/img
which are not used within the QENTA tags.
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. |
QENTA Tags
With 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
and END
. These tags in between define the beginning and the end of page elements which are replaced with current values of the actual payment of your consumer when using QPAY Checkout Page.
<!--QENTA-[tagname]-BEGIN-→
…some dummy content…
<!--QENTA-[tagname]-END-→
In production mode, all content between these tags will be replaced by QPAY Checkout Page. |
QENTA Tag | qtemplate.info.html |
qtemplate.intermediate.html |
qtemplate.payment.html |
---|---|---|---|
|
Required |
Required |
Required |
|
Required |
Required |
Required |
|
Optional |
Optional |
Optional |
|
Optional |
Optional |
Optional |
|
Optional |
Optional |
Optional |
|
Optional |
Optional |
Optional |
|
Optional |
Optional |
Optional |
|
Optional |
Optional |
Optional |
|
Required |
Required |
Required |
|
Required |
Required |
Required |
|
Optional |
Optional |
Never |
|
Optional |
Never |
Never |
|
Required |
Never |
Never |
|
Required |
Never |
Never |
|
Never |
Required |
Never |
|
Required |
Required |
Never |
|
Required |
Never |
Never |
|
Required |
Never |
Never |
|
Never |
Never |
Required |
|
Optional |
Never |
Never |
Description Of QENTA Tags
QHEAD
Contains the title of the HTML page, includes the default CSS (/styles/qstyles.css
), includes the JavaScript files, and sets the content type.
QSCRIPTWARNING
Contains a warning text if JavaScript is not enabled within the web browser of your consumer.
QMERCHANTIMAGE, QMERCHANTIMAGE200X100
Contains the logo of your online shop, i.e. the image you alternatively define by setting a URL in the request parameter imageUrl. Depending on the tag you use in the template files your logo can have the following dimensions in pixel:
Tag | Image width | |
---|---|---|
|
QMERCHANTIMAGE |
95pixel |
|
QMERCHANTIMAGE200X100 |
200pixel |
You can use only one of these two tags on your customized checkout page. |
QBRANDIMAGEVERTICAL, QBRANDIMAGEHORIZONTAL, QBRANDIMAGE200X220, QBRANDIMAGE350X30
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 |
---|---|---|
|
90pixel |
220pixel |
|
220pixel |
90pixel |
|
200pixel |
220pixel |
|
350pixel |
30pixel |
You can use only one of these four tags on your customized checkout page. |
If you set a different background color for the HTML pages, you’re 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’re using as your background color, e.g. f0f0f0
.
QCERTIFICATE
Contains the certification logo of VeriSign.
QENTAINFO
Contains the logo of QENTA, which is required for each page within the QPAY Checkout Page.
QORDERINFO
Contains information about the current order of your consumer in your online shop. This is the text you send as request parameter displayText to QPAY Checkout Page. The amount, currency and current date are displayed to your consumer.
QORDIVIDER
Contains a visible horizontal line with the word or in the middle of it.
QINPUTHEAD
Contains the header for the input fields.
QINPUTFOOT
Contains the footer of the input fields.
QINFOTEXT
Contains information texts regarding the current state of the payment process.
QERRORTEXT
Contains information texts regarding error messages or critical information texts.
QINPUT
Contains input elements like text fields, option buttons, radio buttons, checkboxes or selection lists. These elements are always encapsulated within the tags QINPUTHEAD
and QINPUTFOOT
.
QCSSBUTTONS
Contains the buttons for the actions Cancel
, Back
and Next
. These buttons are defined as unordered list items and designed as buttons via corresponding CSS definitions.
QWAKEUPMESSAGE
Contains pages of 3rd party financial institutions like 3-D Secure for credit cards or online banking pages.
QCHECKOUTEXPRESS
Contains a list of express checkout and "Buy with …" buttons, only displayed on the credit card input page.