i have been looking at implementing Apple Pay on a site and am currently investigating the various UI brand guidelines that Apple stipulates for an Apple Pay button, and have been following the developer examples on the Apple site.
It is useful that a lot of the styling is embedded in the Safari browser, but i am struggling to see how to change the size of the text and Apple logo in the button. I am currently setting the following css:
.apple-pay-button {
display: inline-block;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: donate;
-apple-pay-button-style: white-outline;
background-image: -webkit-named-image(apple-pay-logo-white);
height: 177px;
width: 100%;
border-radius: 5px;
padding: 0;
background-color: white;
}
and the Apple logo and text is massive. Setting font-size has no effect whatsoever so it can't be that. The only thing that seems to have a bearing on the font and logo size in the button is by adjusting the height and i need the height to be 177px to match other buttons.
Also a related question is how is the logo and text actually being rendered? Safari dev tools shows an empty div. There are no pseudo elements in there, and it doesn't seem to be coming from the shadow DOM. I'm assuming that the logo is an SVG as it seems to scale nicely, but i can't see it in the dev tools whatsoever. It would be handy to know exactly where the Apple logo and text are coming from.
Thanks
