Você não precisa criar seus próprios botões para o Apple Pay. Na verdade, a Apple literalmente diz que você não pode. Então, o que você deve fazer na web? Felizmente, a Apple forneceu uma maneira. É meio estranho e envolve um monte de propriedades e valores CSS proprietários, mas e aí?
Eles têm documentação para tudo isso, mas vou portá-la aqui para que você possa ver as demonstrações reais.
Aqui está o código exato que eles oferecem:
Veja o Pen
Apple Pay Button de Chris Coyier (@chriscoyier)
no CodePen.
Funciona bem no Safari, mas Chrome e Firefox são confundidos apropriadamente.
Não é muito surpreendente, já que usa fundos como -webkit-named-image(apple-pay-logo-white);no @supports not (-webkit-appearance: -apple-pay-button)cenário, que não consigo imaginar ninguém além da Apple implementando.
Além disso ... eles estão sugerindo um vazio , o que não é ótimo.
Podemos colocá-los em um sem muitos problemas. Só tive que adicionar border: 0;para o Firefox.
Eu gostaria de torná-los mais parecidos com ...
Apple Pay Mas então temos:
Mas podemos fazer text-indent: -9999px;isso e então ter certeza de definir a cor corretamente para que tenhamos botões semânticos aceitáveis.
Veja o Pen
Apple Pay Button de Chris Coyier (@chriscoyier)
no CodePen.
Mas o mais provável ... eu suspeito ver:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Tipo, por que mostrar essa área se você está em um navegador que não suporta esse método de pagamento.
Seus outros demos têm problemas semelhantes. Por exemplo, o botão "Comprar com" oferece:
Buy with Qual) 1) não é um botão e 2) não contém texto completo para dizer o que está acontecendo.
Apenas um aviso. Eu não diria para não usar, mas eu diria que tire um minuto para limpar o HTML e obter o estilo correto para que seja compatível com vários navegadores.