Apple Pay Example + Payments 2

Finally a simple but informative example of Apple Pay on the Web!
(Back End with Node.JS examples). The implementation is simple enough for you to able able to code this in any server-side language.

Environment setup

Now let's build the server, and a simple route to it, so when you go to localhost:8080/hello you will get “Hi!”

You will probably find a ton of example online of how to set up a simple API route but, to summarise what we did above, we essentially build a JSON API that lives on localhost:8080 and we used nodemon so that whenever we make changes to our files, the server is updated. You can find equivalents for a lot of languages. For example, for PHP you would probably just create a .PHP file and place it on an apache server.

Handle the payload from the front end

Let’s replace our /hello route with a route called /validateSession, and when a POST request is done to this route we will generate an Apple Pay session and return it. First, let's make sure that we receive the validation URL.

Go to your front end code and replace “BACKEND_URL_VALIDATE_SESSION” with “http://localhost:8080/validateSession”. Then click on the Apple Pay button and check your server to make sure you get the URL.

Validate Session

This might look a bit complicated, but this is essentially a POST request (I used axios here, but you can use any HTTP client you want) that has a body, and it also has a certificate and a certificate key. If you don’t know how to do this, a simple google search of “ {insert language name} POST request with certificates” should make it clear.

You might be wondering how I got the .pem .key and merchant id. This is more of a “setup” step, and depending on your payment provider this might require specific interactions, but you can find a full setup tutorial here, and that should get you the 3 pieces missing.

At this point, you should have a successful interaction and after the session is generated, your Apple Pay popup should require fingerprint/face id authentication.

Payment

So let's add another route for our payment:

We hardcoded a successful outcome for now, but this means that you should now get a full payment experience:

  • Show Popup ✅
  • Validate session (request biometrics)✅
  • Request a payment ✅
  • Hanle the successful outcome ✅

Full Dev Tutorial

tech/payments