Pro Apple Pay nemusíte navrhovat vlastní tlačítka. Ve skutečnosti vám Apple doslova říká, že nemůžete. Co tedy děláte na webu? Naštěstí Apple poskytl způsob. Je to trochu divné a zahrnuje spoustu proprietárních vlastností a hodnot CSS, ale whattyagonnado.
K tomu všemu mají dokumentaci, ale přenesu ji sem, abyste viděli aktuální ukázky.
Zde je přesný kód, který nabízejí:
Podívejte se na tlačítko Pen
Apple Pay od Chrisa Coyiera (@chriscoyier)
na CodePen.
V Safari funguje dobře, ale Chrome a Firefox jsou správně zaměňovány.
Není to nijak překvapivé, protože používá pozadí jako -webkit-named-image(apple-pay-logo-white);ve @supports not (-webkit-appearance: -apple-pay-button)scénáři, který si nedokážu představit, že by ho implementoval kdokoli jiný než Apple.
Navíc ... navrhují prázdnou , což není skvělé.
Můžeme je propadnout bez velkých problémů. Stačí přidat border: 0;pro Firefox.
Chtěl bych, aby se jim více podobalo ...
Apple Pay Ale pak dostaneme:
Ale můžeme text-indent: -9999px;to pryč, pak se ujistěte, že jsme správně nastavili barvu, abychom měli přijatelné sémantické tlačítka.
Podívejte se na tlačítko Pen
Apple Pay od Chrisa Coyiera (@chriscoyier)
na CodePen.
Ale pravděpodobněji ... měl bych podezření, že:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Stejně jako v případě, proč vůbec zobrazovat tuto oblast, pokud jste v prohlížeči, který tuto platební metodu nepodporuje.
Jejich další dema mají podobné problémy. Například tlačítko „Koupit s“ poskytuje:
Buy with Který 1) není tlačítko a 2) nemá v sobě celý text, který by říkal, o co jde.
Hlavy vzhůru. Neřekl bych, že to nepoužívejte, ale řekl bych, že chvilku vyčistit HTML a získat správný styl, takže je kompatibilní s různými prohlížeči.