Integrating Apple Pay JS Into A Website

Question

I'm looking into integrating Apple Pay into a website using the new Apple Pay JS SDK. The documentation is currently pretty minimal, concerning just the API declarations and how to instantiate a new ApplePaySession object.

Is there any example code available yet, or has anyone actually implemented this themselves yet, showing the typical API integration flow for a web application?

The only examples I've been able to find anything for all appear to be for third-party payment providers' own SDK integrations of Apple Pay.

A video about how to implement Apple Pay using the JS SDK is now available here: https://developer.apple.com/videos/play/wwdc2016/703/ — Martin Costello, Jun 16 '16 at 19:34
I'm sorry if this is a silly question, but where can I find the download to applepay.js? Or is it somehow available in XCode? — nils, Jun 27 '16 at 08:04
@nils It's built into the Safari browser in the same way "window" is built into browsers. There's no .js files to pull in. — Martin Costello, Jun 28 '16 at 12:30
Indeed... I'm planning on doing a blog post about the implementation I've been working on once the design is finalised and it's working end-to-end. — Martin Costello, Jun 28 '16 at 12:54
To avoid frustration if it isn't obvious: for now and in the future Apple Pay JS will only be available on IOS 10 or later. As others have said the API is built into Safari which (unfortunately) corresponds to iOS version and cannot be updated independently. This is why it's important to hide Apple Pay buttons until you can verify that `ApplePaySession.canMakePayments()` is available — Simon_Weaver, Jul 12 '16 at 21:58
I'm still working on my implementation, but I've found this GitHub repo useful in providing some assistance on implementing the client authentication with the Apple Pay servers: https://github.com/tomdale/apple-pay-merchant-session-server. The Apple Pay JS documentation has also been recently updated with more detail: https://developer.apple.com/reference/applepayjs. — Martin Costello, Jul 13 '16 at 10:20
Additionally, here's a "working demo" with the pieces together: https://justindonnelly.github.io/applepayjs/ — Paul Irish, Jul 27 '16 at 18:33
even today - iOS10 release date it looks like somebody just stopped halfway through documenting it. ugh — Simon_Weaver, Sep 13 '16 at 12:30
Even today in 2019 - It sucks to integrate and proper documentation — Vaibhavraj Roham, Jan 09 '19 at 06:23
Phoning in from 2020 ... same sparse docs and complete lack of good movement from Apple on this. — IncredibleHat, Jun 25 '20 at 17:25

score 31 · Accepted Answer · answered Aug 14 '16 at 22:02

31

I've published end-to-end ApplePayJS example code on github here

https://github.com/norfolkmustard/ApplePayJS

It uses PHP for the server-side part, needed for the initial vendor validation to begin the transaction. The rest is in javascript.

ApplePayJS != cash in the bank, just a means of getting a tokenised credit card from a customer. You hand that card number off to a third-party payment processor like stripe.com, braintreepayments.com, authorize.net

Cheers

answered Aug 14 '16 at 22:02

Stu Cartwright

346
3
3

1

This is excellent! Thank you. Apple's video on the matter didn't make clear exactly what was going on during the onvalidatemerchant promise, but your example is what I assumed but wasn't sure of. – Cory Fischer Oct 19 '16 at 01:27
1

This may be 2 years old but it's still the only bit of example code that actually filled in the last piece of the puzzle for me for getting a merchant session from Apple. Many thanks Stu. – dartacus Jun 13 '18 at 09:05
The apple pay payment session url is: https://apple-pay-gateway-cert.apple.com/paymentservices/startSession as of Dec 2019, /paymentServices/paymentSession is not working at least for me. – srk Dec 10 '19 at 21:13

Eugene Hauptmann · Answer 2 · 2016-07-03T02:39:55.407

6

The stable release will be available this fall probably.

First thing you want to do is to ensure that API is available in your browser:

if(ApplePaySession)
   ApplePaySession.canMakePayments()

Then the transaction itself:

var request = {
  countryCode: 'US',
  currencyCode: 'USD',
  supportedNetworks: ['visa', 'masterCard'],
  merchantCapabilities: ['supports3DS'],
  total: { label: 'Your Label', amount: '10.00' },
}
var session = new ApplePaySession(1, request);

This is from official website how to get it started: https://developer.apple.com/reference/applepayjs/applepaysession

After you have the session, you can control it:

And you can listen to events, and change your flow based on it:

I'm working on the integration between Apple Pay JS and Stripe API right now, so I'll release draft version to GitHub this summer.

edited Jul 03 '16 at 02:39

answered Jul 01 '16 at 03:34

Eugene Hauptmann

1,215
12
16

3

Additionally, here's a "working demo" with the pieces together: https://justindonnelly.github.io/applepayjs/ – Paul Irish Jul 27 '16 at 18:33
@PaulIrish Nice, you managed to get the Apple Pay button working nicely. I've had trouble with that (it crashed the tab in beta 2...). – Martin Costello Jul 28 '16 at 15:05
Unfortunately, this demo is no longer / not working and gives _The type of an object was incompatible with the expected type of the parameter associated to the object_ as error. I wonder is this is due to changes made in the iOS public beta? – Martin Aug 10 '16 at 17:47
@Martin what kind of iOS/OS X build you are using? – Eugene Hauptmann Aug 11 '16 at 05:37
Beta 3 made some properties deprecated "AddresesFields" -> "ContactFields". It's possible that those are now errors, instead of warnings. – Martin Costello Aug 11 '16 at 15:57
I'm using iOS 10 b 5 and also tried it with and without Content Blockers. No luck... – Martin Aug 11 '16 at 18:17

score 6 · Answer 3 · answered Oct 10 '16 at 13:12

The integration I've been working on has now finally been released, and there's a blog post I've written to go along with it as well as a GitHub project with an example integration using ASP.NET Core.

I hope others doing an Apple Pay JS integration themselves find it useful.

Integrating Apple Pay JS Into A Website

3 Answers3