Nie musisz projektować własnych przycisków dla Apple Pay. W rzeczywistości Apple dosłownie mówi, że nie możesz. Więc co zamierzasz robić w sieci? Na szczęście Apple zapewniło sposób. To trochę dziwne i wiąże się z wieloma zastrzeżonymi właściwościami i wartościami CSS, ale whattyagonnado.
Mają dokumentację na to wszystko, ale przeniosę ją tutaj, abyś mógł zobaczyć rzeczywiste dema.
Oto dokładny kod, który oferują:
Zobacz przycisk Pen
Apple Pay autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.
Działa dobrze w Safari, ale Chrome i Firefox są odpowiednio zdezorientowane.
Nie jest to strasznie zaskakujące, ponieważ używa tła jak -webkit-named-image(apple-pay-logo-white);w @supports not (-webkit-appearance: -apple-pay-button)scenariuszu, którego nie wyobrażam sobie nikogo poza Apple.
Poza tym… sugerują puste , co nie jest świetne.
Możemy je przelać na a bez większych problemów. Po prostu musiałem dodać border: 0;do przeglądarki Firefox.
Chciałbym, żeby bardziej przypominały…
Apple Pay Ale wtedy otrzymujemy:
Ale możemy text-indent: -9999px;to odrzucić, a następnie upewnić się, że ustawiliśmy kolor prawidłowo, abyśmy mieli akceptowalne przyciski semantyczne.
Zobacz przycisk Pen
Apple Pay autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.
Ale bardziej prawdopodobne… Podejrzewam, że zobaczę:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Po co w ogóle pokazywać ten obszar, jeśli używasz przeglądarki, która nie obsługuje tej metody płatności.
Ich inne dema mają podobne problemy. Na przykład przycisk „Kup przez” umożliwia:
Buy with Który 1) nie jest przyciskiem, a 2) nie zawiera pełnego tekstu, aby powiedzieć, co się dzieje.
Tylko jedno ostrzeżenie. Nie powiedziałbym, że go nie używaj, ale powiedziałbym, że poświęć chwilę na wyczyszczenie kodu HTML i poprawienie stylu, aby był kompatybilny z różnymi przeglądarkami.