Adding Apple Pay to my Mobile Website

We recently went through the process of integrating the Apple Pay experiene on a headless website and wanted to share the steps and our experience along the way.

As always, should you just need help, just say Hello.

Integrating Apple Pay into your mobile website payment portal can provide a seamless and secure checkout experience for your customers. Here's a step-by-step guide to help you get started:

1. Prerequisites

• Ensure your website uses HTTPS, as Apple Pay requires a secure connection.
• You need an Apple Developer account to access Apple Pay's features.
• Verify that your payment service provider (PSP) supports Apple Pay (many PSPs, such as Stripe, Braintree, and Adyen, offer built-in support for Apple Pay).

2. Register for Apple Pay

• Enroll in the Apple Developer Program: You’ll need to have an Apple Developer account to set up Apple Pay.
• Register a Merchant ID:
  1. Log in to your Apple Developer Account.
  2. Go to the “Certificates, Identifiers & Profiles” section.
  3. Create a new Merchant ID in the "Identifiers" section.

3. Set Up Payment Processing

• Choose a PSP that supports Apple Pay or configure your own payment processor. Popular PSPs like Stripe, Square, or Adyen make integration easy by offering Apple Pay SDKs.
• Configure your payment gateway to accept payments via Apple Pay.

4. Configure Apple Pay on Your Website

• Create an Apple Pay Session: You will need to create a session object on your website to handle payments securely. This typically involves setting up the ApplePaySession JavaScript API.

  Example:

  if (window.ApplePaySession) {
    var merchantIdentifier = 'merchant.com.example';
    var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
    promise.then(function (canMakePayments) {
      if (canMakePayments) {
        // Show the Apple Pay button
      }
    });
  }

• Display the Apple Pay Button: Once the user has confirmed that Apple Pay is available, dynamically show the Apple Pay button on your payment page.

  Example HTML:

  <button id="apple-pay-button">Buy with Apple Pay</button>

5. Handle the Payment Process

• Create a New Apple Pay Session: When a user clicks the Apple Pay button, start a session:

  const paymentRequest = {
    countryCode: 'US',
    currencyCode: 'USD',
    total: {
      label: 'Your Business Name',
      amount: '49.99',
    },
    supportedNetworks: ['visa', 'masterCard', 'amex'],
    merchantCapabilities: ['supports3DS'],
  };
  
  const session = new ApplePaySession(1, paymentRequest);

• Validate the Merchant: You need to validate the merchant with Apple's servers. This process is required to ensure that the request comes from an authorized merchant.

  session.onvalidatemerchant = (event) => {
    const validationURL = event.validationURL;
    // Call your server to request validation from Apple's servers
  };

• Complete the Payment: Once the user confirms the payment, process it through your payment gateway:

  session.onpaymentauthorized = (event) => {
    const payment = event.payment;
    // Process the payment with your payment provider
  };

6. Test the Integration

• Use Apple’s Sandbox Environment for testing before launching on your live site.
• Ensure you test different devices and scenarios (success, failure, etc.).

7. Deploy to Production

• After successfully testing your integration, deploy the code to your production environment.
• Monitor transactions and gather feedback to ensure everything works smoothly.

Notes:

• Make sure you follow Apple’s Human Interface Guidelines for Apple Pay to ensure a user-friendly checkout process.