We are seeking assistance with an issue encountered during the integration of Apple Pay into our web application using the third-party payment gateway Heartland.
Our application uses JavaScript on the client side and PHP on the server side.
Despite following all the guidelines provided by Heartland, we are unable to validate the merchant at the backend. The validation consistently returns false. We request your guidance or a step-by-step solution to help resolve this issue.
Steps Followed:
Registered a merchant identifier in our Apple Developer account.
Enabled the Apple Pay Processing Certificate for the merchant.
Logged into the Heartland account, accessed the Apple Pay setup page from the "Keys and Credentials" section, and created a Certificate Signing Request (CSR).
Uploaded the CSR from Heartland to the Apple Pay Processing Certificate in the Apple Developer account.
Downloaded the signed certificate from the Apple Developer account and uploaded it to Heartland.
For the web application:
Registered the merchant identifier and validated our domain in the Apple Developer account.
Created a Merchant Identity Certificate linked to the same merchant identifier.
Followed the same steps 2–5 from the in-app implementation.
Code Implementation:
Client-Side (React):
import React from 'react';
const Button = () => {
const initializeApplePay = () => {
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
const paymentRequest = {
countryCode: 'US',
currencyCode: 'USD',
supportedNetworks: ['visa', 'masterCard', 'amex'],
merchantCapabilities: ['supports3DS'],
total: { label: 'Your Store', amount: '1.00' },
};
const session = new window.ApplePaySession(3, paymentRequest);
// Merchant Validation
session.onvalidatemerchant = (event) => {
fetch('https://staging-api.parkengage.com/apple-pay-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
initiative: 'web',
initiativeContext: 'parkengage.com',
validationURL: event.validationURL,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.error) {
console.error('Merchant validation failed:', data.error);
} else {
session.completeMerchantValidation(data);
}
})
.catch((error) => console.error('Validation error:', error));
};
session.onpaymentauthorized = (event) => {
const paymentToken = event.payment.token;
fetch('/process-payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: paymentToken }),
})
.then((response) => response.json())
.then((data) => {
if (data.success) {
session.completePayment(window.ApplePaySession.STATUS_SUCCESS);
} else {
session.completePayment(window.ApplePaySession.STATUS_FAILURE);
}
})
.catch((error) => console.error('Payment error:', error));
};
session.begin();
} else {
console.log('Apple Pay is not supported on this device.');
}
};
return (
Buy with Apple Pay
);
};
export default Button;
Server-Side (PHP cURL):
curl 'https://staging-api.parkengage.com/apple-pay-session'
-X 'POST'
-H 'Content-Type: application/json'
--data-binary '{
"initiative": "web",
"initiativeContext": "https://parkengage.com",
"validationURL": "https://apple-pay-gateway-cert.apple.com/paymentservices/startSession"
}'
Issue:
The merchant validation fails and returns false.
Please guide us on troubleshooting this issue or provide insights on missing configurations.
