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

2. To enable Apple Pay on your Coinflow account: Request a site association file from Coinflow and make it publicly accessible at https\://yourDomain.com\/.well-known/apple-developer-merchantid-domain-association.txt

3. 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.

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

   Payers with wallets

   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
   />

   Payers without wallets

   1
   import {CoinflowApplePayButton} from '@coinflowlabs/react';
   2
   3
   <CoinflowApplePayButton
   4
     env={'prod' | 'sandbox'}
   5
     sessionKey={'USER_SESSION_KEY'} //Get from: https://docs.coinflow.cash/reference/getsessionkey
   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.