Δεν χρειάζεται να σχεδιάσετε τα δικά σας κουμπιά για το Apple Pay. Στην πραγματικότητα, η Apple σας λέει κυριολεκτικά ότι δεν μπορείτε. Λοιπόν, τι πρέπει να κάνετε στον Ιστό; Ευτυχώς, η Apple έδωσε έναν τρόπο. Είναι κάπως περίεργο και περιλαμβάνει ένα σωρό ιδιόκτητες ιδιότητες και τιμές CSS, αλλά τι.
Έχουν τεκμηρίωση για όλα αυτά, αλλά θα το μεταφέρω εδώ, ώστε να μπορείτε να δείτε πραγματικές επιδείξεις.
Εδώ είναι ο ακριβής κωδικός που προσφέρουν:
Δείτε το
κουμπί Apple Pay Pay του 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 Pay Pay του Chris Coyier (@chriscoyier)
στο CodePen.
Αλλά πιο πιθανό… Υποψιάζομαι να δω:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Όπως και στο εξής, γιατί να δείξετε αυτήν την περιοχή καθόλου εάν βρίσκεστε σε πρόγραμμα περιήγησης που δεν υποστηρίζει αυτόν τον τρόπο πληρωμής.
Τα άλλα demos τους έχουν παρόμοια προβλήματα. Για παράδειγμα, το κουμπί "Αγορά με" σας δίνει:
Buy with Ποιο 1) δεν είναι κουμπί και 2) δεν έχει πλήρες κείμενο σε αυτό για να πει τι συμβαίνει.
Απλά μια προειδοποίηση. Δεν θα έλεγα μην το χρησιμοποιείτε, αλλά θα έλεγα ότι αφιερώστε ένα λεπτό για να καθαρίσετε το HTML και να πάρετε το στυλ σωστά, ώστε να είναι συμβατό με το πρόγραμμα περιήγησης.