Du behöver inte designa dina egna knappar för Apple Pay. I själva verket säger Apple dig bokstavligen att du inte kan. Så vad ska du göra på webben? Tack och lov har Apple gett ett sätt. Det är ganska konstigt och involverar en massa proprietära CSS-egenskaper och värden, men whattyagonnado.
De har dokumentation för allt detta, men jag ska porta det här så att du kan se faktiska demos.
Här är den exakta koden de erbjuder:
Se Pen
Apple Pay Button av Chris Coyier (@chriscoyier)
på CodePen.
Fungerar bra i Safari, men Chrome och Firefox är ordentligt förvirrade.
Inte särskilt överraskande, eftersom det använder bakgrunder som -webkit-named-image(apple-pay-logo-white);i @supports not (-webkit-appearance: -apple-pay-button)scenariot, som jag inte kan föreställa mig någon annan än Apple implementerar.
Plus ... de föreslår en tom , vilket inte är bra.
Vi kan floppa dem till en utan alltför mycket besvär. Måste bara lägga till border: 0;för Firefox.
Jag skulle vilja göra dem mer som ...
Apple Pay Men då får vi:
Men vi kan göra text-indent: -9999px;det och se till att vi ställer in färgen ordentligt så att vi har acceptabla semantiska knappar.
Se Pen
Apple Pay Button av Chris Coyier (@chriscoyier)
på CodePen.
Men mer troligt ... Jag skulle misstänka att se:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Som i, varför visa det området alls om du befinner dig i en webbläsare som inte stöder den betalningsmetoden.
Deras andra demonstrationer har liknande problem. Till exempel ger knappen "Köp med" dig:
Buy with Vilken 1) inte är en knapp och 2) inte har fullständig text för att säga vad som händer.
Bara en heads up. Jag skulle inte säga att inte använda den, men jag skulle säga ta en minut att städa upp HTML och få stylingen rätt så att den är kompatibel med webbläsare.