Apple Pay¶
Apple Pay is a digital wallet service by Apple Inc. that allows shoppers to make purchases with credit or debit cards stored on their Apple devices.
Note
Apple Pay is only available in a limited number of countries. This limitation applies to the shopper’s country and not the merchant’s.
Accepting Apple Pay via Mollie¶
In order to accept Apple Pay via Mollie, you need to enable both credit card and Apple Pay on your website profile in your Mollie Dashboard.
Shoppers using an Apple device with Apple Pay configured will automatically be offered Apple Pay in the Mollie Checkout. Additionally, limited support for integrating Apple Pay in your own checkout is available.
Using the Mollie Checkout¶
If you are using the Mollie Checkout and the Create payment endpoint
without the method
parameter, the Apple Pay button will be shown in the checkout during method selection:

Adding Apple Pay to the method selection¶
An easy way to integrate Apple Pay is by adding Apple Pay to the payment method selection. The “Checkout with Pay” button will then be shown in the Mollie Checkout.
First, you must indicate to the List methods endpoint on the Methods API
which wallets you support in your checkout by adding the includeWallets=applepay
parameter.
1 2 | curl -X GET https://api.mollie.com/v2/methods?includeWallets=applepay \ -H "Authorization: Bearer test_dHar4XY7LxsDOtmnkVtjNVWXLSlXsM" |
If Apple Pay is enabled on the website profile, a method with the id applepay
will be returned in the list of
payment methods. Apple Pay can be enabled in the Dashboard.
Then, during checkout, you should check if the Apple Pay method is available on the shopper’s device by using the
canMakePayments
method on the window.ApplePaySession
object. Apple requires you that you only show the Apple Pay
option when it is actually supported by the device. For more details, see the article by Apple.
1 2 3 | if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) { // Add ApplePay to the method selection in your checkout } |
Finally, when the shopper selects Apple Pay from your method selection, you should use the
Create payment endpoint to create a payment with the method
parameter set to applepay
and redirect the shopper to the _links.checkout
URL returned.
When the shopper authorizes the payment, Mollie will create a payment with the method creditcard
. We will then call
your webhook and redirect the shopper back to your website as normal.
Examples¶
Option 1. Adding Apple Pay client-side with JavaScript¶
When using a <select>
dropdown or equivalent, we recommend handling adding Apple Pay to your checkout entirely with
JavaScript. This prevents you from having to edit your HTML or CSS.
If you need a more control or have complex HTML, see Adding Apple Pay server-side.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <form> <!-- Other checkout fields like billing address etc. --> <select class="js-select-method"> <option value="creditcard">Credit card</option> <option value="ideal">iDEAL</option> <option value="paypal">PayPal</option> <option value="banktransfer">Bank transfer</option> </select> </form> <!-- Only load this script if Apple Pay is enabled on your website profile. For example with PHP: <?php if ($applePayEnabled) : ?> --> <script> if (!window.ApplePaySession || !ApplePaySession.canMakePayments()) { // Apple Pay is not available return; } // Create Apple Pay option const option = document.createElement('option'); option.value = 'applepay'; option.textContent = 'Apple Pay'; // Find the payment method dropdown in the document, this depends on your HTML const select = document.querySelector('.js-select-method'); // Add Apple Pay to dropdown select.prepend(option); </script> <!-- <?php endif; ?> --> |
For more details on detecting the support of Apple Pay on a device, see Apple’s documentation.
Option 2. Adding Apple Pay server-side¶
If you use a more complex HTML structure, or you need data which is only available server-side, your best option is to add Apple Pay to the DOM and hide it both visually as well as from screen-readers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <html> <head> <style> /* You should probably add this block to an existing stylesheet instead of inlining it. */ .payment-methods > [aria-hidden="true"] { display: none; } </style> </head> <body> <form> <!-- Other checkout fields like billing address etc. --> <ul class="payment-methods"> <!-- Only show this method if Apple Pay is enabled on your website profile. For example with PHP: <?php if ($applePayEnabled) : ?> --> <li class="js-apple-pay" aria-hidden="true"> <label> <input name="method" value="applepay" type="radio"> Apple Pay </label> </li> <!-- <?php endif; ?> --> <li> <label> <input name="method" value="creditcard" type="radio"> Credit card </label> </li> ... </ul> </form> <!-- Only load this script if Apple Pay is enabled on your website profile. For example with PHP: <?php if ($applePayEnabled) : ?> --> <script> if (!window.ApplePaySession || !ApplePaySession.canMakePayments()) { // Apple Pay is not available return; } // Find the hidden Apple Pay element const applePay = document.querySelector('.js-apple-pay'); // Remove the aria-hidden attribute applePay.removeAttribute('aria-hidden'); </script> <!-- <?php endif; ?> --> </body> </html> |
For more details on detecting the support of Apple Pay on a device, see Apple’s documentation.
Direct integration of Apple Pay¶
Integrating Apple Pay in your own checkout is available. See our full guide.