carpeta técnica visa checkout (informativo) fecha de publicació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 1 de 14 23/10/2015

CARPETA DE INTEGRACIÓN

DE COMERCIO

ELECTRÓNICO

VISA CHECKOUT


Versión: 01


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


Versión: 01


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.


Versión: 01


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


Versión: 01


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


Versión: 01


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.


Versión: 01


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

https://developer.digital.visa.com/self-service-ic/login

mailto:ceintegració[email protected]

mailto:[email protected]


Versión: 01


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


Envío

Resumen de la orden y pago


Pago

Confirmación de Orden


Versión: 01


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.


Versión: 01


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.


Versión: 01


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.


Versión: 01


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.


Versión: 01


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.


Versión: 01


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.

carpeta técnica visa checkout (informativo) fecha de publicación

Documents