Nu trebuie să vă proiectați propriile butoane pentru Apple Pay. De fapt, Apple îți spune literalmente că nu poți. Deci, ce trebuie să faci pe web? Din fericire, Apple a oferit o cale. Este cam ciudat și implică o grămadă de proprietăți și valori CSS proprietare, dar whattyagonnado.
Au documentație pentru toate acestea, dar o voi aduce aici, astfel încât să puteți vedea demonstrațiile reale.
Iată codul exact pe care îl oferă:
Vedeți
Butonul Pen Apple Pay de Chris Coyier (@chriscoyier)
pe CodePen.
Funcționează bine în Safari, dar Chrome și Firefox sunt confuzi în mod corespunzător.
Nu este surprinzător, deoarece folosește fundaluri ca -webkit-named-image(apple-pay-logo-white);în @supports not (-webkit-appearance: -apple-pay-button)scenariu, pe care nu-l pot imagina pe nimeni în afară de Apple.
În plus ... sugerează un gol , ceea ce nu este grozav.
Putem să le flopăm fără prea multe probleme. Doar a trebuit să adaug border: 0;pentru Firefox.
Aș vrea să le fac mai mult ca ...
Apple Pay Dar apoi obținem:
Dar putem face text-indent: -9999px;asta, apoi ne asigurăm că setăm corect culoarea, astfel încât să avem butoane semantice acceptabile.
Vedeți
Butonul Pen Apple Pay de Chris Coyier (@chriscoyier)
pe CodePen.
Dar mai probabil ... aș bănui să văd:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Ca și în, de ce să arăți deloc acea zonă dacă te afli într-un browser care nu acceptă metoda respectivă de plată.
Celelalte demonstrații ale acestora au probleme similare. De exemplu, butonul „Cumpărați cu” vă oferă:
Buy with Care 1) nu este un buton și 2) nu are text complet pentru a spune ce se întâmplă.
Doar un cap în sus. Nu aș spune că nu-l folosiți, dar aș spune că luați un minut pentru a curăța codul HTML și a obține stilul corect, astfel încât să fie compatibil cu browser-ul.