# Square Web Payments SDK Apple pay valid instance but no button

**URL:** <https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021>\
**Category:** Questions\
**Tags:** web-payments-sdk\
**Created:** [October 4, 2024, 2:41am UTC](https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021 "2024-10-04T02:41:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![liam\_pixeldev](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@liam\_pixeldev](https://developer.squareup.com/forums/u/liam_pixeldev)\
**Post date:** [October 4, 2024, 2:41am UTC](https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021/1 "2024-10-04T02:41:22Z")

</div>

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

```auto
    // 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:

```auto
{
    "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](https://demo.squaresyncforwoo.com/checkout/)  
Objects/instances are logged to console

---

<div class="post-metadata">

**Author:** ![Square-Dev-AI](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/square-dev-ai/32/2513_2.png) [@Square-Dev-AI](https://developer.squareup.com/forums/u/Square-Dev-AI)\
**Post date:** [October 4, 2024, 2:41am UTC](https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021/2 "2024-10-04T02:41:40Z")

</div>

👋 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:

> **[Enable Apple Pay](https://developer.squareup.com/docs/in-app-payments-sdk/add-digital-wallets/apple-pay)**
>
> Enable Apple Pay for the Square In-App Payments SDK.

> **[Troubleshoot In-App Payments SDK Problems](https://developer.squareup.com/docs/in-app-payments-sdk/troubleshooting)**
>
> Troubleshoot problems with the Square In-App Payments SDK.

> **Additional Documentation**
>
> [In-App Payments SDK Quickstart](https://developer.squareup.com/docs/in-app-payments-sdk/quick-start)  
> [In-App Payments SDK Quickstart](https://developer.squareup.com/docs/in-app-payments-sdk/quick-start/start)  
> [Enable Google Pay](https://developer.squareup.com/docs/in-app-payments-sdk/add-digital-wallets/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.

---

<div class="post-metadata">

**Author:** ![liam\_pixeldev](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@liam\_pixeldev](https://developer.squareup.com/forums/u/liam_pixeldev)\
**Post date:** [October 4, 2024, 1:20pm UTC](https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021/3 "2024-10-04T13:20:25Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [October 4, 2024, 4:41pm UTC](https://developer.squareup.com/forums/t/square-web-payments-sdk-apple-pay-valid-instance-but-no-button/19021/4 "2024-10-04T16:41:03Z")

</div>

Glad to hear that you got it to work. 🙂