Anda tidak perlu mendesain tombol Anda sendiri untuk Apple Pay. Faktanya, Apple benar-benar memberi tahu Anda bahwa Anda tidak bisa. Jadi, apa yang harus Anda lakukan di web? Syukurlah, Apple telah menyediakan cara. Agak aneh dan melibatkan banyak properti dan nilai CSS, tapi whattyagonnado.
Mereka memiliki dokumentasi untuk semua ini tetapi saya akan memasukkannya ke sini sehingga Anda dapat melihat demo yang sebenarnya.
Inilah kode persis yang mereka tawarkan:
Lihat
Tombol Bayar Pen Apple oleh Chris Coyier (@chriscoyier)
di CodePen.
Berfungsi dengan baik di Safari, tetapi Chrome dan Firefox benar-benar membingungkan.
Tidak terlalu mengherankan, karena menggunakan latar belakang seperti -webkit-named-image(apple-pay-logo-white);dalam @supports not (-webkit-appearance: -apple-pay-button)skenario, yang tidak dapat saya bayangkan siapa pun kecuali yang diterapkan oleh Apple.
Plus ... mereka menyarankan yang kosong , yang tidak bagus.
Kita bisa menjatuhkannya tanpa terlalu banyak kesulitan. Baru saja menambahkan border: 0;untuk Firefox.
Saya ingin membuat mereka lebih menyukai…
Apple Pay Tapi kemudian kita mendapatkan:
Tapi kita bisa text-indent: -9999px;melakukannya kemudian pastikan kita mengatur warna dengan benar sehingga kita memiliki tombol semantik yang dapat diterima.
Lihat
Tombol Bayar Pen Apple oleh Chris Coyier (@chriscoyier)
di CodePen.
Tapi lebih mungkin… Saya ingin melihat:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Seperti, mengapa menunjukkan area itu sama sekali jika Anda menggunakan browser yang tidak mendukung metode pembayaran itu.
Demo mereka yang lain memiliki masalah serupa. Misalnya, tombol "Beli Dengan" memberi Anda:
Buy with Yang 1) bukan tombol dan 2) tidak memiliki teks lengkap di dalamnya untuk mengatakan apa yang terjadi.
Hanya satu kepala. Saya tidak akan mengatakan jangan gunakan itu, tapi saya akan mengatakan luangkan waktu sebentar untuk membersihkan HTML dan mendapatkan gaya yang benar sehingga kompatibel lintas-browser.