Apple Pay Buttons in CSS

Sie müssen keine eigenen Buttons für Apple Pay entwerfen. Tatsächlich sagt Ihnen Apple ausdrücklich, dass Sie das nicht dürfen. Was also tun Sie im Web? Glücklicherweise hat Apple einen Weg bereitgestellt. Es ist irgendwie seltsam und beinhaltet eine Menge proprietärer CSS-Eigenschaften und -Werte, aber was soll man machen.

Sie haben Dokumentation für all das, aber ich werde sie hier portieren, damit Sie tatsächliche 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.

Nicht gerade überraschend, da er Hintergründe wie -webkit-named-image(apple-pay-logo-white); im @supports not (-webkit-appearance: -apple-pay-button) Szenario verwendet, was ich mir kaum vorstellen kann, dass jemand außer Apple implementiert.

Außerdem... sie schlagen ein leeres <div> vor, was nicht gut ist.

Wir können sie mit <button> ohne allzu große Probleme umwandeln. Musste nur border: 0; für Firefox hinzufügen.

Ich würde sie gerne mehr so gestalten...

<button class="apple-pay-button apple-pay-button-white">
  Apple Pay
</button>

Aber dann bekommen wir

Aber wir können das mit text-indent: -9999px; weg bekommen und dann sicherstellen, dass wir die Farbe richtig einstellen, damit wir akzeptable semantische Buttons haben.

Siehe den Pen
Apple Pay Button von Chris Coyier (@chriscoyier)
auf CodePen.

Aber wahrscheinlicher... ich vermute, man wird sehen

@supports not (-webkit-appearance: -apple-pay-button) {
  .container-that-offers-apple-pay {
     display: none;
  }
}

Denn warum diesen Bereich überhaupt anzeigen, wenn Sie sich in einem Browser befinden, der diese Zahlungsmethode nicht unterstützt.

---

Ihre anderen Demos haben ähnliche Probleme. Zum Beispiel gibt Ihnen der "Buy With"-Button

<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
  <span class="text">Buy with</span>
  <span class="logo"></span>
</div>

Was 1) kein Button ist und 2) keinen vollständigen Text enthält, um zu sagen, was passiert.

Nur zur Information. Ich würde nicht sagen, dass Sie es nicht verwenden sollen, aber ich würde sagen, nehmen Sie sich eine Minute Zeit, um den HTML-Code zu bereinigen und das Styling richtig hinzubekommen, damit es browserübergreifend kompatibel ist.