Version 1.1. Mobile Optimisation

Transcription

1 Version 1.1 1

2 Table Of contents 1. Introduction. Page SmartPay mobile payment pages... Page A simple and straight forward Multi page..page 3 2. How to integrate...page Option 1: native applications.page Option 2: rich web applications Page GET URLs..Page 4 3. How to set-up your skins...page 6 4. Payment completion: dealing with redirection back to your app...page Returning shoppers.page Supported payment methods Page 8 5. Security...Page 9 6. Supported handsets..page Open source toolkits..page 11 2

3 Introduction What is the Barclaycard SmartPay Mobile Multi page and how can you integrate it into your mobile payment process? That is what this manual aims to explain. This is a technical manual that has been written primarily for IT personnel involved in integrating merchant applications with the Barclaycard SmartPay platform. Barclaycard SmartPay Multi page is used to receive payments by credit card and by other payment methods. Barclaycard SmartPay Multi page integration is broken down into the following sections: The Barclaycard SmartPay Multi page is an integral part of the overall Barclaycard SmartPay platform, so this manual should be viewed as an addition to the Barclaycard SmartPay Hosted Payment Page Integration Guide and the Barclaycard SmartPay Skins Guide. Barclaycard SmartPay Multi page: the concept behind the Barclaycard SmartPay Multi page and the basic implementation details needed to integrate from the merchants mobile application Security: the special considerations needed for use of Barclaycard SmartPay in a mobile payment environment, where security is crucial Handsets: the mobile toolkits and Barclaycard SmartPay Skin technology available to support various devices and operating systems. Many concepts referred to throughout this document are fully explained in our other manuals. To see the latest versions of these, please refer to our resource centre website: 3

4 Barclaycard SmartPay Multi page has been designed to provide a flexible, secure and easy way for customers to pay for goods and services with mobile devices. When making a payment from their mobile device, the customer is transferred to the Barclaycard SmartPay Multi page where payment is processed. Then, when the payment is successfully completed, the customer is redirected back to the mobile application. A simple and straightforward solution Barclaycard SmartPay uses a web-based redirect model because global mobile payment screens take a great deal of work to implement for individual merchants. There are also usually a number of specifics and security concerns involved that can limit flexibility. For instance, adding a new payment method with a native application can take significant implementation; with the Barclaycard SmartPay platform it occurs at the click of a button. The mobile industry is constantly evolving and that s why Barclaycard SmartPay maintains the payment screen on your behalf. Simply install it once and we ll do the rest. Merchants can benefit from this straightforward and simple mobile payments solution with just one easy instalment of the most feature-rich offering in the market. Skins for Barclaycard SmartPay Multi page To integrate seamlessly with your own mobile application, the look and feel of the Barclaycard SmartPay Multi page is fully customisable. These customisations are referred to as skins, each one consisting of a set of customer HTML/JavaScript fragments, images and CSS style sheets. There are some guidelines for using skins for Barclaycard SmartPay Multi page featured in this manual, but you ll find our full guidelines in the Barclaycard SmartPay Skins Guide, which can be found in the Barclaycard SmartPay resource centre at 4

5 Integration from your mobile app or mobile site to the Barclaycard SmartPay Multi page is very straightforward. There are two variations of this method with different processes, but the implementation is otherwise the same. Option 1: native applications The first option is to build a native application for a specific mobile device or operating system. This type of application often results in optimised graphics and improved user interaction. GET URLs The following snippet of code shows how a GET URL is loaded in a WebViewUI on an Apple device: With a native application, you ll be using a WebView object to load the hosted Barclaycard SmartPay multi page in a browser. This is similar to an iframe and can be integrated seamlessly. Option 2: rich web applications The second option is to use a rich web application. This type of application is HTML(5) based, so the user achieves asimilar experience but the application itself is often easier to implement, maintain and port to different mobile devices or operating systems. To generate a GET URL, you can use an intermediary page on your own infrastructure that s able to accept a payment request and redirect to the appropriate Barclaycard SmartPay page. On the Apple iphone, this can be done as follows: For this, you ll be redirecting your customers to the Barclaycard SmartPay Multi page as though it were just another page of the rich web application you are using. The request to load the Barclaycard SmartPay Multi page internet page is the same as a standard integration using the Hosted Payment Pages. This is described in the Barclaycard SmartPay Integration Manual please check the support pages for information on how to download. Currently Barclaycard SmartPay is using a multipage payment flow as demonstrated in the screens pictured on the previous page. The URL for this is The server-side script, running on pay.example.com, would retrieve the order information from your database based on the ID, and create a full post on Barclaycard SmartPay. If you only connect from a mobile site, you can skip this intermediate step altogether and redirect straight to the Barclaycard SmartPay hosted payment pages. 5

6 For a mobile payment page, you ll want the formatting to be minimal, giving a clear user experience. This can be achieved by changing the default skin, which is supplied in the following ways. Payment pages on an Android Create a new skin in the SmartPay back office, as covered in the Skins guide, and download the selected skin to back with the following changes: open the folder CSS and the file Screen.css search and replace the phrase width: 900px; with width: 100%; repeat this action throughout the file save the file within your Skin, go to the folder INC and make the following changes to these files: cheader.txt - remove all content and replace with <div> pmheader.txt - remove all content save the files, re-zip and upload the Skin. Now, in the back office we need to change your Skin to be optimised for the mobile market: Payment pages on an iphone under the selected Skin, select Edit you should now see the Edit Skin configuration change the Skin Profile to iphone/android select Save Skin and Test. 6

