New Functionality in Apple Pay

[JordanMoffat]

In the 2024 WWDC, Apple announced support for "3rd party" browsers - that is browsers and devices that are not Safari. This uses an updated version of their SDK. https://developer.apple.com/videos/play/wwdc2024/10108/

Are there any plans to bring this functionality to the Braintree Web SDKs, or is there a way to implement this updated functionality in the existing Braintree v3 libraries?

[sebacampos]

Hi Braintree team,

We're currently using braintree-web v3.133.0. Despite being on a version well beyond v3.85.2 (when non-Safari browser support was supposedly introduced), Apple Pay is not available on Chrome, Firefox, or other non-Safari browsers on macOS.

Our Current Implementation: SDK Version: braintree-web v3.133.0 (loading https://js.braintreegateway.com/web/3.133.0/js/apple-pay.min.js)

const isApplePaySupported = 
  window.ApplePaySession && 
  window.ApplePaySession.supportsVersion(3) && 
  window.ApplePaySession.canMakePayments()

This check returns false on non-Safari browsers, preventing Apple Pay from being displayed as a payment option.

Braintree Support Response: We reached out to Braintree support and were told to implement a "QR code setup" for non-Safari browsers, with a reference to Apple's documentation. However, this conflicts with Braintree's own documentation stating:

"For desktop web purchases: With the latest Apple Pay SDK, customers can also pay using non-Safari browsers."

Source: https://developer.paypal.com/braintree/articles/guides/payment-methods/apple-pay#device-requirements

Questions:

Does braintree-web actually support Apple Pay on non-Safari browsers, or does this require additional implementation beyond the standard applePay.create() flow?

If QR code support is required, should this be handled by Braintree's SDK automatically, or do we need to implement Apple's Web API separately while maintaining Braintree for tokenization?

Are there any code examples or additional configuration steps needed to enable the QR code flow for non-Safari browsers?

Any clarification on the expected behavior and implementation requirements would be greatly appreciated. Thank you!

[WilliamWelsh]

I was able to do this by simply loading the newest apple pay sdk (the one linked on the docs). I didn't change anything else, I simply added a new <script> and suddenly the button shows up in Chrome

I'm on Next.js app router, so I put this in my page.tsx (server side)

 <Script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" />

Otherwise try

<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>