U hoeft voor Apple Pay niet uw eigen knoppen te ontwerpen. In feite vertelt Apple je letterlijk dat je dat niet kunt. Dus, wat ga je doen op internet? Gelukkig heeft Apple voor een manier gezorgd. Het is een beetje raar en er zijn een heleboel eigen CSS-eigenschappen en -waarden bij betrokken, maar whattyagonnado.
Ze hebben documentatie voor dit alles, maar ik zal het hier porteren zodat je de daadwerkelijke demo's kunt zien.
Hier is de exacte code die ze aanbieden:
Zie de Pen
Apple Pay-knop van Chris Coyier (@chriscoyier)
op CodePen.
Werkt prima in Safari, maar Chrome en Firefox zijn behoorlijk door elkaar gehaald.
Niet erg verrassend, want het gebruikt achtergronden zoals -webkit-named-image(apple-pay-logo-white);in het @supports not (-webkit-appearance: -apple-pay-button)scenario, waarvan ik me niet kan voorstellen dat iemand anders het implementeert dan Apple.
Plus ... ze suggereren een lege ruimte , wat niet geweldig is.
We kunnen ze zonder al te veel moeite naar a floppen . Ik moest gewoon toevoegen border: 0;voor Firefox.
Ik zou ze graag meer willen maken als ...
Apple Pay Maar dan krijgen we:
Maar we kunnen text-indent: -9999px;dat weg en zorgen ervoor dat we de kleur correct instellen, zodat we acceptabele semantische knoppen hebben.
Zie de Pen
Apple Pay-knop van Chris Coyier (@chriscoyier)
op CodePen.
Maar waarschijnlijker ... ik vermoed te zien:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Zoals in, waarom zou u dat gebied überhaupt laten zien als u zich in een browser bevindt die die betaalmethode niet ondersteunt?
Hun andere demo's hebben vergelijkbare problemen. De knop 'Kopen met' geeft u bijvoorbeeld:
Buy with Welke 1) geen knop is en 2) geen volledige tekst bevat om aan te geven wat er aan de hand is.
Even een waarschuwing. Ik zou niet zeggen: gebruik het niet, maar ik zou zeggen: neem even de tijd om de HTML op te schonen en de stijl goed te krijgen, zodat het compatibel is met meerdere browsers.