Menu

User Tools

Create PDF

Site Tools


Differences

This shows you the differences between two versions of the page.

Go

Link to this comparison view

deprecated:wcp_integration_mobile [2017-04-03 13:41]
lkn created
deprecated:wcp_integration_mobile [2020-07-29 08:27] (current)
Line 1: Line 1:
-====== Customization for Mobile Devices ======+====== Integration for Mobile Devices ======
  
-This chapter is 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 [[:suport|support teams]].+^ The following chapters are only relevant if you do **NOT** use the responsive design of Wirecard Checkout Page or Wirecard Checkout Seamless. If you wish to switch to the responsive design, please contact our [[:support|support teams]]. 
 +===== General information =====
  
-==== Testing responsive and non-responsive design ====+No matter which business case is adopted by merchants or which consumer devices and technologies are involved, when using a mobile browser or a native web view both Wirecard Checkout Page and Wirecard Checkout Seamless can be integrated to your shop. 
  
-FIXME: WHR chapter nur unter deprecatedinteressiert neue Händler nicht+In general, all functions and features that Wirecard offers for desktop or notebook computers in an online shop, including back-end operationsmay also be implemented and used on mobile devices. 
  
-You can test both the responsive and non-responsive design of Wirecard Checkout Page with your customer ID using **two different IDs** for the optional request parameter ''**shopId**''.+===== Mobile demo shops =====
  
-For each shop ID a different design can be set to e.g. compare the two layouts.+Before starting integration you may want to have a look at our mobile demo shops for Wirecard Checkout Page and Wirecard Checkout Seamless.
  
-Then either+==== Wirecard Checkout Page mobile ====
  
-  * Randomly select one of the shop IDs when a consumer starts the payment. +For integrating Wirecard Checkout Page on mobile devices we offer 2 default layout options, which you may customize for your design and user interface needs:
-  * Or set the first shop ID in your online shop and change the configuration at a later time. +
-  * Or select a configuration depending on the country your consumer is resident.+
  
