No tiene que diseñar sus propios botones para Apple Pay. De hecho, Apple te dice literalmente que no puedes. Entonces, ¿qué vas a hacer en la web? Afortunadamente, Apple ha proporcionado una forma. Es un poco extraño e involucra un montón de propiedades y valores CSS patentados, pero ¿qué?
Tienen documentación para todo esto, pero la trasladaré aquí para que pueda ver demostraciones reales.
Aquí está el código exacto que ofrecen:
Vea el
botón Pen Apple Pay de Chris Coyier (@chriscoyier)
en CodePen.
Funciona bien en Safari, pero Chrome y Firefox se confunden correctamente.
No es muy sorprendente, ya que usa fondos como -webkit-named-image(apple-pay-logo-white);en el @supports not (-webkit-appearance: -apple-pay-button)escenario, que no puedo imaginar que nadie más que Apple implemente.
Además ... están sugiriendo un vacío , lo cual no es genial.
Podemos dejarlos caer sin demasiados problemas. Solo tuve que agregar border: 0;para Firefox.
Me gustaría hacerlos más como ...
Apple Pay Pero luego obtenemos:
Pero podemos text-indent: -9999px;eliminar eso y luego asegurarnos de configurar el color correctamente para que tengamos botones semánticos aceptables.
Vea el
botón Pen Apple Pay de Chris Coyier (@chriscoyier)
en CodePen.
Pero lo más probable ... sospecho que veré:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Como en, ¿por qué mostrar esa área en absoluto si está en un navegador que no admite ese método de pago?
Sus otras demostraciones tienen problemas similares. Por ejemplo, el botón "Comprar con" le ofrece:
Buy with Cuál 1) no es un botón y 2) no tiene texto completo para decir lo que está pasando.
Solo un aviso. No diría que no lo use, pero diría que tómese un minuto para limpiar el HTML y obtener el estilo correcto para que sea compatible con todos los navegadores.