Du trenger ikke å designe dine egne knapper for Apple Pay. Faktisk forteller Apple deg bokstavelig talt at du ikke kan. Så hva skal du gjøre på nettet? Heldigvis har Apple gitt en måte. Det er ganske rart og involverer en haug med proprietære CSS-egenskaper og verdier, men whattyagonnado.
De har dokumentasjon for alt dette, men jeg vil portere det her, slik at du kan se faktiske demoer.
Her er den nøyaktige koden de tilbyr:
Se Pen
Apple Pay Button av Chris Coyier (@chriscoyier)
på CodePen.
Fungerer bra i Safari, men Chrome og Firefox er ordentlig forvirret.
Ikke veldig overraskende, siden den bruker bakgrunner som -webkit-named-image(apple-pay-logo-white);i @supports not (-webkit-appearance: -apple-pay-button)scenariet, som jeg ikke kan forestille meg noen andre enn Apple implementerer.
Pluss ... de foreslår en tom , som ikke er bra.
Vi kan floppe dem til en uten for mye problemer. Måtte bare legge til border: 0;for Firefox.
Jeg vil gjerne gjøre dem mer som ...
Apple Pay Men så får vi:
Men vi kan text-indent: -9999px;fjerne det, så sørg for at vi setter fargen riktig slik at vi har akseptable semantiske knapper.
Se Pen
Apple Pay Button av Chris Coyier (@chriscoyier)
på CodePen.
Men mer sannsynlig ... Jeg mistenker å se:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Som i, hvorfor vise det området i det hele tatt hvis du er i en nettleser som ikke støtter den betalingsmåten.
Deres andre demoer har lignende problemer. For eksempel gir "Kjøp med" -knappen deg:
Buy with Hvilken 1) ikke er en knapp, og 2) ikke har full tekst i den for å si hva som skjer.
Bare en head up. Jeg vil ikke si at ikke bruk den, men jeg vil si ta et øyeblikk å rydde opp i HTML og få stylingen riktig så den er kompatibel i flere nettlesere.