703 Apple Pay On the Web 04 FINALApple Pay on the web Nick Shearer iOS Apps and Frameworks Anders Carlsson WebKit. ... Send this URL to your web server to start merchant validation

© 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

System Frameworks #WWDC16

Session 703

Apple Pay on the web

Nick Shearer iOS Apps and FrameworksAnders Carlsson WebKit

Use this shape to mask safari screenshotsand place beneath the top bar



Overview

Introduction


Payment Processing

Designing for Apple Pay

Overview

Introduction

Apple Pay

Apple Pay

An easy, secure, and private way to pay

Apple Pay

An easy, secure, and private way to payPay in-store and within iOS apps

Apple Pay

An easy, secure, and private way to payPay in-store and within iOS appsEnables best in class eCommerce

Thousands of apps

Within appsApple Pay


Higher conversion rates


Higher conversion ratesIncreased engagement


Higher conversion ratesIncreased engagementHappier users

Outside appsApple Pay


A large amount of eCommerce takes place outside of apps


A large amount of eCommerce takes place outside of appsTypically, payment outside of apps is slow, laborious, and unclear


A large amount of eCommerce takes place outside of appsTypically, payment outside of apps is slow, laborious, and unclearWe're bringing Apple Pay to more places and more people

EverywhereApple Pay

EverywhereApple Pay

WatchKit

EverywhereApple Pay

ExtensionsWatchKit

EverywhereApple Pay

Extensions SafariWatchKit

EverywhereApple Pay


EverywhereApple Pay



eCommerce todayApple Pay on the web


Large amount of retail happens on the web


Large amount of retail happens on the webCheckouts are lengthy, complicated, and hard to use—especially on mobile


Large amount of retail happens on the webCheckouts are lengthy, complicated, and hard to use—especially on mobileUsers want the same level of security and privacy they get from apps

On the webApple Pay

On the webApple Pay

Use Apple Pay from your websites on iPhone and iPad

On the webApple Pay

Use Apple Pay from your websites on iPhone and iPadAvailable on Safari and SFSafariViewController

On the webApple Pay

Use Apple Pay from your websites on iPhone and iPadAvailable on Safari and SFSafariViewControllerSame Apple Pay experience, but on the web

Desktop eCommerceApple Pay in 2016


Many transactions happen on the desktop


Many transactions happen on the desktopApple Pay should be available wherever you pay

On macOSApple Pay

On macOSApple Pay

Available on any handoff-enabled Mac

On macOSApple Pay

Available on any handoff-enabled MacSupported in Safari

On macOSApple Pay

Available on any handoff-enabled MacSupported in SafariAuthorize payment on your iPhone or Apple Watch

DemoApple Pay on the web

Apple Pay 101The basics


Apple Pay provides you with a unique payment token


Apple Pay provides you with a unique payment tokenYou send this token to a payment processor


Apple Pay provides you with a unique payment tokenYou send this token to a payment processorThis token is encrypted to your merchant certificate and merchant identifier

Apple Pay 101Merchant identifier and certificate


The merchant identifier uniquely identifies you as a merchant

merchant.com.example.merchant.identifier


The merchant identifier uniquely identifies you as a merchantThe merchant certificate is used to encrypt your payment data



The merchant identifier uniquely identifies you as a merchantThe merchant certificate is used to encrypt your payment dataThis means only you can use your customer's Apple Pay tokens


App

Apple Pay within Apps

Apple Pay Server

Merchant orPSP Server

iOS

App


Apple Pay Server


iOS

App


Apple Pay Server


iOS

Display Payment Request

App


Apple Pay Server


iOS Authorize Payment

Generate Payment Data


App


Apple Pay Server



Rewrap Payment Data


Return Rewrapped

Payment


App


Apple Pay Server



Rewrap Payment Data

Receive Payment Data


Return Rewrapped

Payment


App


Apple Pay Server



Rewrap Payment Data

Receive Payment Data


Return Payment StatusCharge Payment

Return Rewrapped

Payment


App


Apple Pay Server



Rewrap Payment Data

Receive Payment Data Dismiss Sheet


Return Payment StatusCharge Payment

Return Rewrapped

Payment


On the webSite requirements


You have an Apple Developer Account


You have an Apple Developer AccountYour site is served over HTTPS


You have an Apple Developer AccountYour site is served over HTTPSYour site complies with the Apple Pay guidelines


You have an Apple Developer AccountYour site is served over HTTPSYour site complies with the Apple Pay guidelinesSome eCommerce platforms will support Apple Pay on your behalf

On the webRegistering your site


Create a merchant identifier and certificate at the developer portal


Create a merchant identifier and certificate at the developer portalRegister your domain and link it to your identifier


