Table of Contents

Magento 2 React Checkout Pro Bundle — User Guide

Extension context

This is a Toweringmedia Magento 2 extension guide for the React Checkout Pro Bundle: a Hyvä-friendly, React-based checkout package with optional wallet payments. Use this page for installation, high-level configuration, and the Apple Pay setup workflow with Authorize.net, React Checkout Pro, and Magento Admin.

Product page

Overview

The bundle delivers a fast, single-page checkout built in React—autosave-first, mobile-friendly, and aligned with production Magento practices (no unnecessary headless complexity).

Example placeholders used throughout this guide (not real clients): example.com, staging.example.com, merchant.com.example.production, Example Store, Example Company.

What this extension does

Installation

Install and validate in staging before production rollout. 

cd /path/to/magento
# Install from your licensed Composer package (metapackage name from your agreement)
# composer require your-vendor/your-bundle-package
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

If your bundle ships a React Checkout Pro asset collection step, run the documented CLI for your release (for example toweringmedia:react-checkout-pro:collect) after upgrade.

Configuration (high level)

Apple Pay Setup for Magento with Authorize.net and React Checkout Pro

This section walks through the complete Apple Pay setup for Magento when the checkout uses Toweringmedia React Checkout Pro and payments are processed through Authorize.net. Apple Pay setup has three separate pieces that are easy to mix up:

Do these in order. The files are not interchangeable.

Example values (placeholders only):

Item Example
Staging domain staging.example.com
Live domain example.com
Apple Merchant ID merchant.com.example.production
Apple Pay display name Example Store

The same Apple Merchant ID can usually be used for staging and production. Every domain or subdomain where the Apple Pay button appears must still be added and verified in Apple Developer, for example staging.example.com, example.com, and www.example.com.

File and certificate reference

File Purpose Used for
CertificateRequest_csr.txt CSR generated by Authorize.net Upload to Apple when creating the Apple Pay Payment Processing Certificate
apple_pay.cer Apple Pay Payment Processing Certificate downloaded from Apple Generated from the Authorize.net CSR; retain for processor/payment records
applepay_merchant_identity.key Private key generated on the server Paste into Magento Admin as Apple Pay Merchant Key (PEM)—never give this to Apple
applepay_merchant_identity.csr CSR generated from the server private key Upload to Apple when creating the Apple Pay Merchant Identity Certificate
merchant_id.cer (or saved as merchant_identity.cer) Merchant Identity Certificate downloaded from Apple Upload to server, convert to PEM, paste into Magento as Apple Pay Merchant Cert (PEM)

Critical security rules

Step 1: Create or open the Apple Merchant ID

In Apple Developer:

  1. Go to Certificates, Identifiers & Profiles.
  2. Open Identifiers.
  3. Filter by Merchant IDs.
  4. Create or open the Merchant ID, for example merchant.com.example.production.

Use a clear merchant identifier that belongs to the store/brand and environment strategy. For this reusable example, use merchant.com.example.production.

Step 2: Add and verify the checkout domain

Inside the Apple Merchant ID, scroll to Merchant Domains and add each checkout hostname without a protocol:

Only add domains where Apple Pay actually appears. Apple verifies each domain by requesting this public URL:

/.well-known/apple-developer-merchantid-domain-association

Example staging verification URL: 

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

That URL must return the raw plain text association file contents. It must not return a Magento 404 page, generic HTML, a redirect, a login page, HTTP auth, or a maintenance interstitial.

Step 3: Configure the React Checkout Pro domain association file

In Magento Admin, open:

Stores → Configuration → Toweringmedia → React Checkout Pro → Apple Pay (domain verification)

Paste the full Apple domain association file contents into Domain association file contents. React Checkout Pro should then serve that content from:

/.well-known/apple-developer-merchantid-domain-association

Re-test the public URL before clicking Verify in Apple Developer: 

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

Expected result: plain text only. If the response is HTML, a 404, a redirect, or blocked by staging restrictions, fix that before continuing.

Step 4: Generate the Authorize.net Apple Pay CSR

In Authorize.net:

  1. Go to Account → Digital Payment Solutions → Apple Pay.
  2. Enter the Apple Merchant ID, for example merchant.com.example.production.
  3. Click Generate Apple CSR.
  4. Download the CSR, for example CertificateRequest_csr.txt.

This CSR belongs to Authorize.net. It is used only for the Apple Pay Payment Processing Certificate.

Step 5: Create the Apple Pay Payment Processing Certificate

In Apple Developer:

  1. Go to Certificates, Identifiers & Profiles → Identifiers → Merchant IDs.
  2. Open merchant.com.example.production.
  3. Under Apple Pay Payment Processing Certificate, choose Create Certificate.
  4. Upload CertificateRequest_csr.txt from Authorize.net.
  5. Download the resulting certificate, for example apple_pay.cer.

Do not upload a .cer file where Apple asks for a CSR. Do not upload the server-generated Merchant Identity CSR in this Payment Processing Certificate step.

Step 6: Generate the Merchant Identity private key and CSR on the Magento server

The Merchant Identity certificate/key pair is what Magento uses for Apple Pay merchant validation. It is separate from the Authorize.net payment processing certificate.

