Aplicar estilo al botón de solicitud de pago

Un usuario preguntó 👇

Por lo tanto, el botón de solicitud de pago funciona perfectamente y cambia entre Google Pay y Apple Pay según el navegador / dispositivo.

Para los dispositivos Apple, el botón usa el logotipo de Apple Pay, que es lo suficientemente claro y obvio: si las personas no tienen Apple Pay, lo ignoran y usan el botón estándar de WooComm «Continuar comprobando».

Pero para los dispositivos Google / Android / Chrome, el botón morado con una pequeña flecha animada y solo una palabra «Comprar» – esto es extremadamente confuso para los clientes, ya que la mayoría obviamente hará clic. La mayoría ve este gran botón animado de Comprar sin darse cuenta que es un botón separado pero para Google Pay. Y si no han implementado un método de pago con un médico de cabecera o no quieren usarlo, no tienen idea de lo que está pasando. Y a menudo ni siquiera ve el botón estándar «Continuar comprobando» debido a su confusión.

Entonces, a pesar del bonito estilo animado púrpura, este botón obviamente debe cambiarse para GP como el botón AP, que deja completamente claro a los visitantes que este es un botón especial solo para GP.

Si esto no es posible, debe haber una forma de editar el texto «Comprar» en la configuración del plugin para convertirlo en cierto texto personalizado, como «Comprar ahora con Google Pay» o lo que sea.

Sorprendentemente, nadie más comentó sobre esto, pero creo que el botón Solicitar pago está desactivado (como lo hice hasta que se solucione) en la mayoría de los sitios que usan este plugin.

(@royho)

Hace 1 año, 11 meses

Este plugin utiliza lo que ofrece Stripe, consulte aquí https://stripe.com/docs/stripe-js/elements/payment-request-button#styling-the-element

De lo contrario, sería una solución completamente personalizada que no admitimos.

(@ nixiack8)

Hace 1 año, 10 meses

Hola @ akc123,

Seguiré adelante y cerraré este hilo, si tiene más preguntas, abra un nuevo hilo y háganoslo saber.

(@afnangulabbasi)

Hace 1 año, 9 meses

Oye, no sé si recibiste ayuda con esto o no, pero acabo de escribir una publicación de blog completa explicando cómo hacer esto porque también necesitaba ayuda con esto.

Compruébalo aquí: https://justentrepreneurship.com/stripe-payment-request-button-style

Esta respuesta fue modificada hace 1 año, 9 meses.

(@jwpapi)

Hace 1 año, 7 meses

@afnangulabbasi ¿Ha encontrado una manera de mantener esto actualizado?

(@afnangulabbasi)

Hace 1 año, 7 meses

@jwpapi Le pregunté al desarrollador del plugin sobre esto.

Puede leer eso aquí: https://wordpress.org/support/topic/how-to-override-the-plugin-files/

Hay varias formas que incluyen no poner en cola y volver a poner en cola, haciendo un duplicado. No hay ganchos en esa parte del enchufe, por lo que no podemos modificarlo usando los ganchos.

Pero tomé el enfoque de replicar el plugin. Puede cambiar el nombre + la versión del plugin en el archivo principal del plugin y mantenerlo como si fuera su propio plugin personalizado. A menudo, cuando actualiza sus plugins en aproximadamente un mes, ve si el plugin se actualiza y luego actualiza manualmente todos los archivos.

Suena tedioso, pero esa es la única solución en este momento. Podría trabajar en lo de no poner en cola y volver a poner en cola, ya que era la mejor solución aquí, pero estoy un poco ocupado en este momento con algunos trabajos de clientes en los que no puedo concentrarme en esto.

(@jwpapi)

Hace 1 año, 7 meses

¡Muchas gracias! Eso ya me ayuda mucho.

Por cierto, podría buscar una forma de mostrarlo solo en Chrome + Android. Ya que en Chrome también puedes usar Google Pay. Actualizaré aquí si lo hice primero revisando su documentación.

(@afnangulabbasi)

Hace 1 año, 7 meses

¡De nada!

Solo se puede mostrar en Chrome y Android, creo que contiene un fragmento de código JS que nos ayuda a detectar navegadores, por lo que tal vez podamos usarlo. Pero requerirá más personalización y tiempo.

Mi personalización del sitio, lo publiqué hace dos meses, así que tiene que funcionar. Sigue más o menos lo mismo que dice Stripe en su documentación, pero un poco diferente. Además, lo explican complicado, yo lo expliqué a modo de WordPress.