Ni vam treba oblikovati lastnih gumbov za Apple Pay. Pravzaprav vam Apple dobesedno reče, da ne morete. Torej, kaj morate početi v spletu? Na srečo je Apple omogočil pot. To je nekako čudno in vključuje kup lastniških lastnosti in vrednosti CSS, toda whattyagonnado.
Za vse to imajo dokumentacijo, vendar jo bom pripeljal sem, da boste videli dejanske predstavitve.
Tu je natančna koda, ki jo ponujajo:
Oglejte si
gumb Pen Apple Pay Pay Chrisa Coyierja (@chriscoyier)
na CodePen.
V Safariju deluje dobro, vendar sta Chrome in Firefox pravilno zamenjana.
Ni presenetljivo presenetljivo, saj uporablja ozadja, kot je -webkit-named-image(apple-pay-logo-white);v @supports not (-webkit-appearance: -apple-pay-button)scenariju, česar si ne predstavljam nihče drug kot Apple.
Plus ... predlagajo prazno , kar pa ni super.
Brez prevelikih težav jih lahko spustimo . Moral sem dodati border: 0;za Firefox.
Rad bi jih naredil bolj podobne ...
Apple Pay Potem pa dobimo:
Vendar lahko text-indent: -9999px;to odstranimo, nato pa poskrbimo, da smo pravilno nastavili barvo, tako da imamo sprejemljive pomenske gumbe.
Oglejte si
gumb Pen Apple Pay Pay Chrisa Coyierja (@chriscoyier)
na CodePen.
Ampak bolj verjetno ... Sumim, da vidim:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Tako kot v, zakaj sploh prikazati to območje, če uporabljate brskalnik, ki ne podpira tega plačilnega sredstva.
Njihove druge predstavitve imajo podobne težave. Na primer, gumb »Nakup z« vam omogoča:
Buy with Kateri 1) ni gumb in 2) nima celotnega besedila, ki bi povedalo, kaj se dogaja.
Samo še glavo. Ne bi rekel, da ga ne uporabljajte, vendar bi rekel, da si vzemite minuto časa, da očistite HTML in uredite slog, tako da je združljiv med brskalniki.