This presentation was delivered at the EmberNYC meetup in July 2017. I go over how to use Stripe and Apple Pay to accept payments on the web, using an application we built using Glimmerjs: glimmer.shop-201.com

1. Ember NYC July 2017Ember NYC July 2017
Apple Pay on the Web with
Glimmer and Stripe
Cory Forsyth @bantic
201 Created

2. Ember NYC July 2017
Apple Pay On The Web: Overview
● Stripe + Apple Pay
○ Stripe simplifies domain verification
○ Stripe SDK wraps Apple Pay JS
○ Stripe Dashboard
● HTTPS everywhere
● Standard Stripe Flow
○ Token -> Your Backend -> Create Charge via Stripe API
○ Difference: Token is via Apple Pay, not Credit Card

3. Ember NYC July 2017
Market
● Stripe Fee: 2.9% + 30¢
● Apple Pay: No extra fees
● Browser support
○ iOS Devices with TouchID (iPhone 5S +, iPad Air 2 +)
○ MacBook Pro with Touchbar (since Oct 2016)
○ Safari only

4. Ember NYC July 2017
Tactical
1. Serve HTML via https from domain (LetsEncrypt makes this easy: blog post)
2. Use Stripe to verify your merchant domain
○ Stripe -> Payments -> ApplePay -> “+ Add New Domain”
○ Host the merchantid domain association file as described
○ (simpler than Apple’s official setup)
3. Serve Glimmer/Ember app via https
○ Locally: Generate self-signed cert (see this post)
○ Add `“ssl”: true` to .ember-cli
4. Backend via https

5. Ember NYC July 2017
Technical
● Safari provides custom JS API and CSS
● `window.ApplePaySession` API
○ `ApplePaySession.canMakePayments` — capable of making payments
○ `ApplePaySession.canMakePaymentsWithActiveCard` — capable and is set up
● CSS:
○ `-webkit-named-image(apple-pay-logo-white)`
○ `-webkit-appearance: -apple-pay-button;`

6. Ember NYC July 2017
Testing Locally
● Don’t do it! (kidding. mostly.)
● If you have a TouchBar:
○ Edit /etc/hosts to point 127.0.0.1 as your verified merchant domain
○ Use your Stripe Test Key
● No TouchBar:
○ Follow Stripe’s instructions on setting up a test user and
○ Verify the test user (use real email address)
○ Sign in to icloud.com
○ More info at this blog post
● Error messages from Apple are opaque

7. Ember NYC July 2017
Gotchas
● Local/Sandbox Testing is a challenge
● Stripe’s Sandbox Docs are incomplete
● Must start Apple Pay Session from user gesture (no async)
● Safari caches http vs https
● iCloud Sandbox Users are hard to create
○ And the Sandbox Apple Pay experience is lacking

8. Ember NYC July 2017
… Where’s Android Pay?
● Android Pay on the Web is...incomplete
● Potemkin Village?
● Stripe Support in Jan 2017: Officially “Not supported” (yet)
○ (Google’s Android Pay on the web docs: “Stripe is supported”)

9. Ember NYC July 2017

10. Ember NYC July 2017

11. Ember NYC July 2017

12. Ember NYC July 2017

13. Ember NYC July 2017
Demo: glimmer.shop-201.com

14. Ember NYC July 2017

15. Ember NYC July 2017

16. Ember NYC July 2017
Recommendations
● Do Use Stripe (good credit-card backup)
● Deploy Ember/Glimmer with Netlify
● SSL Cert with LetsEncrypt (easy with Netlify)

17. Ember NYC July 2017
Thank you!
● Blog: Things to Know When you build an eCommerce Mobile Web Site
● Blog: Serving Ember and Rails locally with SSL
● Blog: Building a Progressive Web App with Ember
● Apple Docs: Apple Pay Overview
● Stripe Docs: Apple Pay on the Web
● Our Glimmer app supporting Apple Pay on the Web: bodega-glimmer
These slides will be tweeted from @two_oh_one