Cuando Google Pay apareció por primera vez en Rusia, abrí una cuenta, agregué una tarjeta allí y me di cuenta de que no podía hacer nada más. No había NFC en mi teléfono, tampoco había nada que pagar en Internet, bueno, está bien, no me molesta. Al final, siempre fue posible extraer dígitos de la tarjeta con las manos o extraerlos del almacén de contraseñas del navegador.
Luego vi cómo las diferentes personas que hacían cola frente a mí pagaban con un teléfono inteligente; luego vi anuncios y descuentos por usar Google Pay en todas partes, pero aún así no podía aprovecharlo: seguí con un teléfono sin NFC.
Y ahora ha llegado. Ahora puedo pagar a través de Google Pay desde cualquier dispositivo en sitios que estén conectados a Yandex.Cash (y hay muchos de ellos). Te diré cómo sucedió y qué problemas técnicos tuvieron que resolver nuestros desarrolladores; Hay muchas cosas interesantes en el frente y en el backend.
Solo agrega API
"Compañeros desarrolladores, ¿qué fue tan difícil?"
- Sí, acabamos de agregar una biblioteca de Google en sus muelles.
Este fue el primer minuto de mi conversación acerca de agregar Google Pay con los desarrolladores del cajero (incluyendo 55 segundos de silencio incómodo). Pero luego no me sorprendió, y descubrimos algunas cosas interesantes.
Google Pay cambia el proceso de pago con tarjeta
Ahora, a través del Cajero, puede pagar con cualquier tarjeta de crédito, incluso en el extranjero. Al igual que cualquier pago con tarjeta en línea, no siempre es conveniente: a veces debe ir a su billetera, manejar números en la oscuridad y verificar que nada se estropee en ningún lado. Para hacer la vida más fácil, puede iniciar sesión en Yandex y pagar con tarjetas atadas.
Implementamos un esquema en el cual los pagos con tarjeta a través del Cajero se unificaron y se documentaron bien. Si elimina todas las complejidades del enrutamiento y los matices de seguridad, el esquema se ve así:
- El usuario selecciona los productos, realiza un pedido y cambia al formulario de pago Yandex.Cash. Allí puede ingresar los detalles de cualquier tarjeta o iniciar sesión en Yandex para ver también sus tarjetas vinculadas.
- Los datos sobre el método de pago seleccionado se envían al back-end para la tokenización. El navegador recibe el token de la tarjeta e intenta usarlo para el pago.
- Si todo está en orden, el backend le pide al banco que bloquee el monto de la tarjeta, realiza un pago y devuelve su estado. En base a esto, el navegador redirige a la página de éxito o muestra un mensaje de error.
En diferentes etapas, existen diferentes condiciones para finalizar el proceso (tokens no válidos, cuentas vacías o desconectar Internet), pero la lógica sigue siendo la misma. Y en este caso, puede renderizar completamente la página en el servidor, pero discutiremos las dificultades con esto a continuación.
Para Google Pay, necesita algunos pasos intermedios más.
En primer lugar, entre elegir un método de pago y la tokenización hay una llamada a la API de Google; esto es necesario para verificar si el dispositivo admite pagos a través de Google Pay. Después de hacer clic en el botón "Pagar", aparece la interfaz web de Google Pay, donde el usuario inicia sesión, selecciona una de las tarjetas agregadas o ingresa los detalles de una nueva tarjeta.
En segundo lugar, hay otro círculo de seguridad de Google. El navegador no recibe los detalles directamente; recibe un criptograma que, a su vez, va al backend para la tokenización. Allí se descifra con claves de Google, y luego vea el paso 3.
Naturalmente, cada paso adicional (incluso siguiendo estrictamente la documentación) es un tiempo adicional de desarrollo y prueba. Es aún más agradable que el comerciante no tenga que hacer prácticamente nada: es fácil conectar pagos a través de Google Pay a cualquier sitio que tenga un formulario de pago Yandex.Cash. Los detalles se encuentran en el sitio web del Cajero .
También se encontró una historia interesante en la interfaz: se trata de búsqueda creativa, evidencia y UX.
Botón Google Pay en una página de pago
La página de pago del cajero está completamente ensamblada en el servidor: recibe datos del servidor, lo ejecuta a través del motor de plantillas y le proporciona al navegador códigos HTML, CSS y JavaScript listos. Por lo tanto, la página se dibuja más rápido, cuando todos los datos están listos y todo el contenido dinámico funciona a través de JS en el cliente.
La dificultad es que solo es posible determinar si la cuenta de Google del cliente ha agregado medios de pago a través de la biblioteca del cliente de Google. Por lo tanto, la lógica que dibuja parte de la página con el botón de pago tuvo que implementarse en el cliente. La solución técnica se encontró después de una breve búsqueda.
En el backend, debe verificar si la tienda ha habilitado el pago a través de Google Pay; si es así, en el motor de plantillas agregamos el enlace CDN a la biblioteca de Google Pay a la página y le damos al navegador una señal de que necesita descargar datos utilizando este método de pago.
En el cliente, debe verificar si hay una señal necesaria, y si es así, llamar al método de verificación si los pagos a través de Google Pay son compatibles con este dispositivo. Si todo está bien, le mostramos al usuario otro botón. Como resultado, la página todavía se representa en el servidor, pero ahora estamos haciendo un par de solicitudes adicionales a otro servicio.
Simplemente resultó que este servicio a veces no responde.
¡Un mes entero, ni un solo descanso!
Esta historia trata sobre nuestro departamento de UX: cómo buscaban una forma de dibujar un botón de Google Pay, pero al mismo tiempo no interferir con la interacción del usuario con el formulario.
El primer pensamiento es colgar el giro en toda la página y esperar una respuesta de Google.
Pero si espera una respuesta de Google, entonces no tiene sentido el procesamiento del servidor (el usuario aún no puede interactuar con la página hasta que obtengamos los datos del cliente), y comenzamos a depender de un servicio de terceros. Si hay un problema con Internet, Google está bloqueado o es inaccesible, entonces el usuario no podrá usar la página, aunque nada le impide ingresar el número de tarjeta.
Los diseñadores hicieron varias opciones más, pero por varias razones no encajaron, y los requisitos para los diseños cambiaron gradualmente.
Tiempos de aproximación
Enfoque dos
Como resultado, había tres requisitos principales:
- El usuario debe poder pagar independientemente de si el servicio de terceros responderá y durante cuánto tiempo lo hará. El servicio no debería ser más lento.
- Necesita escalabilidad. Cuando se agrega el pago de Apple o Samsung, esto no debería afectar la velocidad y la capacidad de trabajar con los campos de entrada de una tarjeta bancaria.
- La solución no debería tener demasiada animación / dinámica. Si el usuario comienza a ingresar datos, y en este momento se carga el botón Google Pay y algo cambia, es posible que el usuario no entienda qué sucedió y por qué.
En base a ellos, apareció el diseño final del formulario de pago. Organizó según todos los criterios: escalable, no bloquea la entrada de una tarjeta bancaria, y al recibir datos de la tarjeta bancaria no hay animación innecesaria.
¿Qué pasa con los teléfonos inteligentes sin NFC?
Para el pago a través de Google Pay en tiendas sin conexión, todavía se necesita NFC, no hay opciones.
NFC no es necesario en línea. Todos los navegadores de escritorio funcionan bien con Google Pay. Hay algunos matices con los teléfonos inteligentes: Google tiene varios requisitos para un dispositivo con Google Pay. Aquí hay una lista de lo que no está permitido:
- Use un teléfono con Android 4.4.3 o anterior;
- Instalar la versión de Android para desarrolladores;
- Hacer root, desbloquear el gestor de arranque o instalar firmware no oficial;
- Utilice Samsung MyKnox;
- Use un dispositivo de Google no verificado.
En otros casos, los pagos a través de Google Pay en Internet deberían funcionar bien, pero, probablemente, nadie conoce todas las excepciones.
Conclusiones comerciales difíciles si ya usa Yandex.Cash
Para permitir la aceptación de pagos a través de Google Pay, escriba al administrador de su cuenta. Después de un tiempo, el botón aparecerá por sí solo, y puede pasar el tiempo de los desarrolladores en otra cosa.
La conversión aumentará: según un estudio de Mediascope, el 36,3% de los usuarios pagan sin contacto. La propia investigación de Yandex.Money mostró que el 43% de los titulares de tarjetas los usan para pagos sin contacto. Además, hay bastantes personas con Android entre los usuarios de Android: no necesitarán ingresar el código de seguridad 3-D.
Conclusiones comerciales difíciles, si aún no está utilizando Yandex.Cash
Conéctese con urgencia, ¿por qué sacar algo?
Otras historias sobre lo que es bueno en Kassa
Diez personas en 90 mil sitios: cómo no volverse loco
Estoy cansado de aceptar pagos a través de WebView. Que hago
Cómo protegemos las reseñas, compras y viajes de los estafadores