Integrate Apple Pay with JS SDK for direct merchants

Apple Pay integration

Apple Pay is a mobile payment and digital wallet service provided by Apple Inc.

Buyers can use Apple Pay to make payments on the web using the Safari web browser or an iOS device.

Sellers can use Apple Pay to sell:

• Physical goods, such as clothes and electronics.
• Digital goods, such as software.
• Intangible professional services, such as concerts or gym memberships.

Visit this site for more information about Apple Pay.

Supported countries and currencies

Apple Pay supports payments in 34 countries and 22 currencies:

• Countries: Australia, Austria, Belgium, Bulgaria, Canada, China, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hong Kong, Hungary, Ireland, Italy, Japan, Latvia, Liechtenstein, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Singapore, Slovakia, Slovenia, Spain, Sweden, United States, United Kingdom
• Currencies: AUD, BRL, CAD, CHF, CZK, DKK, EUR, GBP, HKD, HUF, ILS, JPY, MXN, NOK, NZD, PHP, PLN, SEK, SGD, THB, TWD, USD

How it works

The Apple Pay button shows up on your website when a customer uses the Safari web browser on an eligible device.

When your buyer selects the Apple Pay button:

1. Your website shows the buyer a payment sheet.
2. The buyer confirms the purchase details, such as the shipping address and payment method.
3. The buyer authorizes the purchase on the payment sheet.

The payment sheet helps streamline the checkout process by showing the customer the information needed to make the payment.

Payment sheets can show the user's name, address, shipping information, and email address. You can customize this payment sheet to include the user details and payment information you need for your Apple Pay integration.

Visit this site for more details about Apple Pay's compatibility.

Integration video

Watch our video tutorial for this integration:

1. Set up your sandbox account to accept Apple Pay

Before you can accept Apple Pay on your website, verify that your sandbox business account supports Apple Pay. Use the PayPal Developer Dashboard to set up your sandbox account to accept Apple Pay.

1. Log into the PayPal Developer Dashboard and go to your sandbox account.
2. Go to Apps & Credentials.
3. Make sure you are in the PayPal sandbox environment by selecting Sandbox at the top.
4. Select or create an app.
5. Scroll down to Features and check if Apple Pay is enabled. If Apple Pay isn't enabled, select the Apple Pay checkbox and select the "Save" link to enable Apple Pay.

If you created a sandbox business account through sandbox.paypal.com, and the Apple Pay status for the account shows as disabled, complete the sandbox onboarding steps to enable Apple Pay.

2. Getting started in your testing environment

Before you develop your Apple Pay on the Web integration, you need to complete Get started to set up your PayPal account, client ID, and sandbox emails for testing.

1. Download and host the domain association file for your sandbox environment.
2. Register your sandbox domain.
3. Create an Apple Pay sandbox account for testing. You don't need an Apple developer account to go live.

Download and host sandbox domain association file

1. Download the domain association file for your sandbox environment.
2. Host the file on your test environment at /.well-known/apple-developer-merchantid-domain-association.

Register your sandbox domains

1. Go to your PayPal Developer Dashboard.
2. Register all high-level domains and subdomains that show the Apple Pay button, such as businessexample.com and checkout.businessexample.com.
3. After the domains and subdomains are registered, you can test the Apple Pay buttons after you register the domains and subdomains.

Create Apple Pay sandbox account

Create an Apple Pay sandbox account on the Apple Developer website to get a test wallet and test cards to test your Apple Pay integration.

If you already have an Apple sandbox account, you can use that account and move on to the next step.

1. Create an Apple developer account.
2. Create an Apple sandbox account.
3. Get test cards from your Apple sandbox account.

3. Integrate Apple Pay checkout

Follow this integration process to add Apple Pay as a checkout option, customize the payment experience, and process payments.

Call the Orders API

To accept Apple Pay directly on your website, create API endpoints on your server that communicate with the PayPal Orders V2 API. These endpoints can create an order, authorize payment, and capture payment for an order.

Server-side example (Node.js)

The following example uses the PayPal Orders V2 API to add routes to an Express server for creating orders and capturing payments.

1import * as PayPal from "./paypal-api.js";
2
3/* Create Order route Handler */
4app.post("/api/orders", async (req, res) => {
5  const order = await PayPal.createOrder();
6  res.json(order);
7});
8
9/* Capture Order route Handler */
10app.post("/api/orders/:orderID/capture", async (req, res) => {
11  const {
12    orderID
13  } = req.params;
14  const captureData = await PayPal.capturePayment(orderID);
15  res.json(captureData);
16});

4. Set up your Apple Pay button

You need to Integrate with the Apple Pay JavaScript SDK and PayPal JavaScript SDK to add Apple Pay to your site.

Integrate PayPal JavaScript SDK

