Du behøver ikke at designe dine egne knapper til Apple Pay. Faktisk fortæller Apple dig bogstaveligt talt, at du ikke kan. Så hvad skal du gøre på nettet? Heldigvis har Apple givet en måde. Det er lidt underligt og involverer en masse proprietære CSS-egenskaber og værdier, men whattyagonnado.
De har dokumentation for alt dette, men jeg sender det her, så du kan se faktiske demoer.
Her er den nøjagtige kode, de tilbyder:
Se Pen
Apple Pay-knappen af Chris Coyier (@chriscoyier)
på CodePen.
Fungerer fint i Safari, men Chrome og Firefox er ordentligt forvirrede.
Ikke meget overraskende, da det bruger baggrunde som -webkit-named-image(apple-pay-logo-white);i @supports not (-webkit-appearance: -apple-pay-button)scenariet, som jeg ikke kan forestille mig nogen anden end Apple implementerer.
Plus ... de foreslår en tom , hvilket ikke er fantastisk.
Vi kan flippe dem over på en uden for mange problemer. Bare måtte tilføje border: 0;til Firefox.
Jeg vil gerne gøre dem mere som ...
Apple Pay Men så får vi:
Men vi kan text-indent: -9999px;fjerne det, så sørg for, at vi indstiller farven korrekt, så vi har acceptable semantiske knapper.
Se Pen
Apple Pay-knappen af Chris Coyier (@chriscoyier)
på CodePen.
Men mere sandsynligt ... Jeg formoder at se:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Som i, hvorfor vise det område overhovedet, hvis du er i en browser, der ikke understøtter den betalingsmetode.
Deres andre demoer har lignende problemer. For eksempel giver knappen "Køb med" dig:
Buy with Hvilken 1) der ikke er en knap og 2) ikke har fuld tekst i den for at sige, hvad der foregår.
Bare et hoved op. Jeg vil ikke sige, brug ikke det, men jeg vil sige tage et øjeblik på at rydde op i HTML og få stylingen rigtig, så den er kompatibel med browseren.