You have to be an approved partner to integrate the Apple Pay SDK
Apple Pay works on Safari browsers and the following versions of iOS devices:
- macOS 10.14.1 and later.
- iOS 12.1 and later.
- Supported devices and where you can use them
Last updated: March 15th 2023, @ 4:50:11 pm
Apple Pay is a mobile payment and digital wallet service provided by Apple Inc.
Buyers can use Apple Pay on PayPal to make payments on the web using the Safari web browser or an iOS device.
Sellers can use Apple Pay on PayPal to sell:
Visit this site for more information about Apple Pay.
Apple Pay supports payments in 32 countries and 22 currencies:
AUD
, BRL
, CAD
, CHF
, CZK
, DKK
, EUR
, GBP
, HKD
, HUF
, ILS
, JPY
, MXN
, NOK
, NZD
, PHP
, PLN
, SEK
, SGD
, THB
, TWD
, USD
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, they confirm purchase details and authorize the payment on a payment sheet.
Visit this site for more details about Apple Pay's compatibility.
Watch our video tutorial for this integration:
You have to be an approved partner to integrate the Apple Pay SDK
Apple Pay works on Safari browsers and the following versions of iOS devices:
Currently supports Apple Pay one-time payments with the payer present.
Review Apple's terms and conditions for the Apple Pay platform. See Apple's developer terms for more information.
"PAYMENT_METHODS"
in the "products"
array and "APPLE_PAY"
in the "capabilities"
array for merchant onboarding.1curl -v -X POST https://api-m.sandbox.paypal.com/v2/customer/partner-referrals \2 -H 'Content-Type: application/json' \3 -H 'Authorization: Bearer ACCESS-TOKEN' \4 -H 'PayPal-Partner-Attribution-ID: BN-CODE' \5 -d '{6 "operations": [7 {8 "operation": "API_INTEGRATION",9 "api_integration_preference": {10 "rest_api_integration": {11 "integration_method": "PAYPAL",12 "integration_type": "THIRD_PARTY",13 "third_party_details": {14 "features": [15 "PAYMENT",16 "REFUND"17 ]18 }19 }20 }21 }22 ],23 "products": [24 "PPCP",25 "PAYMENT_METHODS"26 ],27 "capabilities": [28 "APPLE_PAY"29 ],30 "legal_consents": [31 {32 "type": "SHARE_DATA_CONSENT",33 "granted": true34 }35 ]36}'
Before you can accept Apple Pay on your website, verify that your sandbox business account supports Apple Pay.
Partners can use the PayPal Developer Dashboard to set up their sandbox accounts to accept Apple Pay. The integration for partner accounts includes creating a sandbox business account through sandbox.paypal.com. If the Apple Pay status for the account shows as disabled, complete the sandbox onboarding steps 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.
Before you develop your Apple Pay on the web integration, you need to set up your PayPal account, client ID, and sandbox emails for testing.
Download and host sandbox domain association file
/.well-known/apple-developer-merchantid-domain-association.
Register your sandbox domain
https://api-m.sandbox.paypal.com/v1/oauth2/token
. Note the access token from the response body.https://api-m.sandbox.paypal.com/v1/customer/wallet-domains
.paypal-auth-assertion
header with the value your_generated_auth_assertion
."provider_type": "APPLE_PAY"
to indicate that this is an `APPLE_PAY` domain registration"domain": {"name": "example.com" }
, and replace "example.com" with the domain you would like to register.Example JSON request:
1// Register a domain2{3 "provider_type": "APPLE_PAY",4 "domain": {5 "name": "example.com"6 }7}
201 CREATED
response with the merchant and domain registration details if this is successful.Deregister your sandbox domain
https://api-m.sandbox.paypal.com/v1/oauth2/token
. Note the access token from the response body.merchant_payer_id
with the merchant ID that you are registering the domain for. See PayPal Auth Assertion for more information.https://api-m.sandbox.paypal.com/v1/customer/wallet-domains
.paypal-auth-assertion
header with the value your_generated_auth_assertion
."provider_type": "APPLE_PAY"
to indicate that this is an `APPLE_PAY` domain deregistration"domain": { "name": "example.com" }
, and replace "example.com" with the domain you would like to deregister."reason": "Why you are deregistering this domain"
to indicate reason for deregistration.Example JSON request:
1// Deregister a domain2{3 "provider_type": "APPLE_PAY",4 "domain": {5 "name": "example.com"6 },7 "reason": "Merchant requested to deregister domain",8}
200 OK
response with the merchant and domain deregistration details if this is successful.Register your sandbox domain for a seller
https://api-m.sandbox.paypal.com/v1/oauth2/token
. Note the access token from the response body.merchant_payer_id
with the merchant ID that you are registering the domain for. See PayPal Auth Assertion for more information.https://api-m.sandbox.paypal.com/v1/customer/wallet-domains
.Bearer: <your_access_token>
. paypal-auth-assertion
header with the value your_generated_auth_assertion
to indicate the merchant you are getting the domain for.200 OK
response with the registered domains under the wallet_domains
field if this is successful.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.
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. Find the complete sample code in the GitHub repo.
1import * as PayPal from "./paypal-api.js";23// Create order4app.post("/api/orders", async (req, res) => {5 const order = await paypal.createOrder();6 res.json(order);7});89// Capture payment10app.post("/api/orders/:orderID/capture", async (req, res) => {11 const {12 orderID13 } = req.params;14 const captureData = await paypal.capturePayment(orderID);15 res.json(captureData);16});
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¤cy=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:
paypal.Applepay().config()
onvalidatemerchant
callback: paypal.Applepay().validateMerchant()
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}45if (!ApplePaySession.canMakePayments()) {6 console.error('This device is not capable of making Apple Pay payments');7}89const applepay = paypal.Applepay();1011applepay.config()12 .then(applepayConfig => {13 if (applepayConfig.isEligible) {14 document.getElementById("applepay-container").innerHTML = '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en">';15 }16 })17 .catch(applepayConfigError => {18 console.error('Error while fetching Apple Pay configuration.');19 });
You can find more details on how to set up the Apple Pay button in Apple's developer documentation.
The ApplePaySession
object manages the Apple Pay payment process on the web. Create a new ApplePaySession
each time a payer explicitly requests a payment, such as inside an onclick
event. If you don't create an ApplePaySession
each time, you get a "Must create a new ApplePaySession
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 an ApplePayPaymentRequest
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
1// Note: the `applepayConfig` object in this request is the response from `paypal.Applepay().config()`.2const paymentRequest = {3 countryCode: applepayConfig.countryCode,4 merchantCapabilities: applepayConfig.merchantCapabilities,5 supportedNetworks: applepayConfig.supportedNetworks,6 currencyCode: "USD",7 requiredShippingContactFields: ["name", "phone", "email", "postalAddress"],8 requiredBillingContactFields: ["postalAddress"],9 total: {10 label: "Demo",11 type: "final",12 amount: "100.00",13 }14};1516const 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:
https
.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 // The `billingContact` and `shippingContact` object use the `ApplePayPaymentContact` format.5 // Find more details about this object at this URL:6 // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentcontact7 fetch(`/api/orders`, {8 method: 'post'9 body:10 // You can use the "body" parameter to pass optional, additional order information, such as:11 // amount, and amount breakdown elements like tax, shipping, and handling12 // item data, such as sku, name, unit_amount, and quantity13 // shipping information, like name, address, and address type14 // Name and address information is passed by `event.payment.shippingContact`.15 })16 .then(res => res.json())17 .then((createOrderData) => {18 var orderId = createOrderData.id;19 applepay.confirmOrder({20 orderID: orderId,21 token: event.payment.token,22 billingContact: event.payment.billingContact23 })24 .then(confirmResult => {25 session.completePayment(ApplePaySession.STATUS_SUCCESS);26 // Submit approval to the server and authorize or capture the order.27 fetch(`/api/orders/${orderId}/capture`, {28 method: "post",29 })30 .then(res => res.json())31 .then(captureResult => {32 console.log(captureResult);33 })34 .catch(captureError => console.error(captureError));35 })36 .catch(confirmError => {37 if (confirmError) {38 console.error('Error confirming order with applepay token');39 console.error(confirmError);40 session.completePayment(ApplePaySession.STATUS_FAILURE);41 }42 });43 });44};
After you have created the Apple Pay session and added the callbacks, call the session's begin method to show the payment sheet. You can only call the begin
method when a payer explicitly requests a payment, such as inside an onclick
event. The begin
method throws a JavaScript exception if the buyer doesn't explicitly request the action:
1session.begin();
After the payer starts a payment in the browser, they use their Apple device to authorize the payment.
Customize payment
Customize payment using the Apple Pay JavaScript SDK.
The commonly used customizations for Apple Pay are:
Customization | Apple Pay SDK Details |
---|---|
A set of line items that explain the subtotal, tax, discount, and additional charges for the payment. | lineItems |
The billing information fields that the payer must provide to fulfill the order. | requiredBillingContactFields |
The shipping information fields that the payer must provide to fulfill the order. | requiredShippingContactFields |
The payer's billing contact information. | billingContact |
The payer's shipping contact information. | Call the |
The shipping method for a payment request. | ApplePayShippingMethod Call the onshippingmethodselected event handler when the user selects a shipping method in the payment sheet. |
Ensure your integration with Apple Pay is configured properly for sandbox and production environments.
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.
Make Apple Pay available to buyers using your website or app.
Live environment
If you are a new partner setting up a marketplace or platform for individual sellers, fill in this form to become an approved partner. Then, see Get Started and Configure your account to sign up for a PayPal business account.
Use your personal production login information during checkout to complete an Apple Pay transaction. Log into paypal.com to see the money move out of your account.
Getting started in your live environment
You need to verify any domain names in your production environment that will show an Apple Pay button. If Apple hasn't verified a domain, they will reject any payments from that domain.
Download and host live domain association file
/.well-known/apple-developer-merchantid-domain-association
.Register your live domain
https://api.paypal.com/v1/oauth2/token
. Note the access token from the response body.https://api-m.paypal.com/v1/customer/wallet-domains
.paypal-auth-assertion
header with the value your_generated_auth_assertion
."provider_type": "APPLE_PAY"
to indicate that this is an `APPLE_PAY` domain registration"domain": { "name": "example.com" }
, and replace "example.com" with the domain you would like to register.Example JSON request:
1// Register a domain23{4 "provider_type": "APPLE_PAY",5 "domain": {6 "name": "example.com"7 }8}
201 CREATED
response with the merchant and domain registration details if this is successful.Deregister your live domain
https://api.paypal.com/v1/oauth2/token
. Note the access token from the response body.merchant_payer_id
with the merchant ID that you are registering the domain for. See PayPal Auth Assertion for more information.https://api-m.paypal.com/v1/customer/unregister-wallet-domain
.paypal-auth-assertion
header with the value your_generated_auth_assertion
."provider_type": "APPLE_PAY"
to indicate that this is an `APPLE_PAY` domain deregistration"domain": { "name": "example.com" }
, and replace "example.com" with the domain you would like to deregister."reason": "Why you are deregistering this domain"
to indicate reason for deregistration.Example JSON request:
1// Deregister a domain2{3 "provider_type": "APPLE_PAY",4 "domain": {5 "name": "example.com"6 },7 "reason": "Merchant requested to deregister domain",8}
200 OK
response with the merchant and domain deregistration details if this is successful.View a list of seller domains
https://api.paypal.com/v1/oauth2/token
. Note the access token from the response body.merchant_payer_id
with the merchant ID that you are registering the domain for. See PayPal Auth Assertion for more information.https://api-m.paypal.com/v1/customer/wallet-domains
.paypal-auth-assertion
header with the value your_generated_auth_assertion
to indicate the merchant you are getting the domain for.200 OK
response with the registered domains under the wallet_domains
field if this is successful.Testing your live environment
When testing a purchase in production, consider:
How to test Apple Pay payments in a live environment
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.
Get started testing, add security to your checkout experience, or create customizations for your audience.
Add more card payment options to your integration.