Create a merchant identifier and certificate at the developer portalRegister your domain and link it to your identifierObtain your domain's Apple Pay session certificate

Web Page


Apple Pay Server




Return Payment Status

Receive Payment Data Dismiss SheetDisplay Payment

Request

Charge Payment

Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server






Request

Charge Payment

Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server






Request

Charge Payment

Create Payment Request

Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server






Request Merchant Session


Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server







Get Merchant Session


Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment



Web Page


Apple Pay Server







Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment



Web Page


Apple Pay Server







Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Merchant ValidationWhy do we use it?


In an iOS app Apple Pay security is protected with signed entitlements


In an iOS app Apple Pay security is protected with signed entitlementsThis protects both users and merchants


In an iOS app Apple Pay security is protected with signed entitlementsThis protects both users and merchantsMerchant validation performs a similar function on the web

Performing Merchant Validation

Obtain the Apple Pay session generation URL from Safari

Get Apple Pay Server URL

Safari


Obtain the Apple Pay session generation URL from SafariSend this URL to your web server to start merchant validation



Safari Your Web Server

URL


Obtain the Apple Pay session generation URL from SafariSend this URL to your web server to start merchant validationOnce generated, return it back to the client to be consumed


Generate Merchant Session


Safari Your Web Server Apple Pay Server

Apple Pay Session CertificateURL

Merchant ValidationThe merchant session


A unique token that's linked with a single Apple Pay request from a site


A unique token that's linked with a single Apple Pay request from a siteUsed to ensure your site is still secure and available for Apple Pay


A unique token that's linked with a single Apple Pay request from a siteUsed to ensure your site is still secure and available for Apple PayRequired for every Apple Pay on the web payment


A unique token that's linked with a single Apple Pay request from a siteUsed to ensure your site is still secure and available for Apple PayRequired for every Apple Pay on the web paymentYour server requests the session from Apple's servers

Merchant ValidationTips


Always obtain the session request URL from the client, as it may vary


Always obtain the session request URL from the client, as it may varyOnly request a session when the user interacts with the Apple Pay button


Always obtain the session request URL from the client, as it may varyOnly request a session when the user interacts with the Apple Pay buttonDo not generate a merchant session client-side!

RecapGetting set up

RecapGetting set up

Made sure our site complies with Apple's requirements

RecapGetting set up

Made sure our site complies with Apple's requirementsCreated our merchant identifier and merchant certificate used for payment encryption

RecapGetting set up

Made sure our site complies with Apple's requirementsCreated our merchant identifier and merchant certificate used for payment encryptionCreated our Apple Pay session certificate linked to our domain name

RecapGetting set up

Made sure our site complies with Apple's requirementsCreated our merchant identifier and merchant certificate used for payment encryptionCreated our Apple Pay session certificate linked to our domain nameLearned how to validate our site for every Apple Pay payment

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Apple Pay API

Apple Pay API NEW

Available in Safari and SFSafariViewController on iOSAvailable in Safari on macOSSingle API entry point, ApplePaySession Influenced by PassKit API

Add to Cart

Checkout

Place OrderBack to shopping

Place OrderBack to shopping Place OrderPlace Order

Add To Cart

Add To Cart

Detecting Payment Availability

ApplePaySession.canMakePayments



if (window.ApplePaySession) {

if (ApplePaySession.canMakePayments()) {

showApplePayButtons();

}

}






}

}






}

}


ApplePaySession.canMakePayments only checks whether Apple Pay is supported• iOS: Secure Element• Mac: iPhone or Apple Watch


ApplePaySession.canMakePaymentsWithActiveCard

Takes a merchant identifierAsynchronous

Allowed usesDetecting Payment Availability

Defaulting to Apple Pay during checkoutAdding Apple Pay button to product page

// Detecting Payment Availability


var merchantIdentifier = 'merchant.com.canine-clothing';

var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);

promise.then(function (canMakePayments) {

if (canMakePayments)


});

}








});

}








});

}








});

}

Ensure this matches Slide 4, with the

addition of Apple Pay buttons

Update with new dog - photo on server: Design >

Photography > Purchased

Presenting the Payment Sheet

Create a new ApplePaySession JavaScript objectPass in an API version numberPass in a payment requestCall begin()

// Presenting the payment sheet

var paymentRequest = {

currencyCode: 'USD',

countryCode: 'US',

total: {

label: ‘Canine Clothing',

amount: '19.99'

},

supportedNetworks: ['amex', 'discover', 'masterCard', 'visa' ],

merchantCapabilities: [ 'supports3DS' ],

requiredShippingAddressFields: [ 'postalAddress' ]

};

var session = new ApplePaySession(1, paymentRequest);

session.begin();




countryCode: 'US',

total: {


amount: '19.99'

},




};


session.begin();




countryCode: 'US',

