How To: Implement Apple Pay

Overview

Apple Pay is a mobile payment service by Apple Inc. that enables users to make payments in person, within iOS apps, and on the web. For users on iOS versions below 18, Apple Pay is supported on iPhone, iPad, and Mac. However, starting from iOS 18+, Apple Pay is supported across all browsers.

Watch a demo of how it works.

Apple Pay is seamlessly integrated into the CoinflowPurchase component, so there’s no separate setup required if you’re using Coinflow’s pre-built UI. For merchants implementing checkout via API, you can skip to the Implementation section below to learn how to add Apple Pay to your application.

🚧 Apple Pay Via Coinflow works only on Safari >v17 which was released with IOS 17 and MacOS v14 (Sonoma).

Implementation

1. Please upgrade @coinflowlabs/react v2.6.0 or higher

Domain Verification

To enable Apple Pay, you must verify your domain with Apple. Follow these steps:

1. Whitelist your URL — Make sure you’ve registered the domain where Apple Pay will be used with Coinflow.

2. Download the site association file — Visit the Apple Pay Settings page in the Coinflow Merchant Dashboard and download the site association file.

3. Upload the file to your domain — Upload the downloaded file to your whitelisted domain at the following path:

   https://yourDomain.com/.well-known/apple-developer-merchantid-domain-association

   ⚠️ The file must be accessible at this exact path for Apple to verify your domain.

4. Notify Coinflow — Once the file is uploaded, let the Coinflow team know and we will validate your domain with Apple’s servers.

5. That’s it! — Once verified by the Coinflow team, Apple Pay will be enabled on your account. In the prebuilt UI, Apple Pay will automatically appear in the purchase options.

Rendering the Apple Pay Button

The following component will render the Apple Pay button. Please follow this recipe to learn how to add a dynamic height handler:

1
import {CoinflowApplePayButton} from '@coinflowlabs/react';
2
3
<CoinflowApplePayButton
4
  env={'prod' | 'sandbox'}
5
  wallet={{
6
    publicKey: PublicKey,
7
    signMessage: (message: UInt8Array) => Promise,
8
    sendTransaction: (transaction: Transaction | VersionedTransaction) => Promise
9
  }}
10
  blockchain={'solana'}
11
  merchantId={merchantId}
12
  connection={connection}
13
  handleHeightChange={handleHeightChange}
14
  amount={amount}
15
  color={'black' | 'white'}
16
/>

1
import {CoinflowApplePayButton} from '@coinflowlabs/react';
2
3
<CoinflowApplePayButton
4
  env={'prod' | 'sandbox'}
5
  sessionKey={'USER_SESSION_KEY'} //Get from: /api-reference/api-reference/authentication/get-session-key
6
  merchantId={merchantId}
7
  handleHeightChange={handleHeightChange}
8
  subtotal={{cents: 100, currency: Currency.USD}}
9
  color={'black' | 'white'}
10
/>

🚧 Apple Pay is not available for the following types of businesses:

• Tobacco, marijuana, or vaping products
• Firearms, weapons, or ammunition
• Illegal drugs or non-legally prescribed controlled substances
• Pornography
• Personal fundraising or collections of non-profit donations unless approved by Apple

Testing Apple Pay

When testing Apple Pay on sandbox, you will need to use a real credit card. Coinflow will NOT charge your card.

Troubleshooting

1. Why is the Apple pay button not showing on safari?
   • Get confirmation from the Coinflow team that your domain has been verified on apple.
   • If you’ve added the Coinflow checkout modal to an iframe, add an allow attribute. This specifies a payment permissions policy for the iframe.

     1
     <iframe
     2
       src="https://cross-origin.example"
     3
       allow="payment">
     4
     </iframe>
2. Why am i getting the error mywebsite.com is not registered for apple pay
   • Ensure you’ve added the provided site association file from Coinflow and have received confirmation that your domain has been verified. If you aren’t sure what this means, please contact Coinflow’s support.
   • If you are passing the origins field with multiple urls, the last item in the array must be the top level domain name.