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