7 After payment has been completed, a redirection will return the customer to your website. For mobile sites, this redirection poses no problem the result URL (the URL used to redirect back to the website) is just a normal internet URL. For iphone apps, however, the application needs to be notified of completed payment. A technology called a custom URL scheme (such as myapp://dostuff) can provide a solution. The Barclaycard SmartPay payment server will trigger the redirection to the custom scheme. This sends a callback to your application, which can then close the WebView and continue processing the order. The result URL that redirects the user back to your website can be configured as above. This process is referred to in the Barclaycard SmartPay Integration Manual, where you can see exactly which parameters are present such as reference numbers and the amount. 7

8 Returning shoppers At the moment, there s no perfect payment method out there for mobile devices typing in credit card details can still be seen as a time-consuming obstacle to mobile shoppers. So to optimise this process and improve future conversions, Barclaycard SmartPay advises implementing a different payment process for returning customers. With this method, the first purchase serves as a kind of registration process. Then, each time a customer returns, they ll be offered the opportunity to checkout with their previous payment details. Returning transactions like these are called One Click Payments and can be viewed on the following screenshot. Some merchants may prefer not to show the payment page at all to recurring shoppers instead, you can make a Barclaycard SmartPay Recurring API call from the mobile application. With various payment methods like credit cards and wallets, payments can be debited from the user account without showing any payment page. Of course, in instances such as these, clear communication with the shopper is essential since the merchant is liable for these types of payments. In the future, this same Barclaycard SmartPay Recurring API call will make it possible to aggregate micro payments, which will be periodically debited from the shopper s account. For more information about this, please speak to your Barclaycard SmartPay account manager. Supported payment methods As you can see from the screenshot, credit cards are supported using a native interface that s very easy for the customer to use. Other payment methods that rely solely on user input are already included or are planned to be. Some examples of these include PayPal and Alipay Payment methods that rely on redirection can be used, but may impact negatively on the user experience. This is because a web page is used that has been optimised for larger screens. Barclaycard SmartPay is always developing its payment method offering on mobile payment pages, so please contact your account manager to find out the latest news. 8

9 Security is crucial when it comes to processing payments, especially when integrating from within a mobile app. It s important to remember that your code although compiled is running on an untrusted handset. This means that in theory your code or the traffic between app and server could be reverseengineered, and any sensitive information retrieved. For the shared key used to sign the initial POST i.e. to produce the HMAC signature to the Barclaycard SmartPay Multi page this is especially the case. In Diagram 1, Flow A assumes that the shared key used for the HMAC signature calculation is stored within the app. A possible attack to this setup would include five steps: 1. reverse-engineering the app to retrieve the shared key 2. Proceeding with a regular in-app payment 3. Intercepting the signature along with the POST data 4. Tampering with the payment data, e.g. lowering the payment amount 5. Calculating a new signature with the tampered payment data to perform the POST of this data and signature on Barclaycard SmartPay Multi page. 9

10 To avoid this type of security threat, the shared key must be stored on a server in a trusted environment. Once that s been done, there are two approaches to using the setup. API call to a trusted server to retrieve the signature (see Diagram 2 Flow B). Here, the unsigned data is passed to the server via an API call and a signed string of this data is returned to the mobile app. Then there s a redirection via POSTing of the signature and unsigned data to the Barclaycard SmartPay Multi page. POSTing and redirection to the Multi page via the trusted server. This includes a mapping of product and customer to a unique ID stored in a trusted server. There, the ID of the product is extracted and mapped to the product and corresponding amount, which are then used for the HMAC calculation along with other payment data. This procedure can be transparent to the customer, since the server performs this calculation and redirects to the Multi page via POS when the calculations are finished. For more information on the HMAC calculation and its use, please refer to the Barclaycard SmartPay Integration Manual. 10

11 The demand for mobile applications is increasing, and so more and more different devices and mobile operating systems are emerging all the time. Fortunately, there are various open source toolkits available that can optimise rich internet applications automatically for whichever device/mobile operating system is being used. The goal is to have the best of both worlds the optimised user experience of a native application combined with the flexibility of a rich internet application. Open source toolkits Open source toolkits consist of JavaScript and CSS files. Using these, developers build just one application (pages) that works across multiple devices. Some toolkits are also able to provide easy interfaces to otherwise complex features. Barclaycard SmartPay also uses toolkits for its Multi page, Merchants using the Barclaycard SmartPay platform can easily configure a skin to use this toolkit and thereby optimise payment pages for mobile applications. Our current default toolkit Barclaycard SmartPay optimises payment pages primarily for the iphone and Android platforms. Currently Barclaycard SmartPay uses the open source toolkit when iphone/android (for modern WebKit-based mobile browsers is selected). But we re soon extending with other toolkits such as which will add support for BlackBerry and Windows phones. A very simple HTML payment page is also available for older mobile phones. By selecting this option in the dropdown box, you can again redirect the shopper to select.shtml. 11

12 12