Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 1 de 14 23/10/2015
CARPETA DE INTEGRACIÓN
DE COMERCIO
ELECTRÓNICO
VISA CHECKOUT
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 2 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
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 3 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?Si
13.1 Pagina del
comercio muestra
mensaje de
transacción exitosa
11.2 Página del
comercio muestra
denegación
FIN
No
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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 4 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
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 5 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
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 6 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 7 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ó[email protected]
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 ([email protected]).
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 URL
Sandbox https://sandbox-assets.secure.checkout.visa.com/checkout-widget/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
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 8 de 14 23/10/2015
Producción https://assets.secure.checkout.visa.com/checkout-widget/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.
Flujo con Visa CheckOut En el siguiente diagrama se muestra e cambio del flujo al implementar el botón de pago Visa CheckOut.
2. Pantallas de ejemplo
A continuación un ejemplo de la inclusión de un botón de Visa CheckOut en un mini-cart.
Sección de Información de
Envío
Pagina del Producto
Mini Cart
Sección de Información
Pago
Resumen de la orden y pago
Confirmación de la Orden
Visa Checkout
Página del Producto
Mini Cart
Sección de Información de
Envío
Resumen de la orden y pago
Sección de Información de
Pago
Confirmación de Orden
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 9 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 10 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 11 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 12 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 13 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.
Carpeta de Integración de Comercio Electrónico VISA Checkout
Versión: 01
Propiedad de Compañía Peruana de Medios de Pago S.A.C. Prohibida cualquier reproducción, distribución o comunicación, salvo autorización expresa de VisaNet Perú.
Página 14 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.
Top Related