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

QHEAD

Required

Required

Required

QSCRIPTWARNING

Required

Required

Required

QMERCHANTIMAGE

Optional

Optional

Optional

QMERCHANTIMAGE200X100

Optional

Optional

Optional

QBRANDIMAGEVERTICAL

Optional

Optional

Optional

QBRANDIMAGEHORIZONTAL

Optional

Optional

Optional

QBRANDIMAGE200X220

Optional

Optional

Optional

QBRANDIMAGE350X30

Optional

Optional

Optional

QCERTIFICATE

Required

Required

Required

QENTAINFO

Required

Required

Required

QORDERINFO

Optional

Optional

Never

QORDIVIDER

Optional

Never

Never

QINPUTHEAD

Required

Never

Never

QINPUTFOOT

Required

Never

Never

QINFOTEXT

Never

Required

Never

QERRORTEXT

Required

Required

Never

QINPUT

Required

Never

Never

QCSSBUTTONS

Required

Never

Never

QWAKEUPMESSAGE

Never

Never

Required

QCHECKOUTEXPRESS

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

Image height

QMERCHANTIMAGE

95pixel

65pixel

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

QBRANDIMAGEVERTICAL

90pixel

220pixel

QBRANDIMAGEHORIZONTAL

220pixel

90pixel

QBRANDIMAGE200X220

200pixel

220pixel

QBRANDIMAGE350X30

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.