Sie müssen keine eigenen Schaltflächen für Apple Pay entwerfen. In der Tat sagt Apple Ihnen buchstäblich, dass Sie nicht können. Also, was machst du im Web? Zum Glück hat Apple einen Weg bereitgestellt. Es ist ein bisschen komisch und beinhaltet eine Reihe von proprietären CSS-Eigenschaften und -Werten, aber was auch immer.
Sie haben Dokumentation für all dies, aber ich werde es hier portieren, damit Sie aktuelle Demos sehen können.
Hier ist der genaue Code, den sie anbieten:
Siehe den Pen
Apple Pay Button von Chris Coyier (@chriscoyier)
auf CodePen.
Funktioniert gut in Safari, aber Chrome und Firefox sind richtig verwirrt.
Kein Wunder, denn es werden Hintergründe wie -webkit-named-image(apple-pay-logo-white);im @supports not (-webkit-appearance: -apple-pay-button)Szenario verwendet, die ich mir nur von Apple vorstellen kann.
Plus… sie schlagen eine leere vor , was nicht großartig ist.
Wir können sie ohne allzu große Probleme auf einen werfen. Musste nur border: 0;für Firefox hinzufügen .
Ich würde sie gerne mehr machen wie ...
Apple Pay Aber dann bekommen wir:
Aber wir können text-indent: -9999px;das weg und dann sicherstellen, dass wir die Farbe richtig einstellen, damit wir akzeptable semantische Schaltflächen haben.
Siehe den Pen
Apple Pay Button von Chris Coyier (@chriscoyier)
auf CodePen.
Aber wahrscheinlicher ... ich würde vermuten zu sehen:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Warum sollten Sie diesen Bereich überhaupt anzeigen, wenn Sie sich in einem Browser befinden, der diese Zahlungsmethode nicht unterstützt?
Ihre anderen Demos haben ähnliche Probleme. Mit der Schaltfläche "Kaufen mit" erhalten Sie beispielsweise Folgendes:
Buy with Welche 1) ist keine Schaltfläche und 2) enthält keinen vollständigen Text, um zu sagen, was los ist.
Nur ein Kopf hoch. Ich würde nicht sagen, dass Sie es nicht verwenden, aber ich würde sagen, nehmen Sie sich eine Minute Zeit, um den HTML-Code zu bereinigen und das richtige Styling zu erzielen, damit es browserübergreifend kompatibel ist.