Non devi progettare i tuoi pulsanti per Apple Pay. In effetti, Apple ti dice letteralmente che non puoi. Allora, cosa devi fare sul web? Per fortuna, Apple ha fornito un modo. È un po 'strano e coinvolge un mucchio di proprietà e valori CSS proprietari, ma whattyagonnado.
Hanno la documentazione per tutto questo, ma la trasferirò qui in modo che tu possa vedere le demo reali.
Ecco il codice esatto che offrono:
Guarda il
pulsante Pen Apple Pay di Chris Coyier (@chriscoyier)
su CodePen.
Funziona bene in Safari, ma Chrome e Firefox sono correttamente confusi.
Non sorprendentemente, in quanto utilizza sfondi come -webkit-named-image(apple-pay-logo-white);nello @supports not (-webkit-appearance: -apple-pay-button)scenario, che non riesco a immaginare che nessuno possa implementare tranne Apple.
Inoltre ... stanno suggerendo un vuoto , il che non è eccezionale.
Possiamo flopparli in a senza troppi problemi. Dovevo solo aggiungere border: 0;per Firefox.
Mi piacerebbe renderli più simili ...
Apple Pay Ma poi otteniamo:
Ma possiamo text-indent: -9999px;farlo, quindi assicurarci di impostare il colore correttamente in modo da avere pulsanti semantici accettabili.
Guarda il
pulsante Pen Apple Pay di Chris Coyier (@chriscoyier)
su CodePen.
Ma più probabilmente ... sospetto di vedere:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Ad esempio, perché mostrare quell'area se sei in un browser che non supporta quel metodo di pagamento.
Le altre loro demo hanno problemi simili. Ad esempio, il pulsante "Acquista con" ti offre:
Buy with Quale 1) non è un pulsante e 2) non contiene testo completo per dire cosa sta succedendo.
Solo un avviso. Non direi di non usarlo, ma direi che prenditi un minuto per ripulire l'HTML e ottenere lo stile giusto in modo che sia compatibile con tutti i browser.