Use this script to integrate with the PayPal JavaScript SDK:

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD&buyer-country=US&merchant-id=SUB_MERCHANT_ID&components=applepay"></script>

Include applepay in the components list.

Integrate Apple JavaScript SDK

Use this script to integrate with the Apple JavaScript SDK:

1<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>

PayPal's Apple Pay component interacts with your JavaScript code in 4 areas:

1. Checking merchant eligibility for Apple Pay: paypal.Applepay().config().
2. Creating an Apple Pay session.
3. Handling the onvalidatemerchant callback: paypal.Applepay().validateMerchant().
4. Handling the onpaymentauthorized callback: paypal.Applepay().confirmOrder().

Before you show the Apple Pay button, make sure that you can create an Apple Pay instance and that the device can make an Apple Pay payment.

Use ApplePaySession.canMakePayments to check if the device can make Apple Pay payments.

Check for device and merchant eligibility before setting up the Apple Pay button.

To check eligibility, use the PayPal JavaScript SDK API paypal.Applepay().config().

1<div id="applepay-container"></div>

1if (!window.ApplePaySession) {
2  console.error('This device does not support Apple Pay');
3}
4if (!ApplePaySession.canMakePayments()) {
5  console.error('This device is not capable of making Apple Pay payments');
6}
7const applepay = paypal.Applepay();
8applepay.config()
9.then(applepayConfig => {
10  if (applepayConfig.isEligible) {
11    document.getElementById("applepay-container").innerHTML = '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en">';
12  }
13})
14.catch(applepayConfigError => {
15  console.error('Error while fetching Apple Pay configuration.');
16});

5. Create Apple Pay session

The ApplePaySession object manages the Apple Pay payment process on the web. Create a new ApplePaySession each time a buyer explicitly requests a payment, such as inside anonclick event. If you don't create anApplePaySession each time, you get a "Must create a newApplePaySession from a user gesture handler" JavaScript exception. For more information about this error, visit Apple's Creating an Apple Pay Session page.

For each ApplePaySession, create anApplePayPaymentRequest object, which includes information about payment processing capabilities, the payment amount, and shipping information.

The response object of the PayPal JavaScript SDK API paypal.Applepay().config() provides the following parameters in the ApplePayPaymentRequest object:

• countryCode
• merchantCapabilities
• supportedNetworks

1const paymentRequest = {
2  countryCode: applepayConfig.countryCode,
3  merchantCapabilities: applepayConfig.merchantCapabilities,
4  supportedNetworks: applepayConfig.supportedNetworks,
5  currencyCode: "USD",
6  requiredShippingContactFields: ["name", "phone", "email", "postalAddress"],
7  requiredBillingContactFields: ["postalAddress"],
8  total: {
9    label: "Demo",
10    type: "final",
11    amount: "100.00",
12  }
13};
14const session = new ApplePaySession(4, paymentRequest);

Include the new ApplePaySession inside a gesture handler, such as an onclick event or an addEventListener click handler.

Creating an ApplePaySession object throws a JavaScript exception if any of the following occurs:

• Any Apple Pay JavaScript API is called from an insecure page that doesn't use https.
• An incorrect payment request is passed. Payment requests are incorrect if they contain missing, unknown or invalid properties, or if the total amount is negative.

onvalidatemerchant callback

Use paypal.Applepay().validateMerchant() in the onvalidatemerchant callback to create a validated Apple Pay session object:

1session.onvalidatemerchant = (event) => {
2  applepay.validateMerchant({
3    validationUrl: event.validationURL,
4    displayName: "My Store"
5  })
6  .then(validateResult => {
7    session.completeMerchantValidation(validateResult.merchantSession);
8  })
9  .catch(validateError => {
10    console.error(validateError);
11    session.abort();
12  });
13};

onpaymentauthorized callback

Safari calls the onpaymentauthorized callback with an event object. The event object passes a token which you need to send to PayPal to confirm the order.

Capture the order using the PayPal Orders V2 API. Use paypal.Applepay().confirmOrder() to send the orderID, the Apple Pay token, billing contact details, and confirm the order.

1session.onpaymentauthorized = (event) => {
2    console.log('Your billing address is:', event.payment.billingContact);
3    console.log('Your shipping address is:', event.payment.shippingContact);
4    fetch("/api/orders", {
5      method: 'post' ,
6      body : {}
7    })
8    .then(res => res.json())
9    .then((createOrderData) => {
10      var orderId = createOrderData.id;
11      applepay.confirmOrder({
12        orderId: orderId,
13        token: event.payment.token,
14        billingContact: event.payment.billingContact
15      })
16      .then(confirmResult => {
17        session.completePayment(ApplePaySession.STATUS_SUCCESS);
18        fetch(`/api/orders/${orderId}/capture`, {
19          method: "post",
20        })
21        .then(res => res.json())
22        .then(captureResult => {
23          console.log(captureResult);
24        })
25        .catch(captureError => console.error(captureError));
26      })
27      .catch(confirmError => {
28        if (confirmError) {
29          console.error('Error confirming order with applepay token');
30          console.error(confirmError);
31          session.completePayment(ApplePaySession.STATUS_FAILURE);
32        }
33      });
34    });
35  };

