Testing Apple Pay Locally

Prerequisites

• Access to dashboard.stripe.com for the contributions account(s)
• Safari on Mac running macOS Sierra or later.
• An iPhone (not an iPad; Safari doesn't support them yet) with a card in its Wallet paired to your Mac with Handoff, or a Mac with TouchID. Instructions on how to set this up can be found on Apple's Support website. If you don't have an iPhone with apple pay enabled yourself, see this document for information about the test phone

Steps

• install ngrok (brew install ngrok)
• in support-frontend/support-frontend, run yarn build-prod (make sure you are not already running the support-frontend javascript
• make a cup of tea (it takes a little while!)
• in support-frontend (root), start the server via sbt, support-frontend sub-folder connect project support-frontend, then devrun (sbt "project support-frontend" devrun)
• in a new tab run ngrok http 9210
• Go to the https://<ngrok generated sub domain>.ngrok.io address in Safari. This is where you will be testing that apple pay works.
• Disable CORs in the browser (Develop -> Disable Cross-Origin Restrictions)
• In another window go to https://dashboard.stripe.com/settings/payments/apple_pay
• Make sure you select the correct account in the account selector in the top left of the screen
• Go to Settings->Payment Methods -> Apple Pay
• Click + Add new domain
• Add the ngrok domain the site is hosted on (.ngrok.io)
• Click Download verification file... ('apple-developer-merchantid-domain-association')
• Use to replace file in location 'support-frontend/support-frontend/public/.well-known/apple-developer-merchantid-domain-association'
• Click Add, you should see this file being checked successfully (200) within the ngrok tab
• Go back to your Safari tab with your local version of support frontend hosted on it
• Click Single Contribution
• You should see Apple Pay

You can make a payment in this test mode and your card will not be charged, don’t worry!