<script src="https://js.braintreegateway.com/web/3.92.0/js/client.min.js"></script>
Apple Pay on the Web
RSS for tagApple Pay on the Web allows you to accept Apple Pay on your website using JavaScript-based APIs.
Posts under Apple Pay on the Web tag
144 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I've a apple pay integration on my website. The new sdk, that allows third party browsers.
My integration works well everywhere, except on third party when I read the QR code it results in a "payment incomplete".
I have gone through several threads in apple dev forums, and several guides on implementation steps and troubleshooting. But I'm still without solution.
When Debugging in iOS device I get: "Application failed to provide a valid merchant session. We can't proceed to authorize the transaction."
I've doublechecked, the values I send to create the payment Session are correct, the domain and merchantIds. (It works well with the same implementation on safari, what's the difference here?)
I've also doublechecked the values i'm sending to the completeMerchantValidation, and they are all in the right format and types.
What else can iIcheck?
Hi team,
We were wondering what's the correct way of configuring a test environment with Apple Pay.
Not sure if this is explicitly mentioned in the documentation, but in order to avoid having the same certificates shared between test and production, should we have a different merchant identifier (and pair of certificates) for test purposes only?
The above is the main question. However, two follow up questions:
Do you know if payment processors usually allow the merchant ID to be configured, so that only payments generated with the prod certificates can be accepted?
Is there any risk of someone getting hold of the certificates generated for the test environment (which are usually less safe than production) and using that to process payments in production?
Topic:
App & System Services
SubTopic:
Apple Pay
Tags:
Apple Pay on the Web
Apple Pay
Testing
Tap to Pay on iPhone
Hello,
I was going through the Apple Pay API documentation and noticed ambiguity on the exact process to complete merchant validation.
One of the documentation mentions that the validation url will be
Your server posts a request using mutual TLS (mTLS) by calling the Apple Pay server’s Payment Session endpoint.
Endpoint (Global)
POST https://apple-pay-gateway.apple.com/paymentservices/paymentSession
Endpoint (China region)
POST https://cn-apple-pay-gateway.apple.com/paymentservices/paymentSession
Referencing the url: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/requesting_an_apple_pay_payment_session
whereas the other references that the value should be used as provided by the onvalidatemerchant event object with the property validationURL.
Refer: https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/providing_merchant_validation
Can someone confirm which is the correct approach to follow ?
Hi - I have a question. I am trying to understand when Apple Pay will be available on non-IOS desktop devices (specifically Google Chrome). I was hoping to understand better the process, specifically the following:
How can I get the Apple Pay QR code installed on my desktop checkout page on Google Chrome?
How long does this process usually take?
If I work with Stripe, do I need to get approval from them to install the Apple QR code onto my Google Chrome checkout page?
Is this readily available to all merchants (i.e., installing Apple Pay on Google Chrome)/
I have not seen this on any other checkout pages yet. Are there any examples you could point me to of merchants that have installed Apple Pay onto non-IOS desktop so I could trial the process (i.e., a list of existing merchants that have put the QR code onto their Google Chrome checkout pages)?
Topic:
Developer Tools & Services
SubTopic:
Apple Developer Program
Tags:
Enterprise
Apple Pay on the Web
After opening the Apple Pay Popup and try to close the popup (without scanning the QR Code), the oncancel handler (accociated with the created session) doesn't fire.
Meanwhile if the merchant scanned the QR code and the UI of the popup changed, then cancel the popup manually (using close (X) button), it fires the session.oncancel event handler.
Here is applied setup:
const { ApplePaySession } = window;
if (!(ApplePaySession && ApplePaySession.canMakePayments())) {
return new Error('Apple Pay Session is not available');
}
const paymentCapabilities = await ApplePaySession.applePayCapabilities(
applePaymentOptionsMetaData.merchantIdentifier,
);
if (paymentCapabilities.paymentCredentialStatus === 'applePayUnsupported') {
console.error('ApplePaySession is not supported.');
return;
}
const request = {
"countryCode": "KW",
"currencyCode": "KWD",
"merchantCapabilities": [
"supports3DS"
],
"supportedNetworks": [
"VISA",
"MASTERCARD"
],
"billingContact": {
"phoneNumber": "201000000000",
"emailAddress": "example@test.com",
"givenName": "Ahmed",
"familyName": "Sharkawy"
},
"total": {
"amount": "3.085",
"label": "Merchant Testing"
}
}
const session = new ApplePaySession(5, request);
session.onvalidatemerchant = async event => {
if (debug) {
console.info('Creating merchant session and validating merchant session');
console.info('onvalidatemerchant event', event);
}
try {
// Validation Merchant Request
session.completeMerchantValidation(data);
} catch (error: any) {
session.completePayment({ status: ApplePaySession.STATUS_FAILURE });
}
};
session.onpaymentauthorized = async (event) => {
session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
};
// This doesn't fire
session.oncancel = () => {
console.info('EVENT: oncancel');
};
session.begin();
My account has reached it's 99 merchant ID limit and I have applied and got approval for using the API that allows me to exceed the limit.
I was testing the API according to the documentation in Postman, but I am getting the following error:
POST https : //apple- pay-gateway.apple.com/paymentservices/registerMerchant
Error: read ECONNRESET
Please find below the cURL we are using according to the docs:
curl --location 'https://apple-pay-gateway.apple.com/paymentservices/registerMerchant'
--header 'Content-Type: application/json'
--data '{
"domainNames": "https://checkout.montypay.com",
"encryptTo": "merchant.test.montypay",
"partnerInternalMerchantIdentifier": "merchant.test.montypay",
"partnerMerchantName": "Test"
}'
Please note that I tried the Live and the sandbox endpoints and both gave the same error.
On an older iPhone I'm testing with (6s, iOS 12.5.7), connected to the same Sandbox Apple ID that I'm using on multiple other devices, the Apple Pay button is not appearing. Neither on my web application, whatever version I set in the PaymentRequest, nor on the official demo site.
Further, 2 sandbox cards that were added fine to these other devices are failing to add on this one. Same cards and CVV codes are getting errors. At least "Invalid Card" on one of them. Although the other failed several times, then just worked this time when I tried it again :confused:
But on this phone, I have two cards successfully added, so the button should be appearing. On the demo site, whether I select Apple Pay JS API or Payment Request API, the button does not appear.
I am facing an issue while integrating Apple Pay in my React.js application. The onvalidatemerchant callback works perfectly, and the merchant validation is successfully completed. However, after the Apple Pay session is validated, the payment sheet appears briefly and then closes immediately without triggering the onpaymentauthorized event.
I have provided the relevant code snippets and API implementation below. I would greatly appreciate your insights on resolving this issue.
import React, { useEffect, useRef, useState } from "react";
// Relevant imports
const ApplePayButton = ({ paymentType, handlePayment, cartSummary }) => {
const [applePaySession, setApplePaySession] = useState(null);
const cartSummaryRef = useRef(cartSummary);
useEffect(() => {
cartSummaryRef.current = cartSummary;
}, [cartSummary]);
const setupApplePaySession = async () => {
if (!window.ApplePaySession || !ApplePaySession.canMakePayments()) {
console.log("Apple Pay is not supported on this device/browser.");
return;
}
const paymentRequest = {
countryCode: "US",
currencyCode: "USD",
merchantCapabilities: ["supports3DS"],
supportedNetworks: ["visa", "masterCard", "amex"],
total: {
label: "Total",
amount: `${cartSummaryRef.current?.total?.amount || "10.00"}`,
},
requiredBillingContactFields: ["postalAddress", "email", "phone", "name"],
};
const session = new ApplePaySession(6, paymentRequest);
setApplePaySession(session);
session.onvalidatemerchant = async (event) => {
try {
const response = await createAndValidateApplePaySession({
validation_url: event.validationURL,
provider: "APPLE_PAY",
});
if (response?.status && response?.data?.applePaySession) {
const merchantSession = JSON.parse(
response.data.applePaySession.session_details
);
session.completeMerchantValidation(merchantSession);
} else {
console.error("Merchant validation failed: Invalid response.");
}
} catch (error) {
console.error(`Merchant validation error: ${JSON.stringify(error)}`);
}
};
session.onpaymentauthorized = (event) => {
console.log("Payment authorized:", event.payment);
};
session.oncancel = () => {
console.log("Payment cancelled.");
};
session.onerror = (event) => {
console.error(`Apple Pay error: ${JSON.stringify(event)}`);
};
session.begin();
};
return (
<>
{paymentType === "APPLE_PAY" && (
)}
</>
);
};
export default ApplePayButton;
createAndValidateApplePaySession = async (data) => {
const { validation_url } = data;
const apiUrl = ${this.finixUrl}/apple_pay_sessions;
const base64Credentials = Buffer.from(this.credentials).toString("base64");
const body = {
validation_url,
merchant_identity: process.env.FINIX_APPLE_PAY_MERCHANT_ID,
domain: process.env.FINIX_APPLE_PAY_DOMAIN,
display_name: process.env.FINIX_APPLE_PAY_DISPLAY_NAME,
};
const requestData = {
url: apiUrl,
data: body,
headers: {
"Content-Type": "application/json",
Authorization: Basic ${base64Credentials},
},
};
try {
const response = await axios.post(requestData.url, requestData.data, {
headers: requestData.headers,
});
return response?.data;
} catch (error) {
console.error("Merchant validation failed:", error);
return error;
}
};
Current Behavior:
Apple Pay button renders successfully.
Clicking the button triggers the setupApplePaySession function.
The merchant validation completes successfully via the onvalidatemerchant callback, and a valid merchant session is received from the API.
The Apple Pay sheet appears briefly and then closes immediately.
The onpaymentauthorized callback is never triggered.
Expected Behavior:
The payment sheet should remain open after merchant validation, allowing the user to select a payment method and authorize the payment. The onpaymentauthorized callback should then be triggered to handle the payment token.
Subject: Apple Pay JS - "Payment Was Cancelled by the User" Issue (Braintree + Server-Side Validation)
Issue
I am implementing Apple Pay using Braintree with server-side validation. However, when initiating the payment process, I receive the following error:
[Log] Payment was cancelled by the user: (apple-pay-test-ucxp.onrender.com, line 286)
Additionally, the console logs an ApplePayCancelEvent with:
sessionError: {code: "unknown", info: {}}
Despite successfully fetching merchant session validation data from the backend and completing merchant validation, the payment process does not proceed.
Setup Details
Payment Processor: Braintree (Apple Pay integration)
Backend API: Fetching merchant session validation via createPaymentSessionGet
Payment Processing: Using Braintree nonce tokenization
Client-Side Code (Key Sections)
session.onvalidatemerchant = async (event) => {
try {
const merchantSession = await fetch(
"https://api.paybito.com:9443/ApplePay/api/apple-pay/createPaymentSessionGet",
{
method: "GET",
headers: { "Content-Type": "application/json" },
}
).then((res) => res.json());
session.completeMerchantValidation(merchantSession);
} catch (err) {
console.error("Merchant validation failed:", err);
session.abort();
}
};
session.onpaymentauthorized = async (event) => {
try {
const payload = await applePayInstance.tokenize({
token: event.payment.token,
});
const response = await fetch(
"https://api.paybito.com:9443/ApplePay/api/braintree/process-payment",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nonce: payload.nonce }),
}
).then((res) => res.json());
if (response.success) {
session.completePayment(ApplePaySession.STATUS_SUCCESS);
} else {
session.completePayment(ApplePaySession.STATUS_FAILURE);
}
} catch (err) {
console.error("Payment authorization failed:", err);
session.completePayment(ApplePaySession.STATUS_FAILURE);
}
};
Observations
Merchant validation completes successfully.
The error occurs before onpaymentauthorized executes.
Session error code is unknown, making debugging difficult.
Questions
Has anyone encountered this issue before?
Could this be related to how the validation session is fetched from the backend?
Is there a way to obtain more meaningful debug information from Apple Pay?
Any insights would be greatly appreciated!
Hello Everyone,
I am trying to integrate apple pay on my website and have followed the following steps.
Created a merchant identifier in my apple developer account.
Generated a payment processing certificate using Certificate signing Request generated through keychain.
Downloaded the certificate and converted that to pem file using the following command
openssl x509 -inform DER -in apple_pay.cer -out apple_pay.pem
Imported the cer file into keychain and exported .p12 file and generated private key using the following command.
openssl pkcs12 -in Certificates.p12 -out private_key.pem -nocerts
Utilizing apple_pay.pem and private_key.pem files for merchant verification call and getting the following response.
cURL Error: OpenSSL SSL_read: error:14094418:SSL routines:ssl3_read_bytes:tlsv1 alert unknown ca, errno 0
Trying 17.141.128.7:443...\n* TCP_NODELAY set\n* Connected to apple-pay-gateway.apple.com (17.141.128.7) port 443 (#0)\n* ALPN, offering h2\n* ALPN, offering http/1.1\n* successfully set certificate verify locations:\n* CAfile: /etc/ssl/certs/ca-certificates.crt\n CApath: /etc/ssl/certs\n* SSL connection using TLSv1.3 / TLS_AES_128_GCM_SHA256\n* ALPN, server accepted to use http/1.1\n* Server certificate:\n* subject: businessCategory=Private Organization; jurisdictionC=US; jurisdictionST=California; serialNumber=C0806592; C=US; ST=California; L=Cupertino; O=Apple Inc.; CN=apple-pay-gateway.apple.com\n* start date: Dec 19 00:22:44 2024 GMT\n* expire date: Mar 12 19:42:00 2025 GMT\n* issuer: C=US; O=Apple Inc.; CN=Apple Public EV Server RSA CA 1 - G1\n* SSL certificate verify ok.\n> POST /paymentservices/startSession HTTP/1.1\r\nHost: apple-pay-gateway.apple.com\r\nAccept: /\r\nContent-Type: application/json\r\nContent-Length: 143\r\n\r\n* upload completely sent off: 143 out of 143 bytes\n* OpenSSL SSL_read: error:14094418:SSL routines:ssl3_read_bytes:tlsv1 alert unknown ca, errno 0\n* Closing connection
I also tried to include AppleWWDRCAG2 and AppleRootCA-G2 certificated but same response every time.
multiTokenContexts is defined as follows
(https://developer.apple.com/documentation/passkit/pkpaymentrequest/multitokencontexts)
You can assign a value when initializing PKPaymentRequest (https://developer.apple.com/documentation/passkit/pkpaymentrequest).
However, in actual usage scenarios, when the Apple Pay address changes and PKPaymentRequestShippingContactUpdate (https://developer.apple.com/documentation/passkit/pkpaymentrequestshippingcontactupdate) is triggered, how to update multiTokenContexts?
The documentation and code do not provide updates for this parameter.
In contrast, Apple Pay on the Web provides newMultiTokenContexts as an update when ApplePayShippingContactUpdate (https://developer.apple.com/documentation/apple_pay_on_the_web/applepayshippingcontactupdate) is triggered.
Has anyone encountered this problem? Would you happen to have any solutions? Thank you.
I'm trying to create an Apple Pay session for my website. I'm starting with curl for now, just to get proof of concept.
curl --cert cert.pem --pass {passphrase} --header "Content-Type: application/json" --request POST --data '{"merchantIdentifier":"{merchantIdentifier}","displayName":"testDisplayName", "initiative": "web", "initiativeContext": "{domain}"}' https://apple-pay-gateway.apple.com/paymentservices/paymentSession
This is the response I get back
{
"statusMessage": "Payment Services Exception merchantId={VERY-LONG-ID} not registered for domain={domain}",
"statusCode": "400"
}
I'm not sure why this is happening. {domain} is in the form of sub.site.tld with no protocol, such as https, which matches what I see in the list of the domains in the merchant identity dashboard. The {merchantIdentifier} also matches what I see in the top right, but the merchantId in the response is something I don't recognize. It's a long string of characters that appears to be hexadecimal.
I added the apple-developer-merchantid-domain-association file to my .well-known directory and the dashboard does report that the domain is verified.
I am making the request from the web server that the domain resolves to, if that matters.
I can't think of any reason this would be happening.
I'm not sure where the long merchantId in the response is coming from. Does it matter that it doesn't match what I supplied in the request? As far as I can tell, I am using the correct merchantIdentifier. It matches the dashboard and the CN field of the certificate.
I found this other post that seems to have a similar error: https://forums.developer.apple.com/forums/thread/671227
The main difference is a 417 status code instead of the 400 I got. But the problem here was that there was no payment processing certificate and I do have one of those.
I haven't checked with my processor to verify that the certificate is published, but I will do that soon. I wouldn't expect that to matter. Maybe it does?
What other reason could I be getting this error?
Could it be a problem with my merchant identity certificate? It took a lot of effort to make it work. But I suspect it's fine, otherwise I wouldn't be getting a response from Apple at all. I can't think of any other possible problems.
Has anyone had any success enabling Apple Pay checkout for a Google Chrome or Firefox users (macOS or PC)? This was rolled out in iOS 18 but Shopify support hasn't been able to help:
https://www.theverge.com/2024/6/13/24177851/apple-ios-18-pay-chrome-scanning-code-wwdc-2024
Thanks
Apple Pay fails with an "AbortError" when the dialog for the fingerprint sensor opens.
How do I find the cause of the "AbortError" which only occurs in the web integration in our production environment?
In the sandbox environment, Apple Pay works flawlessly. This concerns a web integration of Apple Pay using the Apple Pay SDK, one version before 1.2.0. The error occurs when I call the show() method on the PaymentRequest object. The Apple Pay dialog opens with the fingerprint icon, but after one second, an exclamation mark appears, and the Apple Pay dialog closes again while throwing the "AbortError".
I know that our Apple Pay integration worked for multiple customers in the production environment already. The current problem is that Apple's error message, called "AbortError," provides no indication of the cause. This could be greatly improved.
One affected customer, for example, is the one with the Merchant ID … (Is it safe to post a Merchant ID in this forum?) I can reproduce the "AbortError" issue at any time using my iPhone with iOS 16.7.8.
Since updating to Apple Pay SDK 1.2.0, the Apple Pay button is no longer being rendered. Could you please fix this as soon as possible? From my perspective, the issue is clearly on Apple's side because the button renders correctly when I use Apple Pay SDK 1.1.0. So, the problem lies in your update to:
https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js.
Additionally, I urgently need a contact option regarding the "AbortError", which has recently started occurring for all our customers. Yes, our Apple Pay integration is web-based and has worked flawlessly until now. In the sandbox, Apple Pay still works perfectly!
So why, why, why does it no longer work in the production environment? Could you please provide some indication of the cause? An "AbortError" when calling show() on paymentRequest is not helpful at all.
Issue Description
In our Apple Pay integration process, the validation URL returned from the onvalidatemerchant callback is:
https://apple-pay-gateway.apple.com/paymentservices/startSession
However, according to Apple’s official documentation (reference link), the correct validation URL is:
https://apple-pay-gateway.apple.com/paymentservices/paymentSession
We are seeking clarification and assistance regarding the following issues:
Issue 1
Will continuing to use the startSession URL cause problems or errors? Are there functional differences between the two URLs (startSession and paymentSession)? Does Apple still officially support startSession, or are we required to switch to paymentSession?
Issue 2
We occasionally experience the following 400 error, even though the URL we use for validation is the one returned from the onvalidatemerchant callback:
400: {
"statusMessage": "Payment Services Exception merchantId=*** not registered for domain=***.com",
"statusCode": "400"
}
We have verified the following:
Our Merchant ID and certificates are valid.
All Apple Pay configuration details, including merchant domain verification and placement of the .well-known/apple-developer-merchantid-domain-association file, have been correctly set up and verified.
However, we still encounter the error intermittently.
Questions:
If we need to transition to using paymentSession, how should we do this?
Could this error be related to the use of startSession? If not, how should we troubleshoot further?
Support Needed
Confirmation and clarification on the proper usage and differences between the two URLs: startSession and paymentSession.
Guidance on how we can investigate and resolve the 400 error to ensure that the Apple Pay validation process works consistently.
We appreciate your assistance and support!
Hey there.
I recently completed an Apple Pay (on the web) integration and it has been working fine, for the most part. I had one customer contact us saying that it didn't work on his devices though. I checked it out, and while it does normally work (and we've had over a thousand transactions use it) there does seem to be some scenarios where it fails and I'm not sure why.
I was able to replicate his issue (or at least an issue) by using BrowserStack. When I click the button which should initiate the payment, everything works in the JS code until it gets to the applePaySession.begin() function call. Once it hits that, it just stops. No errors are generated and no notice is given that anything is wrong until you try to do it a second time. Then an error about a payment session already being active on the page is thrown.
I'm not really sure how to troubleshoot this since I know it works on my old iPad Air 2, my current M4 Macbook, multiple other devices, and also works when scanning the QR code for use on an iPhone.
There is some very specific thing with some very specific versions of Safari that seem to be tripping it up.
If it helps, the version of Safari on the BrowserStack device is 18.1, but the version on my Macbook is 18.1.1. The version the customer who is having the issue is on is 18.2 according to him.
The customer also says they have used ApplePay on other websites with no issues. I checked one of them and they appear to be using a PayPal integration, where as I am using the ApplePay SDK straight from Apple.
There are quite a few variables at play here, and I'm just trying to narrow down what I should be looking at. If one person is reporting the issue, there are probably others with it as well.
Using the PaymentRequestAPI, I see this request element listed, but I can't find any description what these features could be:
sequence <ApplePayFeature> features;
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase/4224914-features