6. Show the payment sheet

After you have created the Apple Pay session and added the callbacks, call the session.begin method to show the payment sheet. You can only call the begin method when a buyer explicitly requests a payment, such as inside an onclick event. The begin method throws a JavaScript exception if the buyer does not explicitly request the action:

1session.begin();

After the buyer starts a payment in the browser, they use their Apple device to authorize the payment.

Customize payment

Customize the payment experience using the Apple Pay JavaScript SDK.

Per Apple's development guidelines, your Apple Pay integration needs to follow these rules:

1. The last step of an Apple Pay transaction should be when the buyer uses the payment sheet to confirm the payment.
2. Don't ask the buyer to complete additional confirmation after they use the Apple Pay payment sheet to confirm the payment.
3. Don't allow changes to the order after the buyer confirms the payment on the Apple Pay payment sheet.

The commonly used customizations for Apple Pay are:

7. Test your integration

Test your Apple Pay integration in the PayPal sandbox and production environments to ensure that your app works correctly.

Use your personal sandbox login information during checkout to complete a payment using Apple Pay. Then, log into the sandbox site sandbox.paypal.com to see that the money has moved into your account.

1. Open your test page with the Safari web browser on an iOS device or computer.
2. Get a test card from your Apple sandbox account.
3. Add the test card to your Apple Wallet on your iOS device or by using the Safari browser on the web.
4. Tap the Apple Pay button to open a pop-up with the Apple Pay payment sheet.
5. Make a payment using the Apple Pay payment sheet.
6. If you have an additional confirmation page on your merchant website, continue to confirm the payment.
7. Log in to your merchant account and continue to your confirmation page to confirm that the money you used for payment showed up in the account.

8. Go live

Make Apple Pay available to buyers using your website or app.

Live environment

If you're a new merchant, sign up for a PayPal business account.

Use your personal production login information during checkout to complete an Apple Pay transaction. Then log into paypal.com to see the money move out of your account.

Getting started in your live environment

Verify any domain names in your live environment that will show an Apple Pay button. Apple Pay transactions only work on a domain and site registered to you.

• Download and host the domain association file for your live environment.
• Register your live domain on your PayPal Developer Dashboard.

Prerequisites

Create an app:

1. Log into the PayPal Developer Dashboard with your live PayPal account.
2. Select the Sandbox/Live toggle so it shows Live.
3. Go to Apps & Credentials.
4. Create an app similar to what you created in the sandbox. You don't need to log into a separate test account.

Download and host live domain association file

Host a domain association file for each high-level domain and subdomain that show the Apple Pay button.

1. Download the domain association file for your live environment.
2. Host the file on your live site for each domain and subdomain you want to register, at /.well-known/apple-developer-merchantid-domain-association. For example:
   • https://example.com/.well-known/apple-developer-merchantid-domain-association
   • https://subdomain.example.com/.well-known/apple-developer-merchantid-domain-association

Register your live domain on PayPal

Add all high-level domains that show the Apple Pay button.

1. Log into the PayPal Merchant Account.
2. Go to Payment Methods.
3. Select the Manage link in the Apple Pay section.
4. Select Add Domain and enter your domain name.
5. Select Register Domain. If registration fails, check that the domain association file is live and saved to the right place on your live site.

After your domain is registered:

• The domain appears under Domains registered with Apple Pay.
• Buyers can make payments using the Apple Pay button on the registered website.

Testing in your live environment

When testing a purchase in production, consider:

• The business account receiving money can't also make the purchase.
• If you create a personal account with the same information as the business account, those accounts might experience restrictions.

How to test Apple Pay payments in a live environment:

1. Open your test page with Safari on iOS or desktop.
2. Select the Apple Pay button to open a pop-up with the Apple Pay payment sheet.
3. Proceed with the Apple Pay checkout transaction.
4. If you have an additional confirmation page on your merchant website, confirm the payment.
5. Log in to your merchant account and confirm that the money has moved into that account.

Troubleshoot your integration

Make sure that there are no browser console warnings or errors. The JavaScript SDK configuration attributes have distinct validation checks for input formatting and values.

If the validation fails, the web browser's developer console shows warning messages that say which property is incorrect and what you need to do to address the issue. The library generally attempts to revert to the safe default values if missing or incorrect inputs exist.