Menu

User Tools

Create PDF

Site Tools


Integration Possibilities for Desktop Devices

When integrating Wirecard Checkout Page into your online shop, we recommend to give some thought to the different display options since a properly displayed checkout page greatly influences usability and user experience. Poorly designed checkout pages which are difficult to access frustrate consumers and lead them to abandon your online shop without completing the checkout process.

In the following we offer you an overview on the different display options available for Wirecard Checkout Page on desktop devices, associated advantages and possible disadvantages you should try to avoid in order to keep user experience positive and optimize your online shop's conversion rate.

The term “desktop device”, in this context, refers to a laptop, a notebook or a desktop computer. Typically this device category has a large screen resolution and is equipped with a keyboard and a mouse or a touchpad.

For any questions and additional information on your possibilities to integrate Wirecard Checkout Page on desktop devices do not hesitate to contact our support teams.

Display options

When you integrate Wirecard Checkout Page into your online shop, you may choose between the following display options:

Iframe

  • Iframe is recommended to display Wirecard Checkout Page on desktop devices.
  • In your online shop, consumers first select the desired items or services you are selling and then start the checkout process usually by clicking the checkout button.
  • An iframe (inline frame) is used to embed another web site or web page within the current HTML document. Iframes can be configured by their size and with or without scrollbars independently of the surrounding page's scrollbars.
  • You can integrate Wirecard Checkout Page within an iframe in the HTML page of your online shop so that the whole checkout process is surrounded by your online shop and your consumer does not leave the shop.
  • Your online shop's logo is displayed within the Wirecard Checkout Page relating your consumers to your online shop.
  • After completing the payment process, consumers are redirected to your online shop and receive a relevant information on the result or state of the payment which is sent to the respective successUrl, cancelUrl, failureUrl or pendingUrl.
  • Please consider that some payment methods like sofort.com are not allowed to be used within an iframe.

Pop-up window

  • In your online shop, consumers first select the desired items or services your are selling and then start the checkout process usually by clicking the checkout button.
  • Wirecard Checkout Page opens as a new browser window (pop-up window) in front of the main window overlaying your online shop.
  • The Wirecard-URL is displayed in the address bar.
  • Your online shop's logo is displayed within the Wirecard Checkout Page relating your consumers to your online shop.
  • After completing the payment process, the pop-up window is closed by Wirecard, consumers are redirected to your online shop and receive a relevant information on the result or state of the payment which is sent to the respective successUrl, cancelUrl, failureUrl or pendingUrl.
  • Please consider that many web browsers usually offer an option to block pop-up windows which are typically enabled by default.

Page redirect

  • In your online shop, consumers first select the desired items or services you are selling and then start the checkout process usually by clicking the checkout button.
  • Wirecard Checkout Page opens by redirecting your consumers automatically from your online shop to Wirecard Checkout Page which replaces your online shop entirely in the browser window, i.e. Wirecard Checkout Page is opened in a different browser.
  • The Wirecard-URL is displayed the address bar.
  • Your online shop's logo is displayed within the Wirecard Checkout Page relating your consumers to your online shop.
  • After completing the payment process, consumers are redirected to your online shop and receive a relevant information on the result or state of the payment which is sent to the respective successUrl, cancelUrl, failureUrl or pendingUrl.
  • Please consider to use the user interface customization possibilities so that your consumer still has the feeling to “be in your shop”.

Iframe is recommended to display Wirecard Checkout Page. If you use page redirect or pop-up to display Wirecard Checkout Page we recommend to inform your consumers after clicking the checkout button that a forwarding to a safe page takes place to continue with the payment process. This will reassure your consumers of the trustworthiness of the checkout page and prevent them from canceling the transaction.

Advantages and disadvantages

The table below shows an overview of some of the advantages and disadvantages of the display options that are available for Wirecard Checkout Page:

Display option Advantages Disadvantages
Iframe The iframe does typically not fit the entire screen and thus relates the consumer to your online shop's web site in the surrounding page. This way the consumer will not be concerned as to whether he is still visiting your online shop or not. It might not be possible to open certain payment methods, such as PayPal, in an iframe.
High usability since pop-up blockers do not surpress transactions. This leads to an increased conversion rate since consumers stay in your online shop and continue shopping. Inadequate dimensions of the new page and the lack of scrollbars reduce user experience.
Pop-up window Pop-up windows can be moved over the screen by the consumer, even outside of the browser window. Reduced usability since pop-up blockers are very often enabled by default in your consumers' browsers which in turn leads to a drop in the conversion rate.
Often a new browser tab is opened instead of a pop-up window.
Page redirect Consumer can virtually see that the payment process is carried out by a trustworthy party. Consumer is rather likely to cancel the payment process if the layout of Wirecard Checkout Page differs significantly from your online shop's layout. Therefore it is advisable to customize Wirecard Checkout Page in line with your online shop's layout.
As a new browser window opens and a new URL appears in the address bar, consumers might become concerned about having left your online shop and cancel the transaction.

