आपको Apple Pay के लिए अपने खुद के बटन नहीं डिज़ाइन करने होंगे। वास्तव में, Apple सचमुच आपको बताता है कि आप नहीं कर सकते। तो, आप वेब पर क्या कर रहे हैं? शुक्र है, Apple ने एक रास्ता प्रदान किया है। यह थोड़े अजीब है और इसमें मालिकाना सीएसएस गुणों और मूल्यों का एक समूह शामिल है, लेकिन व्हाटगैगनैडो।
इन सबके लिए उनके पास दस्तावेज हैं लेकिन मैं इसे यहां पोर्ट करूंगा ताकि आप वास्तविक डेमो देख सकें।
यहां सटीक कोड है जो वे प्रदान करते हैं:
CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन ऐप्पल पे बटन देखें ।
सफारी में ठीक काम करता है, लेकिन क्रोम और फ़ायरफ़ॉक्स ठीक से भ्रमित हैं।
बहुत, आश्चर्य की बात नहीं के रूप में यह की तरह पृष्ठभूमि का उपयोग करता है -webkit-named-image(apple-pay-logo-white);में @supports not (-webkit-appearance: -apple-pay-button)परिदृश्य है, जो मैं किसी लेकिन एप्पल को लागू करने की कल्पना नहीं कर सकते हैं।
प्लस ... वे एक खाली सुझाव दे रहे हैं , जो बहुत अच्छा नहीं है।
हम उन्हें बिना किसी बहुत अधिक परेशानी के फ्लॉप कर सकते हैं । बस border: 0;फ़ायरफ़ॉक्स के लिए जोड़ना था ।
मैं उन्हें और अधिक पसंद करना चाहता हूं ...
Apple Pay लेकिन फिर हमें मिलता है:
लेकिन हम text-indent: -9999px;दूर कर सकते हैं तो सुनिश्चित करें कि हम रंग को ठीक से सेट करते हैं ताकि हमारे पास स्वीकार्य सिमेंटिक बटन हों।
CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन ऐप्पल पे बटन देखें ।
लेकिन अधिक संभावना है ... मुझे देखने पर संदेह होगा:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )जैसे कि, आप उस क्षेत्र को क्यों दिखाते हैं यदि आप एक ब्राउज़र में हैं जो उस भुगतान विधि का समर्थन नहीं करता है।
उनके अन्य डेमो में भी ऐसी ही समस्याएं हैं। उदाहरण के लिए, "खरीदें" बटन आपको देता है:
Buy with कौन सा 1) एक बटन नहीं है और 2) में पूरा पाठ नहीं है यह कहने के लिए कि क्या चल रहा है।
बिलकुल चौकन्ना। मैं यह नहीं कहूंगा कि इसका उपयोग न करें, लेकिन मैं कहूंगा कि HTML को साफ करने के लिए एक मिनट लगेगा और स्टाइल को सही मिलेगा, इसलिए यह क्रॉस-ब्राउज़र संगत है।