No text on ApplePay Button

I am currently integrating ApplePay in our Adyen payment solution. The payment is working, but the button is just white (or black depending on buttonColor). There is no Apple icon or "Pay" text showing.

I tried different configurations for applepay described in Adyens doc (https://docs.adyen.com/payment-methods/apple-pay/web-component/?tab=config-sessions_1#optional-configuration). First approach of the applepay configuration was this one which follows the doc at adyen:

{
    "buttonType": "plain",
    "buttonColor": "white"
}

Then I looked into the documentation which apple provides and I came out with this configuration:

{
    "totalPriceLabel": "Total",
    "locale": "de-DE",
    "merchantCapabilities": [
        "supports3DS"
    ],
    "supportedNetworks": [
        "visa",
        "masterCard",
        "amex",
        "jcb"
    ],
    "countryCode": "DE",
    "currencyCode": "EUR",
    "total": {
        "type": "final",
        "label": "Total",
        "amount": 48.0,
        "currency": "EUR"
    }
}

The button is showing like this:

We are using adyen-web in version 5.57.0 and apple pay as web Component.

I appreciate any help / hint which helps me sorting this out.

I have found the answer to this question and as always it was an unexpected easy problem.

Adyen seems not to set the button css styles correctly, so you need to do it yourself. The default of -webkit-appearance: button caused the issue.

Following the documentation on apple it is explained what to set (https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css#3667431)

The classes, adyen is using, are a bit different, so adding this to my css fixed the issue:

.adyen-checkout__applepay__button { 
  display: inline-block; 
  -webkit-appearance: -apple-pay-button; 
  -apple-pay-button-type: plain; 
} 
.adyen-checkout__applepay__button--black { 
  -apple-pay-button-style: black; 
} 
.adyen-checkout__applepay__button--white { 
  -apple-pay-button-style: white; 
}