-Please contact our [[:support|support teams]] to configure two shop IDs+[[http://www.demoshop.at/smartphone|Wirecard Checkout Page mobile for Smartphones]] || 
-===== Prerequisites =====+| {{:mobile:integration:www.demoshop.at_smartphone.png?nolink&150|}} | {{ :demo:wcp-phone.png?direct&85 |}} | 
 +|  || 
 +| [[http://www.demoshop.at/tablet|Wirecard Checkout Page mobile for Tablets]] || 
 +| {{:mobile:integration:www.demoshop.at_tablet.png?nolink&150|}} |  {{ :demo:wcp-tablet.png?direct&200 |}} |
  
-  * [[http://i-guides-app01/deprecated:non-responsive:wcp_desktop#|Customization using templates]] +==== Wirecard Checkout Seamless mobile ====
-  * Enabling the otherwise deprecated request parameter "layout" for tablet and/or smartphone+
  
-===== General information ===== +Within Wirecard Checkout Seamless you may use your own HTML and CSS for integrating the required UI elements. For an example of a demo integration based on responsive design, see: 
-If the default design and layout of the Wirecard Checkout Page mobile do not fit to the design and layout of your online shop, you have the possibility to modify the current design of the Wirecard Checkout Page mobile by using customized templates for tablet and smartphone devices.+| [[http://www.demoshop.at/wcs|Wirecard Checkout Seamless]] || 
 +|{{:mobile:integration:www.demoshop.at_wcs.png?nolink&150|}} | {{ :demo:wcs-payment.png?direct&195 |}} | 
 + 
 +For all demo shops you may want to use our [[deprecated:wcs_demo_shops#|product demos]]. 
 + 
 +===== Integration ===== 
 + 
 +==== Supported mobile technologies ==== 
 + 
 +=== Mobile operating systems === 
 +Both, Wirecard Checkout Page and Wirecard Checkout Seamless can be used for mobile shops running on all current available mobile operating systems. Typical examples of supported mobile operating systems are e.g.: 
 +  * iOS by Apple 
 +  * Android by Google 
 +  * Windows mobile 
 +  * Blackberry 
 +  * Tizen by Samsung 
 +  * Sailfish 
 +  * Ubuntu touch 
 +  * ... 
 + 
 +=== Mobile browsers === 
 +Browsers on mobile devices are typically built for supporting HTML5, in this case you may use Wirecard Checkout Page and Wirecard Checkout Seamless on all current mobile browsers, e.g.: 
 +  * Google Chrome 
 +  * Firefox 
 +  * Opera 
 +  * Safari 
 +  * ... 
 + 
 +=== Native apps === 
 +Additionally you can integrate Wirecard Checkout Page and Wirecard Checkout Seamless within your native app. Typically this can be done by using a native web view user interface element. Therefore you may integrate into native apps developed in: 
 +  * Objective-C in iOS for iPhone, iPad and iPod 
 +  * Java for all Android based devices (like Samsung, Sony, HTC, etc.) 
 +  * C# for all Windows based mobile devices 
 +  * BlackBerry 
 +  * and others ... 
 + 
 + 
 +==== Available integration possibilities ==== 
 + 
 +=== Browser based integration === 
 + 
 +Browser based integrations are typically a kind of: 
 +  * A mobile web site or 
 +  * A mobile web app in HTML or 
 +  * A mobile web app in a native wrapper 
 + 
 +Our products may be integrated in almost the same way as in your desktop-based online shop.  
 + 
 +Typically for Wirecard Checkout Page your online shop is based on a responsive or adaptive design and you are using the ''smartphone'' or ''tablet'' option within the request parameter ''layout''. For Wirecard Checkout Seamless you may integrate the payment specific UI elements seamless to your online shop. 
 + 
 +=== Native app or cross-platform app integration === 
 + 
 +For this purpose you may integrate the checkout process within a native web view in your app. The flow from native to web view and back to native can be implemented using the following pattern: 
 + 
 +{{ :mobile:integration:mobile_solutions_final.png?direct |}} 
 + 
 +== Implementation pattern for web view in native apps == 
 +  - A native "Checkout" button is displayed for the consumer in the native GUI of the app. 
 +  - The consumer taps on this button. 
 +  - A web view containing Wirecard Checkout Page or Wirecard Checkout Seamless opens in the native app. 
 +  - The consumer is guided through the checkout process presented within the native web view. 
 +  - The return URL at the end of the checkout process is called in the web view. This can be one of the URLs you set in the following required request parameters: ''successUrl'', ''cancelUrl'', ''failureUrl'' or ''pendingUrl''. 
 +  - The native app responds to the loading of the URL and returns to native control and displays the result of the checkout process to the consumer within the native GUI of the native app. 
 + 
 +You may detect the value of the return URL by using callback functions offered by the native web view, which are called each time a new URL is loaded in the web view. 
 + 
 +  * For Android you can use the method ''onPageStarted'' of the [[http://developer.android.com/reference/android/webkit/WebViewClient.html|WebViewClient]]. 
 +  * For iOS you may want to have a look at ''webViewDidStartLoad:'' of the [[https://developer.apple.com/library/ios/documentation/uikit/reference/UIWebViewDelegate_Protocol/Reference/Reference.html|UIWebViewDelegate Protocol]]. 
 + 
 +Please be aware that we strongly recommend to use the ''confirmUrl'' to ensure that your web server is able to receive the result of the checkout process independently of the consumer's device and the behavior of your consumer in the native app. 
 + 
 +==== Improving usability ==== 
 + 
 +If you are able to identify your consumer in your mobile application (e.g. by their username/password), you have the possibility to simplify the checkout process for recurring consumers. 
 + 
 +This can be done by using the feature "recurring payment" which allows you to re-use an already successful payment of your consumer as a base for a new payment with the same payment type and data as the consumer used before. This has the advantage that your consumer does not need to re-enter the sensitive payment information for any further checkouts in your shop. 
 + 
 +You can find more details regarding recurring payments within the description of the operation ''recurPayment'' in: 
 +  * [[back-end_operations:transaction-based:start|Transaction-based operations]] for Wirecard Checkout Page and Wirecard Checkout Seamless 
 + 
 +==== Additional considerations ==== 
 + 
 +=== iframes and pop-up windows === 
 +Please be aware that for usability reasons it is not recommended to use either iframes or pop-up windows. Additionally within native web views it may not be possible to open pop-up windows out-of-the-box for security reasons. 
 + 
 +=== Specific configuration of your mobile shop === 
 +Additionally we recommend you to use a different value for the request parameter ''shopId'', so that our support can configure the behavior of the checkout process to your needs.  
 + 
 +Typically all external pages which are required by various financial service providers are done by a redirect of the current page and not opened in a new window
  
-===== Editing the templates =====+Another option you may want to use is a different set of payment methods you offer on the mobile device. This may especially be required if a specific payment method is not allowed to be used on mobile devices by the corresponding financial service provider.
  
-Downloading and unzipping the templates file for tablet and/or smartphone customization:+To set up a specific ''shopId'' for your mobile shop, please contact our [[:support|Support teams]].
  
-^ Device type  ^ Template                  ^ MD5 hash  ^  +=== "Non-mobile" external pages of relevant financial service provider === 
-| Tablet       | {{:wcp:customization_template_for_tablet-2016-06.zip|customization template for tablet}}      | 0179B614349F56EE78F682360F46AE2B | +Some external web sites of financial service providers, which need to be opened to your consumer (like entering 3-D Secure passwords), may be not suitably designed for some mobile devices.
-| Smartphone   | {{:wcp:customization_template_for_smartphone-2016-06.zip|customization template for smartphone}}  | F1866603075AB022EDC18C03A1AA3E12 |+
  
 +=== Native web view ===
 +When you are using Wirecard Checkout Page or Wirecard Checkout Seamless within a web view in a native app, please take into consideration that some payment methods require the opening of a pop-up window by the corresponding financial service provider. Due to the fact that opening a pop-up window is not supported within web views by default, these payment methods cannot be used in such configuration.
  
-These mobile templates are based on [[http://jquerymobile.com/|jQuery mobile]].+Currently the following payment methods are not suited to be used within a native web view: 
 +  * [[payment_methods:eps:start|eps-Überweisung]] 
 +  * [[payment_methods:tatrapay:start|TatraPay]] 
 +  * [[payment_methods:trustly:start|Trustly]]
  
-We are using the following standard themes: +[[payment_methods:ideal:start|iDEAL]] needs some additional steps to be implemented in native app. Open Wirecard Checkout Page in the system default browser. After the payment process your consumer is redirected to the app. The return URL at the end of the checkout process is called in web view. This can be one of the URLs you set in the required request parameters: successUrl, cancelUrl, failureUrl or pendingUrl. The native app responds to the loading of the URL and returns to native control and displays to the consumer the result of the checkout process within the native GUI of the native app.
-  * Theme for general layout +
-  * Theme b for the next button +
-  * Theme d for the QINFOTEXT and QORDERINFO (ui-body-d) +
-  * Theme e for cancel button and for QERRORTEXT on intermediate page (ui-body-e)+
  
-You can use [[http://jquerymobile.com/themeroller/|jQuery's Themeroller]] for visual editing of the themes. Additionally you have the possibility to directly edit the files in your favorite text editor.+If you still need these payment methods in mobile solution you can either switch to a browser-based integration or by opening a mobile browser and then returning back from the mobile browser to your native app within the result page.

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.