total: {


amount: '19.99'

},




};


session.begin();




countryCode: 'US',

total: {


amount: '19.99'

},




};


session.begin();




countryCode: 'US',

total: {


amount: '19.99'

},




};


session.begin();




countryCode: 'US',

total: {


amount: '19.99'

},




};


session.begin();

Creating an ApplePaySession can throw an exceptionPresenting the Payment Sheet

Called from an insecure pageCalled with an invalid payment request• Missing properties• Invalid properties• Unknown properties

Calling begin() can throw an exceptionPresenting the Payment Sheet

If not called in response to a user actionIf there is already an active sheet

Merchant Validation

A validatemerchant DOM event is dispatched to the sessionEvent has a validationURL propertyPerform validationCall completeMerchantValidation

// Merchant Validation

session.onvalidatemerchant = function (event) {

var promise = performValidation(event.validationURL);

promise.then(function (merchantSession) {

session.completeMerchantValidation(merchantSession);

});

}






});

}






});

}

Payment Authorization

A paymentauthorized DOM event is dispatched to the sessionEvent has a payment property• Shipping information• Payment method• Payment token

Call completePayment

// Payment Authorization

session.onpaymentauthorized = function (event) {

var promise = sendPaymentToken(event.payment.token);

promise.then(function (success) {

var status;

if (success)

status = ApplePaySession.STATUS_SUCCESS;

else

status = ApplePaySession.STATUS_FAILURE;

session.completePayment(status);

showConfirmation();

});

}





var status;

if (success)


else



showConfirmation();

});

}





var status;

if (success)


else



showConfirmation();

});

}





var status;

if (success)


else



showConfirmation();

});

}





var status;

if (success)


else



showConfirmation();

});

}





var status;

if (success)


else



showConfirmation();

});

}

Demo

Handling your paymentsPayment Processing

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

Web Page


Apple Pay Server









Charge Payment


Rewrap Payment Data

Return Rewrapped

Payment

The Payment Token

The Payment Token

Decrypt the payment token yourselfPass the raw data to your payment provider

Pass the encrypted payment token to your payment providerThey decrypt on your behalf and charge

US and EuropePayment Processors


Over forty payment processors support Apple Pay today


Over forty payment processors support Apple Pay todayMany providers offer SDKs for in-app payments


Over forty payment processors support Apple Pay todayMany providers offer SDKs for in-app paymentsFor a full list, see developer.apple.com/apple-pay

Asia PacificPayment Processors

eCommerce Platforms

eCommerce Platforms

Partnering with major eCommerce platforms

eCommerce Platforms

Partnering with major eCommerce platforms

eCommerce Platforms

Partnering with major eCommerce platformsDeeply integrated Apple Pay support

eCommerce Platforms

Partnering with major eCommerce platformsDeeply integrated Apple Pay supportNo developer account required

Testing Your Sites

The Apple Pay SandboxA new testing environment for Apple Pay

What's New with Wallet & Apple Pay Mission Tuesday 3:00PM

Testing Your Sites


Testing Your Sites

Apple Pay on the web is available in the Apple Pay Sandbox for testing


Testing Your Sites

Apple Pay on the web is available in the Apple Pay Sandbox for testingWill be rolled out to production closer to GM


Testing Your Sites

Apple Pay on the web is available in the Apple Pay Sandbox for testingWill be rolled out to production closer to GMFile bugs and send us feedback!


Building a compelling experienceDesigning for Apple Pay

Easy. Secure. Private.

The Three Phases of Apple Pay


Pre-payment


Pre-paymentPayment


Pre-paymentPaymentPost-payment

The Apple Pay buttonPre-Payment


Available in Cocoa Touch and WebKit


Available in Cocoa Touch and WebKitA variety of styles to suit your needs

div {

width: 150px;

height: 50px;

display: inline-block;

border: 1px solid black;

box-sizing: border-box;

}

.normal {

background-image: -webkit-named-image(apple-pay-logo-black);

background-size: 100% 100%;

background-repeat: no-repeat;

}

div {

width: 150px;

height: 50px;

display: inline-block;

border: 1px solid black;

box-sizing: border-box;

}

.normal {

background-image: -webkit-named-image(apple-pay-logo-black);

background-size: 100% 100%;

background-repeat: no-repeat;

}

Apple Pay Button

Apple Pay Button

Do’s• Use the built-in assets• Place wherever a user might

want to purchase

Apple Pay Button

Don’ts• Modify the button or

change its behavior• Suppress the button

Do’s• Use the built-in assets• Place wherever a user might

want to purchase

PlacementPre-Payment


Offer Apple Pay early in your purchase flow


Offer Apple Pay early in your purchase flowPlacement on product pages can increase user engagement