Consumers are rather likely to cancel the payment process if the layout of Wirecard Checkout Page differs from your online shop's layout. Therefore we recommend to customize Wirecard Checkout Page in line with your online shop's layout.

For more information and details refer to customization possibilities.

Display examples

For a better explanation and illustration of the different Wirecard Checkout Page display options on desktop devices, we invite you to have a look at the following examples:

Wirecard Checkout Page for mobile devices

In order to keep user experience positive when integrating Wirecard Checkout Page into smartphones and tablets you should consider some important issues and possible technical constraints summed up in Integration for mobile devices in order to keep user experience positive.

Display of payment method specific pages

For some payment methods additional pages from the financial service provider will need to be displayed to your consumer during the payment process with Wirecard Checkout Page. Depending on the three different display options described above, there are different ways these external pages can be displayed. In contrast to the integration possibilities of Wirecard Checkout Page, the display configuration is done by Wirecard. Please contact our support teams to change the default behavior.

If you need various display options for additional pages from the financial service provider a different shopId can be requested and a different configuration can be set. Please contact our support teams.

The configuration of iframe sizes and scrolling behaviour when displaying the fields to enter the 3-D Secure Code in Wirecard Checkout Page is also configured by our support teams.

Iframe

When integrating Wirecard Checkout Page in an iframe, the external pages of financial institutions can be displayed in a pop-up or as a page redirect in the iframe.

Pop-up is the default for all payment methods, except for cards with 3-D Secure which will be displayed as iframe within Wirecard Checkout Page (thus an iframe in an iframe). Optionally the input form for 3-D Secure code can be displayed as a page redirect.

Page redirect is optionally available for all payment methods, but not viable for

  • Some eps-Überweisung institutions, PayPal, iDEAL, and Przelewy24 which do not allow to be included within an iframe.
  • Trustly which will not redirect to your online shop after the payment process.
  • payolution: Installment which does not offer a button to cancel the payment process.
  • Sofort. which will break out of the iframe and display its content on the whole page (framekiller).

Pop-up window

When integrating Wirecard Checkout Page in a pop-up window, the external pages of financial institutions can be displayed as an additional pop-up or as a page redirect in the pop-up window.

Pop-up is the default for all payment methods resulting for your consumer in two pop-up windows. The exception being cards with 3-D Secure which will be displayed as iframe within Wirecard Checkout Page or optionally as a page redirect.

Page redirect is possible for all payment methods.

Page redirect

When integrating Wirecard Checkout Page as a page redirect, the external pages of financial institutions can be displayed as a pop-up or as another redirect to the financial service provider.

Pop-up is the default for all payment methods, except for cards with 3-D Secure which will be displayed as iframe within Wirecard Checkout Page or optionally as a page redirect.

Page redirect is optionally available for all payment methods with some exceptions because of impracticability:

  • Trustly will not redirect your consumer back to your online shop.
  • Some financial institutions providing eps-Überweisung and payolution: Installment may not provide a “cancel”-button and/or redirect your consumer back to your online shop.

Payment method overview

The table below summarizes all payment methods and the relevant display options for external pages. By default, all payment methods are displayed in a pop-up window except the authentication pages of credit cards forcing 3-D Secure. These external pages of financial service providers are only displayed as iframe or page redirect.

If you want to change the default settings, please contact our support teams.

Payment method Pop-up Page redirect Iframe in WCP Important information Legend
Bancontact o default
Credit cards forcing 3-D Secure o Displayed as ACS page. o optional
Credit cards without 3-D Secure No external pages. not possible
ePay.bg o
eps-Überweisung o Possibly no cancel button and may not allow to be opened in an iframe.
giropay o
iDEAL o
Maestro SecureCode o
Masterpass o
moneta.ru o
paybox No external pages.
payolution: Installment o No cancel/back to shop-button on payolution page.
payolution: Invoice No external pages.
PayPal o PayPal does not allow to be opened in an iframe.
paysafecard o
POLi o
Przelewy24 o Shows a blank page if displayed in iframe.
RatePAY: Installment o
RatePAY: Invoice No external pages.
SEPA Direct Debit No external pages.
Skrill Digital Wallet o
Sofort. o Breaks out of iframe (framekiller).
TatraPay o
Trustly o Your consumer is not directed back to your online shop after completing payment.
TrustPay o
Wirecard: Invoice No external pages.
Payment method Pop-up Page redirect Iframe Important information

This website uses cookies to deliver the best service to you. By continuing to browse the site, you are agreeing to our use of cookies.