Nem kell saját gombokat terveznie az Apple Pay alkalmazáshoz. Valójában az Apple szó szerint azt mondja, hogy nem lehet. Tehát mit kell tennie az interneten? Szerencsére az Apple megadta a módját. Ez elég furcsa és magában foglal egy csomó saját CSS tulajdonságot és értéket, de whattyagonnado.
Van dokumentációjuk minderről, de ide fogom portolni, hogy lássátok a tényleges demókat.
Itt van a pontos kód, amelyet kínálnak:
Lásd
Chris Coyier (@chriscoyier) Pen Apple Pay gombját a CodePen
-en.
Remekül működik a Safari-ban, de a Chrome és a Firefox megfelelően összekevert.
Nem különösebben meglepő, mivel olyan háttérrel rendelkezik, mint -webkit-named-image(apple-pay-logo-white);a @supports not (-webkit-appearance: -apple-pay-button)forgatókönyvben, amit az Apple-n kívül senki más nem tudok elképzelni.
Ráadásul ... egy üreset javasolnak , ami nem túl jó.
Túl nagy baj nélkül átfordíthatjuk őket a-ra . Csak hozzá kellett tenni border: 0;a Firefoxhoz.
Szeretném őket jobban hasonlítani…
Apple Pay De aztán megkapjuk:
De ezt el is tehetjük text-indent: -9999px;, majd ellenőrizzük, hogy megfelelően állítottuk-e be a színt, hogy elfogadható szemantikai gombjaink legyenek.
Lásd
Chris Coyier (@chriscoyier) Pen Apple Pay gombját a CodePen
-en.
De valószínűbb ... gyanítom, hogy látom:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Mint itt, miért kell egyáltalán megmutatni azt a területet, ha olyan böngészőben van, amely nem támogatja ezt a fizetési módot.
Más demóik is hasonló problémákkal küzdenek. Például a „Vásárlás” gombra kattintva megadhatja:
Buy with Ami 1) nem egy gomb, és 2) nincs benne teljes szöveg, hogy megmondja, mi történik.
Csak egy fejjel feljebb. Nem mondanám, hogy ne használja, de azt mondanám, hogy szánjon egy percet a HTML megtisztítására és a stílus megfelelő megalkotására, így böngészőkkel kompatibilis.