Apple Pay not showing even when domain is verified

[wyter]

Describe the bug

We've encountered an issue on the site https://support2enhance.co.uk whereby Apple Pay isn't showing, but Google Pay does show. This was tested both on Mac Safari and iPhone devices.

Logs from the merchant's site show that their domain is already verified with Apple: 2024-04-26T08:35:26+00:00 Notice Your domain has been verified with Apple Pay!.

The only thing that stands out is that the domain association file (https://support2enhance.co.uk/.well-known/apple-developer-merchantid-domain-association) is loaded on the browser instead of being offered for download, but their host has said this is normal.

The issue persists even in conflict test conditions with only WooCommerce, Square, and Storefront running on the merchant's site. My site works as expected though.

We've discussed this with Quark on Slack and have been advised to open a new issue - p1715329230051709-slack-C7U3Y3VMY.

Screenshots

What's showing:

Expected behavior

The site should offer both Apple Pay and Google Pay since express checkouts have been enabled, and there are no errors with Apple Pay itself.

Environment (please complete the following information):

• WordPress Version: 6.5.2
• WooCommerce Version: 8.8.2
• WooCommerce Square Plugin Version: 4.6.1
• Browser [e.g. chrome, safari] and Version: Version 15.6.1

[wyter]

First reported in 8104358-zen

[peterwilsoncc]

I'm able to reproduce this on the block pages for cart and checkout.

• Apple Pay and Google Pay show on the product page
• Apple Pay and Google Pay show on cart (shortcodes)
• Apple Pay and Google Pay show on checkout (shortcodes)
• Google Pay only shows on cart (blocks)
• Google Pay only shows on checkout (blocks)

Cart (Blocks)	Checkout (Blocks)

  |

[peterwilsoncc]

I've been investigating this but without success.

When I verified my domain I downloaded the Apple Pay verification file from the Square dashboard so it's unrelated to #122.

In the linked draft PR I've removed a call to a non-existent function on the applePay object but it hasn't resolved the issue. I can get it to work with virtual products but nothing that requires shipping as the button appears to be destroyed during the apple pay checkout causing the apple pay flow to close.

I'm seeking some feedback and suggestions from the 10up team before proceeding with further testing.

[Sidsector9]

@peterwilsoncc since it is working with virtual products (that doesn't require shipping), it could be that the payment request with shipping details has incorrect format.

Can we confirm this by testing Apple Pay with a hardcoded payment request object, we can replace the following:

woocommerce-square/assets/blocks/digital-wallets/button-component.js

Line 44 in 43d9c61

const paymentRequest = await createPaymentRequest(payments);

with:

const paymentRequest = payments.paymentRequest({
  countryCode: 'US',
  currencyCode: 'USD',
  requestBillingContact: true,
  requestShippingContact: true,
  lineItems: [
    { amount: '5.00', label: 'Item Cost' },
    { amount: '3.00', label: 'Shipping' },
    { amount: '1.50', label: 'Tax' },
  ],
  shippingOptions: [
    {
      amount: '2.50',
      id: 'shipping-option-1',
      label: 'Free',
    },
  ],
  total: {
    amount: '9.50',
    label: 'Total',
  },
});

If this works, then we can further investigate the payment request object we're generating.