Не е нужно да проектирате свои собствени бутони за Apple Pay. Всъщност Apple буквално ви казва, че не можете. И така, какво трябва да правите в мрежата? За щастие, Apple осигури начин. Това е доста странно и включва куп патентовани CSS свойства и стойности, но whattyagonnado.
Те имат документация за всичко това, но ще я пренеса тук, за да можете да видите действителните демонстрации.
Ето точния код, който те предлагат:
Вижте
Бутон за плащане на Apple Apple от Chris Coyier (@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;го направим, след това се уверете, че сме задали правилно цвета, така че да имаме приемливи семантични бутони.
Вижте
Бутон за плащане на Apple Apple от Chris Coyier (@chriscoyier)
на CodePen.
Но по-вероятно ... Подозирам да видя:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Както при, защо изобщо да показвате тази област, ако сте в браузър, който не поддържа този начин на плащане.
Другите им демонстрации имат подобни проблеми. Например бутонът „Купи с“ ви дава:
Buy with Което 1) не е бутон и 2) няма пълен текст, за да каже какво става.
Само глави нагоре. Не бих казал, че не го използвайте, но бих казал, че отделете минута, за да изчистите HTML и да оправите стила, за да е съвместим с различни браузъри.