Offer Apple Pay early in your purchase flowPlacement on product pages can increase user engagementAlso place in regular checkout flows and in carts

Carts

Express Checkout

Product Pages

Account creationPre-Payment


Required registration is a major source of user friction


Required registration is a major source of user frictionApple Pay can help reduce abandoned purchases with guest checkout


Required registration is a major source of user frictionApple Pay can help reduce abandoned purchases with guest checkoutLeverage information collected in the Apple Pay sheet to create accounts post purchase

The Apple Pay SheetPayment


The Apple Pay sheet offers a flexible payment flow for merchants


The Apple Pay sheet offers a flexible payment flow for merchantsBut a consistent experience for users

Requesting Information


Request billing, shipping, and contact info if needed


Request billing, shipping, and contact info if neededSpecify shipping method or pickup


Request billing, shipping, and contact info if neededSpecify shipping method or pickupList shipping cost, tax, or discounts after the subtotal


Request billing, shipping, and contact info if neededSpecify shipping method or pickupList shipping cost, tax, or discounts after the subtotalMake sure you have a clear privacy policy

Shipping Method

Shipping Method

Users can pick from a provided list of methods

Shipping Method

Users can pick from a provided list of methodsMethods can be updated in response to address changes

Shipping Method

Users can pick from a provided list of methodsMethods can be updated in response to address changesMethods can be free

Shipping Method

Users can pick from a provided list of methodsMethods can be updated in response to address changesMethods can be freeNaming can be customized: shipping, pickup, and delivery

What to displaySummary Items


Use the summary items as a concise indication of what's to be charged


Use the summary items as a concise indication of what's to be chargedSub-totals, taxes, shipping, discounts


Use the summary items as a concise indication of what's to be chargedSub-totals, taxes, shipping, discountsNot a line by line itemized list


Use the summary items as a concise indication of what's to be chargedSub-totals, taxes, shipping, discountsNot a line by line itemized listKeep it concise


Use the summary items as a concise indication of what's to be chargedSub-totals, taxes, shipping, discountsNot a line by line itemized listKeep it conciseBe up-front and clear about charges

Unknown amountsSummary Items


Sometimes you don't know the final cost


Sometimes you don't know the final costUse the pending item type to indicate this


Sometimes you don't know the final costUse the pending item type to indicate thisMake estimates clear

Summary ItemsClear estimates

Summary ItemsClear estimates

Free and discounted itemsSummary Items


Items can be marked as free


Items can be marked as freeItems may also be negative, except for the total

Site Icon

Site Icon

Site Icon

Uses the existing Apple Touch icon

Site Icon

Uses the existing Apple Touch iconProvide in 180x180 and 120x120 sizes

Site Icon


<link rel="apple-touch-icon" sizes="120x120" href="[email protected]">

Site Icon




Semantic markupApple Pay Tips

Indicate your site takes Apple Pay with appropriate semantic markup

<!—- Open Graph —->

<meta property="og:type" content="og:product />

<meta property="og:title" content="Apple Watch" />

<meta property="product:price:amount" content="249.99" />

<meta property="product:price:currency" content="USD" />

<meta property="product:payment_method" content="ApplePay" />

Semantic markupApple Pay Tips

Indicate your site takes Apple Pay with appropriate semantic markup

<!—- Open Graph —->

<meta property="og:type" content="og:product />

<meta property="og:title" content="Apple Watch" />

<meta property="product:price:amount" content="249.99" />

<meta property="product:price:currency" content="USD" />

<meta property="product:payment_method" content="ApplePay" />

ConfirmationPost Payment


Reflect the appropriate status in the Apple Pay sheet


Reflect the appropriate status in the Apple Pay sheetLeverage information collected via Apple Pay sheet to offer account creation

Summary

Summary

Apple Pay Merchant Validation on the web

Summary

Apple Pay Merchant Validation on the webApplePaySession JavaScript API

Summary

Apple Pay Merchant Validation on the webApplePaySession JavaScript APITaking advantage of Apple Pay in your designs

More Information

https://developer.apple.com/wwdc16/703

Related Sessions

What’s New with Wallet & Apple Pay Mission Tuesday 3:00PM

Optimizing Web Content in Your App Mission Friday 4:00PM

Labs

Apple Pay Lab 1 Frameworks Lab B Tuesday 4:00PM

Apple Pay Lab 2 Frameworks Lab D Wednesday 9:00AM

Safari & WebKit Lab Fort Mason Wednesday 4:30PM

Safari & WebKit Lab Frameworks Lab C Friday 4:30PM

Documents

703 Apple Pay On the Web 04 FINALApple Pay on the web Nick Shearer iOS Apps and Frameworks Anders Carlsson WebKit. ... Send this URL to your web server to start merchant validation