Vous n'êtes pas obligé de concevoir vos propres boutons pour Apple Pay. En fait, Apple vous dit littéralement que vous ne pouvez pas. Alors, que faites-vous sur le web? Heureusement, Apple a fourni un moyen. C'est un peu étrange et implique un tas de propriétés et de valeurs CSS propriétaires, mais quoi de neuf.
Ils ont de la documentation pour tout cela, mais je vais la porter ici pour que vous puissiez voir des démos réelles.
Voici le code exact qu'ils proposent:
Voir le
bouton Pen Apple Pay de Chris Coyier (@chriscoyier)
sur CodePen.
Fonctionne bien dans Safari, mais Chrome et Firefox sont correctement confondus.
Pas très surprenant, car il utilise des arrière-plans comme -webkit-named-image(apple-pay-logo-white);dans le @supports not (-webkit-appearance: -apple-pay-button)scénario, que je ne peux imaginer implémenter que par Apple.
De plus ... ils suggèrent un vide , ce qui n'est pas génial.
Nous pouvons les faire flop vers un sans trop de problèmes. Juste eu à ajouter border: 0;pour Firefox.
J'aimerais les rendre plus comme…
Apple Pay Mais alors nous obtenons:
Mais nous pouvons faire text-indent: -9999px;cela, puis nous assurer que nous définissons la couleur correctement afin que nous ayons des boutons sémantiques acceptables.
Voir le
bouton Pen Apple Pay de Chris Coyier (@chriscoyier)
sur CodePen.
Mais plus probablement… je soupçonne de voir:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Comme dans, pourquoi afficher cette zone si vous êtes dans un navigateur qui ne prend pas en charge ce mode de paiement.
Leurs autres démos ont des problèmes similaires. Par exemple, le bouton «Acheter avec» vous donne:
Buy with Lequel 1) n'est pas un bouton et 2) ne contient pas de texte complet pour dire ce qui se passe.
Juste un avertissement. Je ne dirais pas de ne pas l'utiliser, mais je dirais qu'il faut prendre une minute pour nettoyer le HTML et obtenir le bon style afin qu'il soit compatible avec tous les navigateurs.