CARPETA DE INTEGRACIÓN DE COMERCIO ELECTRÓNICO VISA CHECKOUT Página 1 de 14 23/10/2015
ÍNDICE 1. OBJETIVO GENERAL... 3 2. DEFINICIONES... 3 3. FLUJO DE LA TRANSACCIÓN... 3 4. PRE-REQUISITOS VISA CHECKOUT... 3 4.1. VERSIONES DE BROWSER RECOMENDADOS... 3 4.2. CUENTA EN AMBIENTE DE INTEGRACIÓN (SANDBOX)... 4 5. USO E IMPLEMENTACIÓN DE LOS LOGOS DE VISA Y REQUERIMIENTOS DE MARCA... 4 5.1. BOTONES VISA CHECKOUT... 4 5.2. VISA CHECKOUT LIGHTBOX... 4 5.3. MARCA DE ACEPTACIÓN DE VISA CHECKOUT... 5 6. GENERACIÓN Y USO DE LLAVES DE ENCRIPTACIÓN... 6 6.1. AMBIENTE DE PRUEBA... 7 6.2. AMBIENTE DE PRODUCCIÓN... 7 6.3. CONSIDERACIONES OBLIGATORIAS PARA EL USO DE LLAVES DE ENCRIPTACIÓN... 7 7. AMBIENTE DE PRUEBA... 7 8. PASE A PRODUCCIÓN... 7 9. ANEXOS... 8 9.1. EJEMPLO DE UBICACIÓN DEL BOTÓN DE VCO EN UN ESQUEMA MINI-CART... 8 9.2. EJEMPLO DE UBICACIÓN DEL BOTÓN DE VCO AL INICIAR LA SESIÓN... 12 Página 2 de 14 23/10/2015
1. Objetivo General Este documento tiene como objetivo dar lineamientos generales para la integración y adecuación de las páginas web o tiendas virtuales de los comercios afiliados al servicio de VISA Checkout. 2. Definiciones Integración: Proceso de pruebas y adecuaciones para poder realizar ventas por aplicativos móviles utilizando VisaNet Token API y cumplir con los requerimientos especificados en este documento. Sección de Pagos: Pantalla donde el tarjeta-habiente selecciona el producto o servicio a comprar. POS Multimerchant: Módulo web de liquidación y consulta de las transacciones realizadas en comercio electrónico. Tarjetahabiente: Persona titular de una tarjeta, en este caso, de la marca VISA. 3. Flujo de la transacción INICIO 1. Tarjetahabiente selecciona los productos en la Página Web del Comercio 2. Tarjetahabiente selecciona pagar con Visa Checkout 3. Se solicita el ingreso a Visa CheckOut, a través de la pantalla de login. 4. El trajetahabiente selecciona la tarjeta previamente enrolada en Visa CheckOut 6. Comercio muestra el resumen de la información de pago. 7. TH completa CVV2 y continua con la transacción Transaccion autorizada por Visanet? No Si 13.1 Pagina del comercio muestra mensaje de transacción exitosa 11.2 Página del comercio muestra denegación FIN 4. Pre-requisitos Visa CheckOut A continuación revisaremos la lista de pre requisitos que el comercio deberá tener en cuenta al momento de realizar la integración con Visa CheckOut. 4.1. Versiones de browser recomendados Los siguientes browsers son recomendados para el uso de Visa CheckOut. Internet Explorer, versión 8 o mas Firefox, a partir de la versión 10. Chrome, versión actual, con excepción de las versiones beta. Safari, versión S6 o mas ios, versión 6 o mas Android, versión 4 o mas Visa CheckOut puede aceptar otros browser que sean compatibles con HTML 4.01 o más, el cual incluye XHTML 1.0 o más. Página 3 de 14 23/10/2015
4.2. Cuenta en Ambiente de Integración (Sandbox) Para acceder al ambiente de integración de Visa CheckOut, deberá tener una cuenta Sandbox y las credenciales respectivas, las cuales consisten en: API key Shared secret Revisar la sección 6. Generación y Uso de Llaves de Encriptación. 5. Uso e implementación de los logos de Visa y requerimientos de marca Con el objetivo de mejorar la experiencia del usuario, Visa puede actualizar o cambiar los botones de CheckOut en cualquier momento. 5.1. Botones Visa CheckOut A continuación presentamos los tres tipos de botón que podrá utilizar en su integración. 1. Estándar: No tiene la opción de mostrar el arte de la tarjeta. 2. Neutral: No tiene la opción de mostrar el arte de la tarjeta. Para ser utilizado si el fondo de la página es de color oscuro. 3. Botón con el arte de la tarjeta Los logos Visa o alguna porción de éstos; nunca deben ocultarse, distorsionarse, desfigurarse ni alterarse de manera alguna, ni aparecer con menor prominencia que otras marcas de medios de pagos. Los comercios afiliados no podrán usar las marcas ni logos propiedad de Visa de una manera que pudiera perjudicar la reputación de Visa Inc., VisaNet del Perú o cualquiera de sus afiliadas y de las Marcas Propiedad de Visa. Los comercios que no cumplan con los requisitos para la implementación y uso de los logos Visa no podrán completar la integración ni ser pasados a producción. Los comercios son responsables de actualizar los logos de VISA a la última versión vigente. El logo de Visa CheckOut deberá mostrarse en todos las páginas en las que se muestre una opción de pago. El botón de Visa CheckOut deberá estar en el mismo nivel de otros botones de pago. En la Sección 9. Anexos, se muestran algunos ejemplos proporcionados por Visa, de donde colocar los botones de pago, dependiendo de cada situación. VisaNet Perú podrá revisar periódicamente el cumplimiento de los lineamientos para la implementación de logos. 5.2. Visa CheckOut Lightbox Página 4 de 14 23/10/2015
Es el objeto que aparece luego de hacer click en el botón de Visa CheckOut. El usuario podrá generar crear su cuenta, realizar el login para luego hacer el pago. 5.3. Marca de aceptación de Visa CheckOut Nota: Es recomendable el uso del nombre no apilado, es decir, con la palabra CheckOut a la derecha. Utilizada para que los tarjetahabientes sepan que en ese comercio se utiliza Visa CheckOut como medio de pago. Los logos disponibles son los siguientes: 1. Logos Preferred acceptance mark, 99x34 pixels: URL: https://assets.secure.checkout.visa.com/vmecardarts/partner/pos_horizontal_99x34.png Note: The following filename has been deprecated: Identifier_Blue_largehorizontal_V.me_byVisa.png 40x30 pixels: URL: https://assets.secure.checkout.visa.com/vmecardarts/partner/pos_vertical_medium_40x30.png Note: The following filename has been deprecated: Identifier_Blue_smallvertical_V.me_byVisa.png Página 5 de 14 23/10/2015
49x31 pixels: URL: https://assets.secure.checkout.visa.com/vmecardarts/partner/pos_vertical_large_49x31.png 28x21 pixels: URL: https://assets.secure.checkout.visa.com/vmecardarts/partner/pos_vertical_small_28x21.png 2. Reglas de Uso: Las siguientes reglas deben utilizarse con la marca de aceptación de Visa CheckOut: Añada Visa CheckOut como el texto alternativo para la imagen. El logo de la marca de aceptación, no sustituye a la marca Visa. Si la marca de aceptación no se acomoda en la página, en su lugar, puede usarse el texto completo Visa CheckOut. 3. Uso en la página de pago Las páginas de pago son aquellas en las cuales se aceptan los pagos con botón de Visa CheckOut. El botón de Visa CheckOut, puede utilizarse dentro de un radio button. Cuando el botón de Visa CheckOut ha sido seleccionado, mostrar el botón de Visa CheckOut y ocultar los campos de ingreso de otros métodos de pago. 4. Identificación de los Métodos de Pago Aceptados Si muestra los métodos de pago aceptados, debe incluir la marca de aceptación de Visa CheckOut. 5. Requerimientos Generales para la Colocación y uso de Visa CheckOut Deberá poner en práctica los requisitos de la marca Visa en todas las páginas donde su cliente encuentre el botón de Visa CheckOut. Comúnmente se incluyen en la página del carro de compras, la página de inicio de sesión, la página de producto y la página de pago. La implementación depende del flujo específico de su proceso de pago. 6. Generación y Uso de Llaves de Encriptación Las llaves de encriptación, son elementos que otorgan seguridad a la información, por lo que es importante que determinar quienes serán las personas autorizadas para mantener esta información. Página 6 de 14 23/10/2015
6.1. Ambiente de prueba Para generar las credenciales necesarias en el ambiente de pruebas, deberá ingresar la siguiente dirección: https://developer.digital.visa.com/self-service-ic/login 6.2. Ambiente de Producción 1. Para generar las credenciales necesarias en el ambiente de producción, deberá enviar los siguientes datos a ceintegración@visanet.com.pe Código de Comercio Razón Social del Comercio URL del comercio Mail de Contacto Dominio del Comercio Nombre del Contacto Apellido del Contacto 2. VisaNet registrará la información del comercio en el sistema de Visa, indicando la dirección de correo de la persona responsable del uso de las llaves. Dicha dirección de correo deberá estar registrada en el dominio del comercio (usuario@comercioejemplo.com). 3. El usuario (responsable de las llaves) recibirá un correo con las credenciales de acceso. 6.3. Consideraciones obligatorias para el Uso de Llaves de Encriptación El usuario designado por el comercio es responsable de la custodia de las llaves generas y deberá ser vistas sólo por él para almacenarlas posteriormente encriptadas en los sistemas del comercio. El comercio es responsable de resguardar las llaves y generar políticas de acceso a estas. 7. Ambiente de Prueba Durante la etapa de pruebas el comercio debe utilizar la URL: Ambiente Sandbox URL https://sandbox-assets.secure.checkout.visa.com/checkoutwidget/resources/js/integration/v1/sdk.js 8. Pase a Producción Visanet realizará las revisiones necesarias para garantizar que el desarrollo de Visa CheckOut del comercio cumpla con lo especificado en este documento antes de autorizar el pase a producción del mismo. Una vez terminada la etapa de integración, y con la certificación de VisaNet, el comercio debe utilizar la URL de producción. Ambiente URL Página 7 de 14 23/10/2015
Producción https://assets.secure.checkout.visa.com/checkoutwidget/resources/js/integration/v1/sdk.js 9. Anexos A continuación presentamos 2 ejemplos considerando los flujos de transacción actuales de Comercio Electrónico, en donde podrá validar la ubicación del botón de Visa CheckOut, antes de su salida a producción. 9.1. Ejemplo de Ubicación del Botón de VCO en un esquema Mini-Cart 1. Flujos Flujo Actual El siguiente diagrama se muestra el flujo actual de las acciones a seguir en una transacción sin utilizar Visa CheckOut. Pagina del Producto Mini Cart Sección de Información de Envío Sección de Información Pago Resumen de la orden y pago Confirmación de la Orden Flujo con Visa CheckOut En el siguiente diagrama se muestra e cambio del flujo al implementar el botón de pago Visa CheckOut. Página del Producto Mini Cart Sección de Información de Envío Sección de Información de Pago Resumen de la orden y pago Confirmación de Orden Visa Checkout 2. Pantallas de ejemplo A continuación un ejemplo de la inclusión de un botón de Visa CheckOut en un minicart. Página 8 de 14 23/10/2015
Al presionar el botón de Visa CheckOut, deberá visualizarse el Lightbox, para que el usuario ingrese su Username y su Password. Página 9 de 14 23/10/2015
Cuando el usuario ingresa a Visa CheckOut con sus datos, podrá visualizar todas las tarjetas registradas previamente, con los datos necesarios para que pueda elegirla como medio de pago para esta compra. En esta sección se visualizará el logo del comercio. Página 10 de 14 23/10/2015
Una vez seleccionada la tarjeta y presionar el botón continuar, la transacción deberá retornar a la página del comercio y mostrar los datos del resumen necesarios para que el usuario pueda confirmar el pago. Página 11 de 14 23/10/2015
9.2. Ejemplo de ubicación del botón de VCO al iniciar la sesión En la siguiente pantalla se visualiza el inicio del flujo de la presentación del botón de Visa CheckOut antes del inicio de la sesión. Al presionar el botón de checkout, se visualiza la pantalla en donde se mostrarán las opciones para el inicio de sesión de esta tienda on-line. Página 12 de 14 23/10/2015
Al seleccionar la opción de iniciar sesión con Visa CheckOut, se mostrará la pantalla de ingreso de usuario y password. Al ingresar el usuario y password, el lightbox de Visa CheckOut, se visualizarán todas las tarjetas que el usuario haya registrado previamente con los datos necesarios para la selección del medio de pago de esta compra. En esta pantalla el comercio deberá mostrar su logo. Página 13 de 14 23/10/2015
Al presionar continuar, retornará a la página inicial y se mostrará el resumen de la compra, en donde se deberán incluir todos los datos necesarios para que el usuario pueda confirmar el pago. Quiero saber más: A continuación la sección quiero saber más de Visa CheckOut. Página 14 de 14 23/10/2015