Apple Pay

Overview

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

• It allows users to make payments using their compatible Apple devices (such as iPhone, iPad, or Apple Watch) in physical stores, within apps, and on the web.
• It provides a convenient and secure way for users to store their credit and debit card information and make payments with a single touch or glance.

Functionality table

Activation

To activate Apple Pay as a payment method and to add it to your Checkout portal, you need to complete the onboarding journey.

You can activate Apple Pay as:

• Hosted Payment Page
• Embedded Payment Page

Hosted payment page

To activate the hosted checkout for Apple Pay, do the following:

1. Login to the Checkout portal.
2. Navigate to ADD-ON on left-hand side menu and ensure the your account is set to LIVE (top-right on screen).
3. Click on ENABLE APPLE PAY to activate the the Apple Pay option.

Embedded payment page

To activate the embedded checkout for Apple Pay, do the following:

1. Login to the Checkout portal.
2. Navigate to ADD-ON on left-hand side menu and ensure the your account is set to LIVE (top-right on screen).
3. Click on ENABLE APPLE PAY to activate the the Apple Pay option.
4. Write your domain name into the domain name box. Ensure that you write the correct domain name.
5. Click on DOWNLOAD to get your domain-verification file.
6. Upload the domain-verification file to your website at the URL at step 2 in the screenshot below.
7. Click on VERIFY DOMAIN.

Error codes

The following error codes with description can help you to understand if you have not successfully enabled the Apple Pay for embedded checkout.

Plugins configuration overview

To enable embedded checkout for Apple Pay, you need to prepare your plugin environment and a place for the domain-verification file for the transaction.

In general, the apple-developer-merchantid-domain-association file should be in the ".well-known" folder and the public root path, so that it is accessible via the link: https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association.

Nginx and Apache should be structured to read this file without the extension from the ".well-known" folder.

Depending on the server and platform, the configuration may differ.

Here are some example configurations for Nginx and Apache servers that we may need to add to the configuration files:

Nginx

Usually in /etc/nginx/{shop}.conf

# .htaccess, .DS_Store, .htpasswd, etc., but keep .well-known available
location ~* /\.(?!well-known\/) {
deny all;
}

To find out more, please follow this reference link.

Apache

.htaccess in public folder

RewriteCond %{REQUEST_FILENAME} -f
RewriteRule

Below are examples of the given platforms and explanations on how to modify the basic configuration.

WooCommerce

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to the WordPress root directory.
• In this folder, you should find directories “wp-admin”, “wp-content” and “wp-includes” et al.
• Create a new directory with the following name: “.well-known”.
• Paste the domain-verification file inside the “.well-known” directory.

Step 3:

Make sure your server is configured properly so the file is hosted and available at the following path: https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

See the example configuration documented by Nexi.

Shopware 6.5

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to the Shopware root directory.
• Go to the “/public” folder.
• Create a new directory with the following name: “.well-known”.
• Paste the domain-verification file inside the “.well-known” directory.

Step 3:

Make sure your server is configured properly so the file is hosted and available at the following path: https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

See the example configuration documented by Nexi.

Magento 2

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to the Magento 2 root directory.
• Go to the “/pub” folder.
• Create a new directory with the following name: “.well-known”.
• Paste the domain-verification file inside the “.well-known” directory.

Step 3:

Make sure your server is configured properly so the file is hosted and available at the following path: https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

See the example configuration documented by Nexi.

PrestaShop 1.7

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to the PrestaShop root directory.
• Create a new directory with the following name: “.well-known”.
• Paste the domain-verification file inside the “.well-known” directory.

Step 3:

Make sure your server is configured properly so the file is hosted and available at the following path (see PrestaShop documentation here): https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

Opencart 3.0

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to upload directory
• Create a new directory with the following name: ".well-known"
• Paste the domain-verification file inside the ".well-known" directory

Additional steps if you are running Nginx:

• To make access for that directory, make sure that your nginx config approves the directories with a dot. There might be a case where you need to approve that in your nginx config file.

Oxid 6.5

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

Upload the domain-verification file to your website using an FTP or SFTP client:

• Navigate to the Oxid root directory.
• Go to the “/source” folder.
• Create a new directory with the following name: “.well-known”.
• Paste the domain-verification file inside the “.well-known” directory.

Step 3:

Make sure your server is configured properly so the file is hosted and available at the following path: https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

Plentymarkets 7

Step 1:

Download your domain-verification file from the Checkout portal.

Step 2:

• Open the domain-verification file using a text editor and copy the contained content.
• Navigate to the plugin assistant in your plentymarkets backend.

"Setup > Assistants > Plugins > Plugin-Set"

• Go to the assistant section "Apple Pay".
• Activate the corresponding toggle "Provide information for domain verification".
• Insert the content of the domain-verification file into the text area.
• Complete the assistant.

Step 3:

Make sure the configuration was carried out properly by checking if the content of the domain-verification file is available at the following path: https://[YOUR_DOMAIN]/.well-known/apple-developer-merchantid-domain-association.

User journey

This following section will describe the user journey and payment flow for your customer:

1. When your consumer chooses Apple Pay as a payment method in the checkout, they will prompted to Apple Pay window.
2. Customer can pay with

• "Pay with Touch ID" or
• "Double click to pay" depending on what system they are using.

Payment flow

Apple Pay is defined as a Wallet and can be displayed alone and together with other payment methods. It is not recommended to show Apple Pay alone if you do not detect the device used in the webshop before you are going to show the payment options.

If Apple Pay is used alone on devices other than iOS/iPadOS/MacOS, there will be no visible payment methods and it is naturally a poor user experience. Apple Pay can be combined with other Wallet payment methods or together with cards.

Recommended usage of the paymentMethodsConfiguration parameter for Apple Pay.

If you have more than one wallet configured, you can use:

paymentMethodsConfiguration:[{"name":"Wallet"}]

If Apple Pay is used as the only wallet, you should include card as well:

paymentMethodsConfiguration:[{"name":"Card"},{"name":"ApplePay"}]