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.

Apple Pay is seamlessly integrated into the CoinflowPurchase component, so there's no separate setup required if you're using Approvely'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 Rapid 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. Please retrieve the following three items and send them to the Approvely team.

   1. Merchant ID Certificate (Merchant ID Cert)

   Purpose
   Identifies your merchant account to Apple Pay.
   Type
   .cer file (Certificate)
   Usage
   • Links your Apple Developer account and Merchant ID to the payment processor
   • Ensures Apple can authenticate your app or website for Apple Pay transactions
     How to get it
   1. Log in to Apple Developer → Certificates, IDs & Profiles → Merchant IDs
   2. Create a new Merchant ID
   3. Generate a Certificate Signing Request (CSR) from Mac Keychain
   4. Download the .cer file and install it in Keychain
   5. Export as .pem if needed

   ---

   2. Private Key (Private PEM File)

   Purpose
   Works with your Merchant ID Certificate to securely sign payment requests.
   Type
   .pem file (contains your private key)
   Usage
   • Stored on your backend server
   • Used to sign Apple Pay payment tokens so your PSP/gateway can process payments
     How it’s created
   • Generated when you create the CSR in Keychain
   • Export from Keychain as .p12 → convert to .pem if your backend requires it

   ---

   3. Payment Processing Certificate (Cert PEM File)

   Purpose
   Authorizes your backend server to decrypt Apple Pay payment tokens.
   Type
   .pem file
   Usage
   • Used by your PSP or backend to decrypt sensitive card info from Apple Pay tokens
   • Ensures tokens are only readable by your backend (maintains PCI compliance)
     How to get it
   1. Go to Apple Developer → Merchant IDs
   2. Select your Merchant → Create Payment Processing Certificate
   3. Upload CSR
   4. Download .cer
   5. Convert .cer to .pem for backend use

   ---

   Quick Flow

   1. Generate CSR → creates Private Key
   2. Export Private Key as .pem for backend
   3. Apple issues Merchant ID Certificate → verifies Merchant ID
   4. Create Payment Processing Certificate → export .pem
   5. Backend uses Private Key + Processing Cert → decrypts Apple Pay token → sends to PSP
3. The following component will render the Apple Pay button. Please follow this recipe to learn how to add a dynamic height handler:

import {CoinflowApplePayButton} from '@coinflowlabs/react';

<CoinflowApplePayButton
  env={'prod' | 'sandbox'}
  wallet={{
    publicKey: PublicKey,
    signMessage: (message: UInt8Array) => Promise,
    sendTransaction: (transaction: Transaction | VersionedTransaction) => Promise
  }}
  blockchain={'solana'}
  merchantId={merchantId}
  connection={connection}
  handleHeightChange={handleHeightChange}
  amount={amount}
  color={'black' | 'white'}
/>
 

import {CoinflowApplePayButton} from '@coinflowlabs/react';

<CoinflowApplePayButton
  env={'prod' | 'sandbox'}
  sessionKey={'USER_SESSION_KEY'} //Get from: https://docs.coinflow.cash/reference/getsessionkey
  merchantId={merchantId}
  handleHeightChange={handleHeightChange}
  subtotal={{cents: 100, currency: Currency.USD}}
  color={'black' | 'white'}
/>

🚧 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. Approvely will NOT charge your card.

Troubleshooting

1. Why is the Apple pay button not showing on safari?

• Get confirmation from the Approvely team that your domain has been verified on apple.
• If you've added the Approvely checkout modal to an iframe, add an allow attribute. This specifies a payment permissions policy for the iframe.

HTML

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.

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 Approvely and have received confirmation that your domain has been verified. If you aren't sure what this means, please contact Approvely'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.