Apple Pay on your website: how it works and what you need

How do you add Apple Pay to your website?

To add Apple Pay to your website you need three things: a payment gateway that supports Apple Pay and has it enabled on your account, a site running on your own domain over HTTPS, and that domain verified with Apple. Verification usually happens in your gateway's dashboard: it gives you a file to place at a specific path on your site, then you click verify. After that, the Apple Pay button appears for customers on Apple devices and they pay with one tap.

Why is it worth the effort? A large share of Gulf shoppers use iPhones, and typing a card number on a small phone screen is one of the most common reasons people abandon checkout. With Apple Pay the customer types no number, no expiry date and no code; they see the amount and confirm with Face ID or Touch ID. In Saudi Arabia Apple Pay also works with mada cards, so it serves the card people use most for everyday spending.

This guide focuses on Apple Pay specifically. For the full picture of mada and Apple Pay together, read how to accept mada and Apple Pay on your website.

How does Apple Pay work behind the scenes?

When a customer adds a card to Apple Wallet, the real card number is not stored on the device; a device-specific substitute number is. At payment time the device creates encrypted payment data for that one transaction, your page passes it to the gateway, and the gateway decrypts it and sends it through the card network to the customer's bank.

1. 1
   The button appears

   Your page checks that the browser and device support Apple Pay and that the customer has a card, then shows the button.

2. 2
   The payment sheet

   The customer taps it and the Apple Pay sheet shows your store name, the amount and a shipping address if you request one.

3. 3
   Merchant validation

   In the background your server or gateway confirms with Apple that this domain is a verified merchant.

4. 4
   Authentication

   The customer confirms with Face ID, Touch ID or their passcode, and an encrypted payment token is created.

5. 5
   Processing

   The token goes to your gateway, which processes the transaction and returns approved or declined.

6. 6
   Confirmation

   The result reaches your server via webhook, so you confirm the order and issue the invoice.

What do you need before you switch it on?

The domain is where many people stumble. If your site is still on a preview link, connect your domain first using how to connect a custom domain and make sure the SSL certificate is active. Note that every subdomain you take payments on, such as shop or pay, needs its own verification.

Setup steps from account to first transaction

1. Open a merchant account with a gateway that supports Apple Pay, and ask for it to be enabled; it may not be on by default.
2. Confirm mada support through Apple Pay if you are in Saudi Arabia, and local card support such as Jaywan in the UAE, depending on your gateway.
3. Verify your domain in the gateway dashboard: upload the file to the required path, then click verify.
4. Add the button using Apple's official styles, at the top of checkout above the card form, without freely changing its colors or text.
5. Wire up the server: the checkout page sends the token to the gateway, and your server receives confirmation by webhook.
6. Test in sandbox mode, then with a small real payment on your own device, and refund it.
7. Monitor the share of Apple Pay versus card payments after launch to see its impact.

To pick a gateway, see best payment gateway in Saudi Arabia or best payment gateway in the UAE. With Fanann you connect the gateway through the payments page and the agent handles the button, server and confirmation.

Where does the button show, and when does it not?

Apple Pay on the web was designed mainly for Safari on iPhone, iPad and Mac devices with Apple Pay set up. Apple has broadened support so some users on other browsers can complete payment by scanning a code with their iPhone, but the smoothest experience is still Safari. That is why you should show the button only when payment is actually possible, and always show alternatives.

The in-app browser point matters if you rely on Snapchat and TikTok ads: many visitors open your link inside the app's browser, where Apple Pay may not behave as it does in Safari. Test that path yourself, and keep mada and cards visible as a fallback at all times.

Apple Pay inside your iPhone app

In a native app you use the native Apple Pay sheet instead of the web button. You need an Apple Developer account to create a Merchant ID, then you create a payment processing certificate using a signing request from your gateway, and enable the Apple Pay capability in the app settings. From there it works like the web: an encrypted token goes to the gateway, and confirmation reaches your server.

• For physical goods and real-world services, such as orders, bookings and deliveries, you can use Apple Pay through your gateway.
• For digital content and features used inside the app, Apple's in-app purchase rules may apply; check the review guidelines.
• Payments inside an embedded web page in the app can behave differently; the native sheet is the safer choice.
• Renew the processing certificate before it expires, and put a reminder in your calendar.

Fanann builds real iOS and Android apps from the same chat through mobile apps, with step-by-step publishing guidance. For the usual review traps, see why apps get rejected by the App Store.

Common mistakes and a pre-launch checklist

• The button at the bottom: put it at the top of the payment options; its position is part of its value.
• Confirming orders from the browser: confirm only after the gateway notifies your server.
• An unfamiliar merchant name: the name on the payment sheet and bank statement must be one customers recognize, or disputes rise.
• Forgetting shipping: if you request an address in the sheet, make sure it is saved and reaches delivery in full.
• Not testing on real devices: a simulator does not show everything; try a real iPhone and Mac.

Finally, a secure checkout matters as much as a fast one; read payment security basics to keep card data out of your app.

Frequently asked questions

Terms in this article