Sinun ei tarvitse suunnitella omia painikkeitasi Apple Paylle. Itse asiassa Apple kertoo kirjaimellisesti, ettet voi. Joten mitä aiot tehdä verkossa? Onneksi Apple on tarjonnut tavan. Se on melko outoa ja sisältää joukon omia CSS-ominaisuuksia ja -arvoja, mutta whattyagonnado.
Heillä on dokumentaatio tästä kaikesta, mutta siirrän sen tänne, jotta näet todelliset demot.
Tässä on heidän tarjoama tarkka koodi:
Katso
Chris Coyierin (@chriscoyier) kynä Apple Pay Button
CodePenistä.
Toimii hyvin Safarissa, mutta Chrome ja Firefox ovat oikein sekaisin.
Ole kovin yllättävää, koska se käyttää taustoja kuin -webkit-named-image(apple-pay-logo-white);vuonna @supports not (-webkit-appearance: -apple-pay-button)skenaariossa, jota en voi kuvitella ketään mutta Apple toteuttamisessa.
Plus ... he ehdottavat tyhjää , mikä ei ole hienoa.
Voimme kääntää ne a: ksi ilman liikaa vaivaa. Piti vain lisätä border: 0;Firefoxia varten.
Haluaisin tehdä niistä enemmän ...
Apple Pay Mutta sitten saamme:
Mutta voimme text-indent: -9999px;poistaa sen ja varmistaa, että asetamme värin oikein, jotta meillä on hyväksyttävät semanttiset painikkeet.
Katso
Chris Coyierin (@chriscoyier) kynä Apple Pay Button
CodePenistä.
Mutta todennäköisemmin ... epäilen nähdä:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Kuten, miksi näyttää kyseisen alueen ollenkaan, jos olet selaimessa, joka ei tue kyseistä maksutapaa.
Heidän muilla demoillaan on samanlaisia ongelmia. Esimerkiksi "Osta" -painike antaa sinulle:
Buy with Mikä 1) ei ole painike ja 2) siinä ei ole täydellistä tekstiä sanomaan mitä tapahtuu.
Vain heads up. En sanoisi, ettet käytä sitä, mutta sanoisin, että vie minuutti HTML: n puhdistamiseen ja tyylin saamiseksi oikein, jotta se on selainten kanssa yhteensopiva.