How to Set up Apple Pay on the Web for your Website (Stripe)

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

apple-pay-web-thumbnail

With the release of iOS 10 and macOS Sierra in September 2016, users can now seamlessly use Apple Pay to make purchases with Safari on their iPhone, iPad, or on their Mac.

We’ve enabled one of our webpages, GemTot beacons, to accept transactions via Apple Pay (Stripe is what we use to accept payments).

This post will show you the steps we took to enable Apple Pay on the Web with Stripe, and we hope this will help anyone else out there that is looking to enable Apple Pay for their website.

Note: Kudos to Stripe for sharing this guide on how to setup Apple Pay on the Web. You can follow their guide to set things up, but we did things in a slightly different order as it worked much better for us in testing and deploying.

Before you Begin:

Make sure that you have:

  • A Mac running on Sierra
  • An iPhone running on iOS 10 with a credit card in Wallet
  • Handoff is enabled on your Mac and iPhone. For instructions, visit this page.

Step 1: Verify your domain

1a. Download this domain association file and host it at /.well-known/apple-developer-merchantid-domain-association on your website. For example, we hosted this at https://passkit.com/.well-known/apple-developer-merchantid-domain-association.

1b. Log in to your Stripe dashboard and go to the Apple Pay tab in ‘Account Settings’. Enter your live secret key in the Stripe.api_key field as shown below:

curl https://api.stripe.com/v1/apple_pay/domains \
-u sk_live_••••••••••••••••••••••••: \
-d domain_name="example.com"

Upon success, you’ll see your domain listed.

apple-pay-web-verify-domain

Step 2: Set up the Apple Pay Sandbox

2a. Create an Apple developer account and log into iTunes Connect.

itunes-connect-login

2b. Select ‘Users and Roles’ and select ‘Sandbox Testers’ link. Click + to create a new test user and save. You’ll be using this email and password to test on your iPhone.

Screen Shot 2016-11-14 at 5.15.54 PM

Screen Shot 2016-11-14 at 5.17.01 PM

Screen Shot 2016-11-14 at 5.17.28 PM

2c. On your iPhone, open ‘Settings’ and select ‘iCloud’. Log in to iCloud using the test credentials you just created.

IMG_0029

2d. Go back to ‘Settings’ and select ‘Wallet & Apple Pay’. Tap ‘Add Credit or Debit Card’ and enter in the following test Visa card details manually:

  • Card number: 4761 1200 1000 0492
  • Expiration: 11/2022
  • CVV: 533

IMG_0030

Step 3: Add an Apple Pay button to your website

3a. Add the following to your CSS code. This allows you to use Safari’s built-in Apple Pay images.



<style>
  #apple-pay-button {
    display: none;
    background-color: black;
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-size: 100% 100%;
    background-origin: content-box;
    background-repeat: no-repeat;
    width: 100%;
    height: 44px;
    padding: 10px 0;
    border-radius: 10px;
  }
</style>


3b. Add the following HTML on your product page where you want the button to appear.

<button id="apple-pay-button"></button>

3c. Ensure that Stripe.js is included on this page.

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

3d. Once you’ve set your publishable key, use the checkAvailability function to determine whether or not to show an Apple Pay button.

Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

Stripe.applePay.checkAvailability(function(available) {
  if (available) {
    document.getElementById('apple-pay-button').style.display = 'block';
  }
});

Step 4: Start an Apple Pay Session

4a. Add this code in your product.js file to show the Apple Pay sheet when a user clicks on the payment button.

document.getElementById('apple-pay-button').addEventListener('click', beginApplePay);

4b. Create a PaymentRequest object. Total, countryCode, and currencyCode properties are required. Apple uses a formatted string to present prices in total.amount (e.g. ‘29.99’).

function beginApplePay() {
  var paymentRequest = {
    countryCode: 'US',
    currencyCode: 'USD',
    total: {
      label: 'Stripe.com',
      amount: '29.99'
    }
  };
  var session = ...; // continued below
}

4c. Use Stripe’s helper function buildSession to turn this payment request into an ApplePaySession. With the first argument, result, pass the Stripe token to your server and create a charge.

4d. Call the second parameter, completion, with ApplePaySession.STATUS_SUCCESS or ApplePaySession.STATUS_FAILURE depending on if your charge succeeded or failed.

Please refer to Stripe’s example here:

function beginApplePay() {
  var paymentRequest = ...; // see above

  var session = Stripe.applePay.buildSession(paymentRequest,
    function(result, completion) {

    $.post('/charges', { token: result.token.id }).done(function() {
      completion(ApplePaySession.STATUS_SUCCESS);
      // You can now redirect the user to a receipt page, etc.
      window.location.href = '/success.html';
    }).fail(function() {
      completion(ApplePaySession.STATUS_FAILURE);
    });

  }, function(error) {
    console.log(error.message);
  });

  session.begin();
}

Note:
The highlighted section above is your backend. The function variable result has already been returned from Apple and gone through the Stripe backend to setup a token ID that can be used to create a Stripe charge or be attached to a customer.

4e. Call begin() to show users your Apple Pay payment sheet. Note: before calling session.begin() any other callbacks can be added here https://developer.apple.com/reference/applepayjs/#1778093. Stripe takes care of onpaymentauthorized and onvalidatemerchant but all the others can be used to customize the experience.

And that’s it! As mentioned previously, these were the steps we took to enable Apple Pay on the Web for our site that accepts Stripe payments. Please refer to the Apple Pay website and Stripe documentation for more information.

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
  • Andreea

    Hello. I too have to integrate Apple Pay in my e-commerce website. When I tried to create a Certificate for the Apple Pay Sandbox/Development environment, the option for ‘Apple Pay Certificate’ was available only for the Production section when they asked ‘What kind of Certificate do you need?’. Also, when I created the merchant IDs, there weren’t any way to specify if I want to use that specific merchant ID for Sandbox or for Production. I ended up mistakenly creating 2 production certificates; can I revoke them without any problems ? I’m having difficulties finding useful information on the Apple forums, so any help with the Apple Pay certificates creation for Sandbox would be highly appreciated :)

    • Duncan Brown

      When building the site I also had trouble with sandbox mode. I think the idea is that you shouldn’t need certificates at all to work with sandbox mode, however it seemed not to work for me. I believe there may be some issue with stripe in this case as it was forcing me to have a certificate to use their code.

      To workaround and build locally, I hosted the live certificate on passkit.com then altered my hosts file to point passkit.com at my localhost. This allowed me to use the production certificate with my stripe test keys.

      As far as I know you should be able to revoke the extra certificate with no problem, it will just stop it from being used anywhere.

  • Mickey Mouse

    I’ve got a developer account without completed enrolment (fees not paid). Do I have to have a paid developer account to set up Apple Sandbox accounts?