Run from the Magento root: 

cd /path/to/magento/root
mkdir -p var/applepay
chmod 700 var/applepay
cd var/applepay
 
openssl genrsa -out applepay_merchant_identity.key 2048
chmod 600 applepay_merchant_identity.key
 
openssl req -new \
  -key applepay_merchant_identity.key \
  -out applepay_merchant_identity.csr \
  -subj "/CN=merchant.com.example.production/O=Example Company/C=US"

Result:

Download only applepay_merchant_identity.csr to your local machine for the Apple upload. Do not upload or share applepay_merchant_identity.key except through an approved secure backup process.

Step 7: Create the Apple Pay Merchant Identity Certificate

In Apple Developer:

  1. Go to Certificates, Identifiers & Profiles → Identifiers → Merchant IDs.
  2. Open merchant.com.example.production.
  3. Under Apple Pay Merchant Identity Certificate, choose Create Certificate.
  4. Upload applepay_merchant_identity.csr from the Magento server.
  5. Download the resulting certificate, for example merchant_id.cer.

Do not upload these files in this step:

The downloaded Merchant Identity certificate must match the private key generated on the server. If the CSR came from a different machine or different key, Magento merchant validation will fail.

Step 8: Upload and convert the Merchant Identity certificate to PEM

Upload Apple’s new certificate to:

var/applepay/merchant_id.cer

Then convert it on the server: 

cd /path/to/magento/root/var/applepay
mv merchant_id.cer merchant_identity.cer
 
openssl x509 -inform DER \
  -in merchant_identity.cer \
  -out applepay_merchant_identity.pem

Result:

Step 9: Configure Apple Pay in Magento Admin

Open the relevant payment configuration screen, usually:

Stores > Configuration > Sales > Payment Methods > Authorize.Net (Toweringmedia)

Set:

Field Value
Enable Apple Pay Yes
Apple Pay Merchant ID merchant.com.example.production
Apple Pay Display Name Example Store
Apple Pay Domain staging.example.com

Enter only the hostname in the domain field. Do not include the protocol prefix. For live, use example.com or www.example.com, whichever domain actually hosts checkout and is verified in Apple Developer.

For Apple Pay Merchant Cert (PEM), run: 

cat var/applepay/applepay_merchant_identity.pem

Paste the full output. It must include: 

-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----

For Apple Pay Merchant Key (PEM), run: 

cat var/applepay/applepay_merchant_identity.key

Paste the full output. It must include either: 

-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----

or: 

-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----

Leave Apple Pay Key Passphrase blank unless the private key was intentionally created with a passphrase. The openssl genrsa command in this guide does not create a passphrase-protected key.

Save config at the correct website/store scope.

Step 10: Flush cache and rebuild frontend assets if needed 

php bin/magento cache:clean config full_page
php bin/magento cache:flush

Also clear LiteMage/LiteSpeed or CDN cache if active. If checkout assets changed, run the project’s normal Hyvä / React Checkout Pro build process.

Step 11: Test Apple Pay

Use Safari on a device and Apple ID that support Apple Pay:

If the sheet opens, merchant validation is usually working. If the button does not show or the sheet fails, continue with the checks below.

Troubleshooting: Apple says “Invalid CSR”

The wrong file was uploaded. A CSR usually starts with: 

-----BEGIN CERTIFICATE REQUEST-----

or: 

-----BEGIN NEW CERTIFICATE REQUEST-----

A certificate starts with: 

-----BEGIN CERTIFICATE-----

Do not upload certificates where Apple asks for a CSR.

Troubleshooting: Apple Pay button does not show

Check:

Troubleshooting: Apple Pay sheet opens but merchant validation fails

Check:

Troubleshooting: certificate/key mismatch

Fix by creating a fresh matching pair:

  1. Generate a new private key on the server.
  2. Generate a new CSR from that key.
  3. Upload the CSR to Apple under Merchant Identity Certificate.
  4. Download the new certificate.
  5. Convert the certificate to PEM.
  6. Paste the new cert PEM and matching key PEM into Magento.

Security notes

Never place these files in pub/:

Recommended server location:

var/applepay/ 

chmod 700 var/applepay
chmod 600 var/applepay/applepay_merchant_identity.key

The only Apple Pay-related file that should be publicly accessible is:

/.well-known/apple-developer-merchantid-domain-association

React Checkout Pro can serve that file from Magento Admin configuration.

Quick end-to-end checklist

  1. Apple Developer: create/open Merchant ID.
  2. Apple Developer: add and verify staging.example.com.
  3. React Checkout Pro: paste Apple domain association file contents.
  4. Authorize.net: generate Apple CSR.
  5. Apple Developer: upload Authorize.net CSR under Apple Pay Payment Processing Certificate.
  6. Server: generate Merchant Identity private key and CSR.
  7. Apple Developer: upload server-generated CSR under Apple Pay Merchant Identity Certificate.
  8. Server: upload new merchant_id.cer and convert to PEM.
  9. Magento Admin: paste Merchant ID, display name, domain, Merchant Identity cert PEM, and private key PEM.
  10. Magento: save config and flush cache.
  11. Safari: test Apple Pay on staging.

Validation checklist

Troubleshooting (general)