Вам не нужно создавать собственные кнопки для Apple Pay. На самом деле Apple буквально говорит вам, что вы не можете. Итак, что вам делать в сети? К счастью, Apple предоставила способ. Это как-то странно и включает в себя множество проприетарных свойств и значений CSS, но что за тягость.
У них есть документация по всему этому, но я перенесу ее сюда, чтобы вы могли увидеть реальные демонстрации.
Вот точный код, который они предлагают:
См.
Кнопку Pen Apple Pay Криса Койера (@chriscoyier)
на CodePen.
Отлично работает в Safari, но правильно перепутаны Chrome и Firefox.
Неудивительно, так как он использует фон, как -webkit-named-image(apple-pay-logo-white);в @supports not (-webkit-appearance: -apple-pay-button)сценарии, который я не могу представить, кроме Apple.
Плюс ... они предлагают пустой , что не очень хорошо.
Мы можем без особых проблем перевернуть их . Просто нужно было добавить border: 0;для Firefox.
Я бы хотел, чтобы они больше походили на…
Apple Pay Но тогда получаем:
Но мы можем text-indent: -9999px;это убрать, а затем убедитесь, что мы правильно установили цвет, чтобы у нас были приемлемые семантические кнопки.
См.
Кнопку Pen Apple Pay Криса Койера (@chriscoyier)
на CodePen.
Но более вероятно ... Я подозреваю, что увижу:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Например, зачем вообще показывать эту область, если вы используете браузер, который не поддерживает этот метод оплаты.
В других их демо есть аналогичные проблемы. Например, кнопка «Купить с помощью» дает вам:
Buy with Что 1) не является кнопкой и 2) не содержит полного текста, чтобы сказать, что происходит.
Просто предупреждаю. Я бы не сказал, что не используйте его, но я бы посоветовал потратить минуту на то, чтобы очистить HTML и правильно оформить его, чтобы он был совместим с несколькими браузерами.