Get started with Apple Pay on the Web

Tom Grant: ¡Bienvenidos! Mi nombre es Tom y soy miembro del equipo de comercio electrónico de Apple Pay. Desde el lanzamiento de Apple Pay, trabajé con varios equipos técnicos para ayudar a lanzar integraciones de comercio electrónico de Apple Pay de comerciantes y portales de pago. Hoy me complace hablar sobre algunos de los aspectos y las recomendaciones clave que acumulamos a lo largo de los años y mostrarles cómo integrar Apple Pay en sus sitios web mediante la API Payment Request. Apple Pay se lanzó en EE. UU. en octubre de 2014. Desde entonces, progresamos mucho. Apple Pay ya está disponible en más de 75 mercados de todo el mundo, y millones de marcas lo integraron en sus apps y sitios web. Apple Pay funciona con credenciales de tarjeta tokenizadas específicas al dispositivo. Las transacciones de Apple Pay se procesan de igual manera que una tarjeta de crédito o débito normal. Además, Apple no procesa los pagos de Apple Pay, por lo que deben tener una relación con un proveedor de servicios de pago. Puede que sea el mismo proveedor que usan para aceptar pagos en línea en la actualidad. Para comprender mejor el proceso de pago, veamos qué sucede durante una transacción con Apple Pay por internet. El proceso de la transacción se inicia cuando el cliente hace clic en el botón Apple Pay y aparece la hoja de pago que le permite seleccionar y confirmar los detalles. Luego, el cliente autentica la transacción, y los datos de pago se encriptan y se transmiten al sitio web. El sitio web envía el objeto de pago Apple Pay al servidor del comercio. El servidor recibe el objeto de pago y envía los datos al proveedor de servicios de pago para su procesamiento. El proveedor de servicios de pago desencripta los datos de pago, luego, formatea y envía un mensaje de autorización a la entidad adquirente, quien, a continuación, envía el pago a la red de pago. La red de pago elimina el token de los datos y envía el número de la tarjeta al emisor para su autorización. La confirmación del pago se devuelve a través de la cadena, y el cliente recibe una notificación mediante una marca de verificación en la hoja de pago. Este proceso parece complicado, pero en realidad, todo esto ocurre en tan solo unos segundos. Ahora que sabemos lo que ocurre detrás de escena durante una transacción de Apple Pay en internet, veamos la experiencia del cliente. Para hacerlo, nos dirigiremos al sitio de demostración de Apple Pay en applepaydemo.apple.com. Este sitio es un excelente recurso para familiarizarse con Apple Pay en internet, y permite configurar y probar transacciones sin que se realice ningún cargo en la tarjeta. Si encuentran algún problema al trabajar en su integración, el sitio web de demostración de Apple Pay es un gran lugar para volver y ayudarlo a resolverlo. Esta herramienta es compatible con muchos tipos diferentes de configuración de Apple Pay, incluyendo información de envío, gestión de errores y más. Pero por ahora, no nos complicaremos y seguiremos con la configuración predeterminada para ver cómo es una transacción básica. Se inicia al hacer clic en el botón Apple Pay. Aparecerá un modal en la pantalla, al que llamaremos hoja de pago. El cliente selecciona las opciones de pago y autentica la transacción. La transacción se envía para su procesamiento y el resultado se mostrará en la parte inferior de la hoja de pago. Una vez completado el pago, la hoja de pago se cerrará. Así de sencillo, completamos un pago de muestra. Ahora que vieron cómo es una transacción típica de Apple Pay, preparémonos para aceptar Apple Pay. Veremos cómo integrar Apple Pay con la API Payment Request. La API Payment Request proporciona un estándar a través de los navegadores que permite obtener el pago, la dirección de envío y la información de contacto de los clientes. Luego, podrán usar esta información para procesar el pedido. La API Payment Request simplifica el proceso de pago garantizando la seguridad, la uniformidad y la accesibilidad. Si ya integraron Apple Pay con la API JavaScript de Apple Pay, los pasos de este video les resultarán familiar. Veamos qué tenemos que hacer para lograr la integración de Apple Pay. Primero, hablaré sobre los pasos necesarios a fin de configurar el entorno para aceptar Apple Pay. A continuación, les mostraré cómo implementar Apple Pay, desde la creación de una solicitud de pago hasta completar una transacción. Finalmente, les hablaré sobre algunas herramientas que pueden usar para probar su implementación de Apple Pay. Tenemos mucho que cubrir y, al final de la sesión, tendrán un conocimiento exhaustivo sobre cómo integrar Apple Pay en su sitio web. Empecemos por configurar el entorno. En primer lugar, confirmen que el proveedor de servicios de pago admite transacciones de Apple Pay. También puede ofrecer Apple Pay a través de su propio SDK, que puede ser una forma fiable y sencilla de agregar Apple Pay al sitio. Confirmen que el servidor tiene un certificado SSL válido y puede usar la versión TLS 1.2 o posterior. Será necesario para comunicarse con los servidores de Apple Pay. Por último, asegúrense de que todas las páginas donde se muestra Apple Pay se publiquen a través del protocolo https://. Con estos elementos confirmados, podemos comenzar a crear las credenciales que usarán en la configuración de Apple Pay. Hay dos formas principales de crear estas credenciales. Pueden crearlas y administrarlas por su cuenta a través del portal de Apple Developer, o registrarse directamente con su proveedor de servicios de pago. Para comprender la configuración específica requerida para su sitio web, comuníquense con su proveedor de servicios de pago para obtener más información. En los siguientes pasos, les mostraré cómo crear y administrar sus credenciales a través del portal de Apple Developer. Es posible que su organización ya tenga una cuenta de Apple Developer, especialmente si ya tiene una app en el App Store. Soliciten al administrador de la cuenta que los agregue en las secciones de usuarios y acceso en App Store Connect. Si su organización todavía no tiene una cuenta, regístrense en developer.apple.com. En el centro de cada transacción de Apple Pay se encuentra el identificador de comercio, que los identifica como capaces de aceptar pagos de Apple Pay. Es exclusivo para cada comercio y recomendamos utilizar una cadena inversa al nombre de dominio. A continuación, deben crear un Payment Processing Certificate. Esto se usará para encriptar y desencriptar los datos de pago que les hayan transmitido desde los dispositivos de los clientes. Es probable que reciban una solicitud de firma de certificado de su proveedor de servicios de pago para crearlo, ya que será la parte que desencripte la transacción. Luego, deben crear un certificado de identidad de comercio. Este certificado se utiliza para verificar su identidad como comercio cuando el cliente inicia un pago. Por último, registren y verifiquen los dominios y subdominios donde se mostrará el botón Apple Pay en el sitio web. Para hacerlo, deberán ingresar el dominio completo que desean que se verifique en la sección del dominio del comercio en el portal de Apple Developer. Se generará un archivo que debe descargarse y colocarse en la ruta .well-known del servidor. A continuación, deben hacer clic en el botón de verificación y los servidores de Apple se comunicarán con esa ubicación para verificar su presencia. Con el entorno configurado y el ID de comercio creado, ahora pueden implementar Apple Pay en el sitio web. Para comprender mejor lo que estamos creando, analicemos de forma más detallada una transacción de Apple Pay en internet. Empieza cuando el cliente hace clic o toca el botón Apple Pay. El sitio web crea una solicitud de pago que contiene todos los detalles de la transacción y se comunica con el comercio para solicitar una nueva sesión. Una vez que se haya verificado la identidad del comercio, los servidores de Apple Pay generarán y devolverán un objeto de sesión de comercio. Esto regresa al sitio para completar el proceso de validación. Luego, el cliente puede confirmar los detalles de la hoja de pago y autenticar la transacción con Face ID, Touch ID o su código. Los datos de pago se generan en el dispositivo del usuario y se envían de forma segura a los servidores de Apple Pay para encriptarse con el Payment Processing Certificate específico del comercio. A continuación, los datos de pago regresan a su sitio web. Los datos se envían al proveedor de servicios de pago para que los desencripten y procesen. El proveedor de servicios de pago devuelve el estado del pago. El sitio web notifica al usuario si la transacción se realizó correctamente y, en caso afirmativo, se cerrará la hoja de pago. Este proceso general puede agruparse en cuatro etapas clave: presentación de Apple Pay, validación del comercio, autenticación del pago y procesamiento del pago. El primer paso es la presentación de Apple Pay, que incluye mostrar el botón Apple Pay y visualizar la hoja de pago. El siguiente paso es la validación del comercio, donde se intercambian los certificados entre Apple y el servidor del comercio mediante TLS bidireccional. Luego tenemos la autenticación del pago, donde se confirma y se genera el pago. Finalmente la etapa de procesamiento del pago, que se maneja en gran medida entre el comercio y el proveedor de servicios de pago. Juntos, estos pasos forman la base de un pago típico de Apple Pay en internet. Usaremos este flujo para estructurar nuestro enfoque a fin de implementar Apple Pay. Comencemos presentando Apple Pay como una opción de pago en nuestro sitio web. Deberían mostrar el botón Apple Pay siempre que el cliente esté usando un dispositivo compatible. Para comprobar si el dispositivo del cliente es compatible con Apple Pay, invoquen ApplePaySession.canMakePayments. Es importante tener en cuenta qué tipo de botón se adapta mejor a su proceso de compra. La API Apple Pay ofrece muchos tipos de botones y una gran variedad de estilos para usar en el sitio web, por lo que podrán elegir el botón que mejor se adapte al flujo de su experiencia de compra. Usen los botones proporcionados por el sistema para asegurarse de que están usando un tipo de letra, un color, un subtítulo y un estilo aprobados por Apple. El botón se puede importar en el sitio usando JavaScript o CSS, y el estilo, el tipo y la localización se pueden configurar fácilmente con atributos. Para agregar el botón con el SDK de JavaScript, carga el script del botón desde la red de entrega de contenido. Pueden definir propiedades CSS, como el radio del borde, para alinear mejor el botón con la interfaz de usuario actual. Por último, agreguen el elemento de botón Apple Pay a la página, estableciendo los atributos para el estilo, el tipo y la configuración regional. Para este ejemplo, elegimos usar el estilo de botón negro con el texto “Pagar con Apple Pay” y traducido al alemán. Para ver las opciones disponibles del botón Apple Pay, regresemos al sitio de demostración de Apple Pay que vimos antes. Aquí se pueden cambiar los atributos del botón Apple Pay y las propiedades CSS mostrando el resultado en tiempo real en la parte inferior de la página. Esta es una forma rápida y sencilla de generar botones Apple Pay y copiar y pegar el código en el sitio web. Aquí pueden seleccionar el tipo de botón. Elegí el negro. Luego, pueden elegir el tipo que mejor se adapte a la situación. Y el último atributo sería el idioma. Localicemos esto al alemán como en el ejemplo anterior. Más abajo, están las propiedades CSS, como el ancho del botón, la altura, el radio de la esquina y el relleno. La configuración del botón se muestra y actualiza dentro del bloque de código justo debajo de las opciones. Esto se puede copiar y pegar en el código existente. Hay varios tipos de solicitud de pago disponibles, lo que te permite presentar información adicional sobre la transacción al cliente. Una transacción típica es la de un pago único, pero Apple Pay también ofrece opciones de solicitud de pago para pagos recurrentes, como suscripciones, pagos de recarga automática, como recargas de tarjetas de tiendas, y pagos diferidos, como para un pedido anticipado. Por ahora, veamos cómo crear una solicitud de pago para un pago único. Para aceptar pagos de Apple Pay mediante la API Payment Request, primero deben especificarla como método de pago usando el identificador, en este caso, apple.com/apple-pay. Además del identificador, también necesitamos incluir algunos datos asociados. Esto incluye un número de versión y recomendamos usar la última versión disponible, ya que tendrá las funcionalidades más recientes de Apple Pay. Consulten developer.apple.com para obtener la información más reciente. También necesitamos el merchantIdentifier configurado anteriormente, qué capacidades y redes desean admitir, y el código del país en el que se procesará el pago. Es muy importante que se configure correctamente para garantizar que se genere un criptograma compatible en mercados PSD2. Como alternativa, pueden incluir los detalles de contacto obligatorios de la dirección de facturación del cliente, la dirección de envío o ambas. Aquí solicitamos la dirección de envío del cliente. Sin embargo, la confianza y la privacidad son muy importantes para tener en cuenta al solicitar datos de clientes. Solo se debe solicitar la información necesaria para realizar la transacción y asegurarse de obtener la mejor conversión con Apple Pay. Lo siguiente que tienes que hacer es crear un objeto de detalles para la transacción. Esto incluye elementos de visualización, donde puedes incluir impuestos, cargos y descuentos, opciones de envío para permitir al cliente elegir cómo se envía su pedido, que es ideal para ofrecer una opción de pago exprés, y finalmente el total, que contiene la moneda y la cantidad a cobrar, y una etiqueta que contenga el nombre del comercio. El valor del nombre del comercio debería ser el nombre que el cliente asocia con la empresa, y se mostrará junto a la palabra “pagar” en la hoja de pago. El objeto de detalles es también donde deberían incluir cualquier modificador para la transacción. Los modificadores contienen detalles de la transacción que se aplican solo en determinadas condiciones. Por ejemplo, es posible que deseen agregar un recargo por pagar con tarjeta de crédito. Si quisieran solicitar un pago recurrente, como el de una suscripción, también deberían incluir los detalles de la solicitud recurrente. Ahora podemos reunir todos estos elementos para iniciar una nueva solicitud de pago. Creen un nuevo objeto de solicitud de pago y pasen los métodos, los detalles y las opciones al constructor. Como ya vimos, una de las grandes ventajas de Apple Pay es que se puede usar como una opción de pago exprés para mejorar la conversión. Deben intentar que la experiencia sea lo más fluida posible. Para ello, deben comprobar que el usuario tiene una tarjeta disponible para realizar el pago antes de mostrar el botón Apple Pay. Esto se puede lograr con el método canMakePayment de Payment Request. Este método comprueba que el cliente se encuentre en un dispositivo y navegador compatibles con Apple Pay, y resuelve a true solo si el cliente tiene una tarjeta disponible para realizar un pago. Cuando el cliente toque el botón Apple Pay, deberían usar el método de mostrar para que aparezca la hoja de pago. Una vez que se muestre la hoja de pago, aparecerá la animación de procesamiento e inmediatamente se iniciará el proceso de validación del comercio. Veamos qué implica eso. El proceso de validación del comercio se completa para cada transacción de Apple Pay en internet y es una importante medida de seguridad para garantizar que el pago está siendo procesado por un comercio legítimo y autorizado. Esto ayuda a proteger a los usuarios de transacciones fraudulentas y mejora la seguridad general del proceso de pago. El proceso de validación del comercio tiene tres partes: el sitio web del comercio, el servidor del comercio y el servidor de Apple. Cuando se presiona el botón Apple Pay, la validación del comercio se activa automáticamente con una llamada al controlador onmerchantvalidation. Dentro de este controlador, tendrá que realizarse una llamada a un punto final en el servidor del comercio solicitando que se cree una nueva sesión con el nombre de host estático, apple-pay-gateway.apple.com como URL de validación. Para garantizar que los certificados permanezcan seguros, la solicitud a los servidores de Apple Pay deben venir del servidor de comercio y no desde el navegador directamente. Esto es para que los certificados de identidad del comercio permanezcan seguros, no se compartan con los usuarios y otras partes, y no puedan imitar su sitio web. Para solicitar una nueva sesión, el servidor de comercio crea una carga de solicitud de sesión y la publica en los servidores de Apple Pay mediante TLS bidireccional. El certificado usado para esta conexión es el certificado de identidad del comercio. Una vez validada la identidad del comercio, se genera un nuevo objeto de sesión de comercio y se devuelve al servidor. Este objeto no debe modificarse de ninguna forma; de lo contrario, la validación del comercio fallará. Luego, el objeto de sesión de comercio se devuelve al navegador. A continuación, pasan el objeto de sesión del comercio al método de finalización para completar el proceso de validación del comercio. A continuación, el sistema habilitará la hoja de pago para la interacción con el cliente. Veamos cómo realizar este proceso en el código. En cuanto se toque el botón Apple Pay, se activará el controlador onmerchantvalidation. Dentro de este controlador, se debe realizar una llamada a un punto final en el servidor para gestionar la solicitud de la sesión de comercio. Cuando el navegador lo recibe, el objeto de sesión de comercio se pasa como JSON y se utiliza en la llamada de retorno completa para terminar el proceso. La validación de comercio correcta hace que la hoja de pago se actualice para notificar al cliente que el pago está listo para confirmarse. Una validación de comercio incorrecta hará que la hoja de pago se cierre directamente después de que el cliente hizo clic en el botón Apple Pay. Si tienen problemas con la validación del comercio, pueden usar la consola en la herramienta integrada Inspector web en Safari para registrar errores y objetos al trabajar sobre la validación del comercio. Si nunca la usaron, Inspector web proporciona un potente conjunto de herramientas para depurar e inspeccionar páginas web, extensiones web y WKWebViews. Mientras ejecutan Inspector web en la Mac, pueden usarlo para depurar el código ejecutándose en cualquier dispositivo conectado. Para obtener más información sobre Inspector web, consulten Redescubrir las funcionalidades de desarrolladores de Safari de WWDC23. Con la validación del comercio cubierta, hablemos sobre la autenticación del pago. Cuando el usuario cambia o actualiza los campos en la hoja de pago, estas selecciones se comparten a través de controladores de eventos, lo que permite al sitio web responder a la entrada de datos del usuario. Algunos ejemplos de estos controladores son el método de pago seleccionado por el cliente, incluidos códigos de cupón; la opción de envío elegida se actualiza, o hay cambios en la ubicación de su dirección de envío. Cuando el navegador invoca uno de estos controladores, tienen 30 segundos para procesarlo y usar la función de devolución de llamada updateWith. Las llamadas al servidor para comprobar la validez de la dirección de envío deben producirse en estos 30 segundos. Si la función de devolución de llamada no se usa en este momento, aparecerá un mensaje en la hoja de pago que indica que el pago no se pudo completar. Veamos el controlador onshippingaddresschange con más detalle. Antes de que el usuario autentique la transacción, la información de contacto de envío redactada se comparte con el sitio web del comerciante. Por motivos de privacidad, esto incluye solo los datos necesarios para calcular los costos de transacción finales, como impuestos o gastos de envío. Una vez que hayan recibido esta información, pueden calcular los totales relevantes. Si determinan que hay un problema con la dirección o la información de contacto proporcionada por el cliente, también pueden crear sus propios mensajes de error personalizados. Los mensajes de error permiten resaltar los campos que requieren atención, y proporcionan una orientación clara y práctica para facilitar a los clientes la resolución rápida de los problemas y la finalización de la transacción. Cuando Apple Pay proporcione los datos, pueden realizar la misma validación que harían con cualquier campo de entrada manual que tienen hoy en tu sitio web. Cuando determinan que hay un problema con la dirección o la información de contacto del usuario, pueden usar ApplePayError para crear un mensaje de error personalizado. Los detalles que proporcionan en un ApplePayError incluyen un código de error que identifica el área de la hoja de pago con el error, el campo de contacto, que es el campo específico de la hoja de pago con el error, y, por último, el mensaje personalizado para mostrar en la hoja de pago. Luego ApplePayError se devuelve a la actualización con la devolución de llamada del evento. También pueden verificar la dirección completa y la información de contacto del usuario después de que haya autorizado la transacción con Face ID, Touch ID o el código. Si hay un problema con la información de la dirección del usuario, pueden permitirle que vuelva a intentar la transacción y resaltar los problemas que deben solucionarse. Si hay objetos de error agregados a la matriz de errores, pueden impedir que el usuario realice el pago hasta que la información esté en un formato esperado por las reglas de validación. Se recomienda ser lo más flexible posible con los formatos de dirección para garantizar que los usuarios puedan realizar una transacción correcta. También dentro del paquete JSON de datos de tarjeta cifrados de Apple Pay se encuentra el token de pago, que contiene la información necesaria para procesar la transacción. Si realizan el desencriptado del token de pago, deberán hacerlo en este momento. En la mayoría de los casos, el proveedor de servicios de pago se encargará del proceso de desencriptado y pueden enviar el token a ellos directamente para su procesamiento. Este token también incluirá el nombre para mostrar de la tarjeta utilizada para la transacción, que incluye la red y los últimos cuatro dígitos del número de la tarjeta. Esto diferirá del token específico del dispositivo y es lo que deben usar para indicar al cliente qué tarjeta se usó para la transacción, como en el correo electrónico de confirmación del pedido o en el recibo. Eso fue la autenticación del pago. Terminemos con el procesamiento del pago. Una vez finalizado el proceso por el proveedor de servicios de pago, el resultado debe pasarse al método completo para notificar al cliente del resultado. Para una transacción correcta, esto se haría pasando un proceso exitoso. Se actualizaría la hoja de pago con una marca de verificación, y luego se cerraría para completar el proceso de pago Apple Pay. A veces, un pago puede fallar, en cuyo caso pueden pasar un rechazo en el controlador de respuestas. Se muestra un signo de exclamación en la hoja de pago y se solicita al cliente que vuelva a intentarlo, o pueden cerrar la hoja de pago. Y con eso, cubrimos los cuatro pasos principales necesarios para implementar Apple Pay. Pero, por supuesto, ningún análisis sobre la implementación está completo sin una mención de las pruebas. Por último, veamos rápidamente cómo probar la solución. Para hacerlo, vayan al sitio de internet del ambiente de pruebas de Apple Pay. Allí habrá números de tarjetas de crédito exclusivas al ambiente de pruebas de Apple Pay que se pueden aprovisionar en dispositivos para probar la integración del front-end y el proceso de desencriptado. Tengan en cuenta que las tarjetas de crédito del ambiente de pruebas de Apple Pay no se procesarán correctamente si se envían a un entorno de procesamiento de pagos de producción. Las tarjetas de crédito del ambiente de pruebas de Apple Pay son excelentes para realizar pruebas. Sin embargo, recomendamos que las pruebas se realicen con tarjetas reales antes de enviar la implementación para producción. Realizar pruebas con tarjetas reales garantiza que el flujo de punta a punta del proceso de pago funcione correctamente. Y así terminamos con las pruebas y mi descripción sobre cómo empezar con Apple Pay en internet. Cubrí mucho, desde la configuración y la implementación, hasta el uso del ambiente de pruebas. Pero antes de dejarlos, tengo algunos pasos a seguir para ayudarlos a continuar con el proceso de integración de Apple Pay. En primer lugar, asegúrense de visitar el sitio de demostración de Apple Pay. Es el mejor punto de partida para crear su solución de Apple Pay. Consulten la guía de integración de comercios que aparece en esta sesión. Ofrece muchos detalles sobre cada paso del proceso para lograr una implementación con un buen diseño de Apple Pay. Por último, consulten la sección Apple Pay de las Human Interface Guidelines. Allí encontrarán instrucciones detalladas sobre la interfaz de usuario sobre cómo presentar Apple Pay y la hoja de pago en tu sitio web. Gracias por acompañarme