Square Web Payments SDK Apple pay valid instance but no button

Questions
1

Having trouble the the payments SDK. Google is working fine however Apple pay is not displaying the apple pay button even after successfull initiation. Its not producing any errors so I am lost.

The #apple-pay-button html element remains empty.

Init method, within document.ready

    // Initialize Apple Pay
     try {
        // Initialize Apple Pay (no attach needed)
        const applePayInstance = await payments.applePay(paymentRequest);

        jQuery('#apple-pay-button').on('click', async function (e) {
            e.preventDefault();
            await handleTokenizationAndVerification(applePayInstance, 'Apple Pay');
        });
    } catch (error) {
        console.error('Failed to initialize Apple Pay:', error);
    }

I get a valid applepay instance with this, but no button.
Payment request object:

{
    "requestShippingContact": true,
    "requestEmailAddress": true,
    "requestBillingContact": true,
    "countryCode": "AU",
    "currencyCode": "AUD",
    "shippingOptions": [
        {
            "id": "flat_rate:1",
            "label": "Flat rate",
            "amount": "15.00"
        }
    ],
    "total": {
        "label": "SWS (via WooCommerce)",
        "amount": "114.00",
        "pending": false
    },
    "lineItems": [
        {
            "label": "Simple product",
            "amount": "99.00",
            "pending": false
        },
        {
            "label": "Shipping",
            "amount": "15.00",
            "pending": false
        }
    ]
}

Feel free to test yourself, Cart – SquareSync for Woo
Objects/instances are logged to console

2

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

In-App Payments SDK Quickstart
In-App Payments SDK Quickstart
Enable Google Pay

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

So not sure why this works, but adding these html elements within the button makes it work.

<div id="apple-pay-button" class="" role="button" style="height: 48px;">
	<span class="text"></span>
	<span class="logo"></span>
</div>

Shame the documentation doesnt mention this

4

Glad to hear that you got it to work. :slightly_smiling_face: