Version 1 - Barclaycard · • pmheader.txt - remove all content – save the files, re-zip and...
Transcript of Version 1 - Barclaycard · • pmheader.txt - remove all content – save the files, re-zip and...
Mobile Optimisation 1
Version 1.1
Mobile Optimisation 2
Table Of contents
1. Introduction …………………………………………………………………………………………….…Page 3
1.1. SmartPay mobile payment pages..………………………………………………….……Page 3
1.2. A simple and straight forward Multi page.…………………………………………….Page 3
2. How to integrate….…………………………………….……………………………………………….Page 4
2.1. Option 1: native applications………………………………………………………………….Page 4
2.2.Option 2: rich web applications………………………………………………………………Page 4
2.3. GET URLs……………………………………………………………………………………………..Page 4
3. How to set-up your skins…………………………………………………………………………....Page 6
4. Payment completion: dealing with redirection back to your app………………....Page 7
4.1. Returning shoppers……………………………………………………………………………….Page 8
4.2. Supported payment methods………………………………………………………………Page 8
5. Security ……………………………………………………………………………………………………...Page 9
6. Supported handsets…………………………………………………………………………………..Page 11
6.1. Open source toolkits……………………………………………………………………………..Page 11
Mobile Optimisation 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:
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.
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.
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:
www.barclaycard.com/smartpay/documentation
Mobile Optimisation 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 www.barclaycard.com/smartpay/documentation
Mobile Optimisation 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.
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.
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 multi-
page payment flow as demonstrated in the screens
pictured on the previous page. The URL for this is
https://live.barclaycardsmartpay.com/hpp/select.shtml
GET URLs
The following snippet of code shows how a GET URL
is loaded in a WebViewUI on an Apple device:
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:
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.
Mobile Optimisation 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.
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:
– 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’.
Payment pages on an Android
Payment pages on an iPhone
Mobile Optimisation 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.
Mobile Optimisation 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.
Mobile Optimisation 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 reverse-
engineered, 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.
Mobile Optimisation 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.
Mobile Optimisation 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
http://webapp-net.com/ toolkit when
‘iPhone/Android (for modern WebKit-based mobile
browsers’ is selected).
But we’re soon extending with other toolkits such as
http://jquerymobile.com/, 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.
Mobile Optimisation 12