Apple Pay NOT Working

[realashleybaile]

Any reason Apple Pay is not working on either my own website or on even Squares own Website, I know that it only works in Safari and I have tested on my iPhone iPad and macBook, I have even view the checkout process on Squares own website and its not working there either, console is throwing this error:

Unrecognized Content-Security-Policy directive 'require-trusted-types-for'.

and

Unrecognized Content-Security-Policy directive 'worker-src'.

[tranguyen]

Sorry to hear this @realashleybaile! Can you share a link to your website with me? I can take a closer look at this on my end.

[realashleybaile]

Unfortunately the website is under private development so wouldn't be able to however I can share Screenshots and Code

[realashleybaile]

I have attached screenshots of my console log and page, I am running the site on a local server on https connection with a registered domain that I have added to my Developer Dashboard and Verified, here is also a link to my Javascript code https://jsfiddle.net/0so8td47/

[tranguyen]

Thanks for sending that on @realashleybaile! To make sure I can get the right team to look into this, can you let me know if this was a Square Online site or if you are using our API documentations?

If it's a Square Online site, the team would need a link to the website in order to investigate it further. 

[realashleybaile]

Hi, so my website is using the API documentation, however to further investigate the situation I attempted to load the checkout on my square online site and it would not load Apple Pay on there either it appears that the same error show in the console on there too.

[realashleybaile · Accepted solution]

After extensive debugging I was able to close down on the issue and traced it down to missing CSS values 

    #apple-pay-button {
        height: 48px;
        width: 100%;
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: plain;
        -apple-pay-button-style: black;
        margin-bottom: 5px;
    }

apologies for the inconvenience, when reading documentations the wording had me believe that the CSS values were optional for further customization and that Apple Pay would take on on a default configuration otherwise.

[Emma_]

Hi @realashleybaile, we're glad to hear you resolved it. Have a great day!