Anda tidak perlu merancang butang anda sendiri untuk Apple Pay. Sebenarnya, Apple secara harfiah memberitahu anda bahawa anda tidak boleh. Jadi, apa yang anda lakukan di web? Syukurlah, Apple telah memberikan jalan. Agak pelik dan melibatkan banyak sifat dan nilai CSS milik, tetapi apa yang penting.
Mereka mempunyai dokumentasi untuk semua ini tetapi saya akan menghantarnya di sini supaya anda dapat melihat demo sebenar.
Inilah kod tepat yang mereka tawarkan:
Lihat
Butang Bayar Pen Apple oleh Chris Coyier (@chriscoyier)
di CodePen.
Berfungsi dengan baik di Safari, tetapi Chrome dan Firefox keliru.
Tidak terlalu mengejutkan, kerana ia menggunakan latar belakang seperti -webkit-named-image(apple-pay-logo-white);dalam @supports not (-webkit-appearance: -apple-pay-button)senario, yang saya tidak dapat bayangkan kecuali Apple yang melaksanakannya.
Tambahan ... mereka mencadangkan kosong , yang tidak bagus.
Kita boleh menjatuhkan mereka tanpa terlalu banyak masalah. Hanya perlu menambah border: 0;untuk Firefox.
Saya ingin menjadikannya lebih seperti ...
Apple Pay Tetapi kemudian kita mendapat:
Tetapi kita dapat text-indent: -9999px;melakukannya kemudian pastikan kita menetapkan warna dengan betul sehingga kita mempunyai butang semantik yang dapat diterima.
Lihat
Butang Bayar Pen Apple oleh Chris Coyier (@chriscoyier)
di CodePen.
Tetapi kemungkinan besar ... saya mengesyaki melihat:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Seperti dalam, mengapa tunjukkan kawasan itu sama sekali jika anda menggunakan penyemak imbas yang tidak menyokong kaedah pembayaran tersebut.
Demo mereka yang lain mempunyai masalah yang serupa. Sebagai contoh, butang "Beli Dengan" memberi anda:
Buy with Yang 1) bukan butang dan 2) tidak mempunyai teks lengkap di dalamnya untuk menyatakan apa yang berlaku.
Hanya kepala. Saya tidak akan mengatakan jangan menggunakannya, tetapi saya katakan luangkan masa sebentar untuk membersihkan HTML dan mendapatkan gaya yang betul sehingga serasi penyemak imbas.