Masterpass
¿Qué es Masterpass?
Masterpass provee una alternativa para que los datos de la tarjeta del cliente, sean proporcionados de forma segura a Openpay al momento de realizar un pago.
Ponemos a tu disposición nuestra guía de integración, la cual te simplificará el uso de la librería Javascript de Masterpass, para integrarla con los métodos de pago con tarjeta de crédito/débito de Openpay.
Documentación.
Consulta aquí información detallada acerca de Masterpass.
Funcionamiento.
Existen dos flujos posibles para que el cliente seleccione una tarjeta en Masterpass:
- Mendiante Ajax, utilizando la interfaz modal Lightbox.
- O directamente en Masterpass por Redireccionamiento.
Flujo por Ajax (Lightbox).
- El cliente preciona el botón Masterpass en el web site.
- Se lanza el evento que fue previamente inicializado en la función OpenpayMasterpass.configureButton
- Openpay regresa el resultado de autenticación de tu sítio.
- Se inicializa el proceso de selección de tarjeta en el modal "Masterpass lightbox".
- El cliente selecciona la tarjeta.
- Masterpass envía el resultado de la selección a Openpay.
- Openpay consulta la tarjeta seleccionada.
- Masterpass regresa la información de la tarjeta.
- Openpay almacena la información de la tarjeta y regresa el token.
- Se muestra el dialogo de confirmación de pago.
- El cliente confirma el pago.
- Se envía la petición de cargo con token hacia Openpay.
Flujo por redireccionamiento.
- El cliente preciona el botón Masterpass en tu web site.
- Se lanza el evento el cual debe ser inicializado en la función OpenpayMasterpass.configureButton
- Openpay regresa el resultado de autenticación relacionada a tu sítio.
- El usuario es redirigido a Masterpass.
- El cliente selecciona la tarjeta.
- Masterpass redirige al usuario a la Url configurada en la función OpenpayMasterpass.configureButton
- Se lanza la función OpenpayMasterpass.getCheckoutData, la cual envía hacia Openpay la información obtenida de masterpass en el paso anterior.
- Openpay consulta la tarjeta seleccionada por el cliente.
- Masterpass regresa la información de la tarjeta.
- Openpay almacena la tarjeta y regresa el token.
- Se muestra el dialogo de confirmación de pago.
- El cliente confirma el pago.
- Se envía la petición de cargo con token hacia Openpay
Integración.
Para utilizar la librería para Masterpass de Openpay sigue los siguientes pasos:
Requerimientos y dependecias.
Para utilizar masterpass se requiere incluir:
- JQuery 1.10.2 o posterior (Dependencia de Masterpass.js)
- Masterpass.js
- Openpay.js
- Crea una cuenta para pruebas en Masterpass
1) Agrega la librería de JQuery.
2) Agrega la librería de Masterpass.
Para pruebas utiliza:
Para producción utiliza:
3) Agrega la librería de Openpay.
4) Agrega la librería js de Openpay para Masterpass.
Configuración del Botón Masterpass.
- Configura las llaves de Openpay.
- Agrega el botón de Masterpass con uno de los
Diseños disponibles.
Tambien agrega el link "Learn more" el cual debe ser dinamico, utilizando los Links disponibles dependiendo el idioma y país del usuario.
- Agrega el evento de configuración para el botón.
Parámetro | Descripción | Requerido |
---|---|---|
originUrl | Url de donde se genera la petición | No |
callbackUrl | Masterpass agregará los parámetros de autenticación a esta Url, la cual será utilizada para redirigir al cliente después de que seleccione una tarjeta. Debes realizar el Manejo del redireccionamiento para obtener los parametros de autenticación y realizar la petición hacia Openpay utilizando la función OpenpayMasterpass.getCheckoutData | Si |
enableShippingAddress | Indicador para habilitar la selección de dirección de entrega | Si |
successCallback | Función que será lanzada cuando Masterpass responda exitosamente para el flujo por Ajax. | Si |
cancelCallback | Función que será lanzada cuando el usuario cancele la selección de tarjeta | Si |
failureCallback | Función que será lanzada si Masterpass responde con código de error | Si |
shoppingCart | Objeto referente a la compra actual | No |
- Parámetros del objeto shoppingCart:
Parámetro | Descripción | Requerido |
---|---|---|
currency | Moneda con la cual será procesada la transacción | Si |
subtotal | Precio total de la compra | Si |
items | Arreglo de artículos del carrito de compras | No |
- Parámetros del objeto dentro del arreglo items:
Parámetro | Descripción | Requerido |
---|---|---|
description | Descripción del artículo | Si |
quantity | Cantidad de artículos | Si |
value | Precio unitario | Si |
imageUrl | Url de la imagen del artículo | No |
Función OpenpayMasterpass.getCheckoutData
La función OpenpayMasterpass.getCheckoutData se utiliza para enviar la respuesta de Masterpass después de que el cliente seleccione una tarjeta.
- Parámetros de la función OpenpayMasterpass.getCheckoutData
Parámetro | Descripción | Requerido |
---|---|---|
masterpassResponse | Respuesta regresada por Masterpass la cual será interpretada por Openpay | Si |
successCheckoutCallback | Función la cual se lanzará cuando Openpay obtenga los datos de la tarjeta mediante Masterpass | Si |
failureCheckoutCallback | Función que se ejecutará si Openpay falla al obtener los datos de la tarjeta del cliente | Si |
Manejo de respuesta por Ajax (Lightbox)
Agrega la siguiente función para manejar la respuesta de Masterpass en caso de que sea invocado el modal lightbox, esta debe ser pasada al parametro successCallback en la función OpenpayMasterpass.configureButton:
La función anterior será ejecutada al confirmar la selección de tajeta en el modal "Lightbox":
Manejo de respuesta por redireccionamiento
Debes tomar en cuenta que masterpass podría redirigir al usuario, por lo que debes implementar el siguiente bloque de código el cual manéja la respuesta de masterpass.
Puedes probar este flujo en sandbox omitiendo el parámetro originUrl pasado en el objeto de la función OpenpayMasterpass.configureButton
Los atributos del objeto masterpassResponse serán regresados dentro de la URL al momento de que el usuario sea redirigido.
Función SuccessCheckoutCallBack
La función SuccessCheckoutCallBack es un ejemplo de como manejar la respuesta exitosa de la función OpenpayMasterpass.getCheckoutData
- Parámetros del objeto de respuesta response de Openpay
Parámetro | Descripción |
---|---|
response.data.id | Token de la tarjeta la cual deberá ser utilizada en la petición de cargo. |
response.data.card | Objeto tarjeta. (Número de tarjeta enmascarada) |
response.data.customer | Objeto con la información del cliente |
response.data.customer.name | Nombre del cliente |
response.data.customer.last_name | Apellido del cliente |
response.data.customer.email | E-mail del cliente |
response.data.customer.phone_number | Teléfono del cliente |
data.shipping_address | Objeto con la información de la dirección de entrega |
data.shipping_address.phone_number | Número de teléfono del domicilio |
data.shipping_address.line1 | Línea 1 de la dirección |
data.shipping_address.line2 | Línea 2 de la dirección |
data.shipping_address.line3 | Línea 3 de la dirección |
data.shipping_address.state | Estado |
data.shipping_address.city | Ciudad |
data.shipping_address.postal_code | Código postal |
data.shipping_address.country_code | Código del país |
Demo.
En nuestro Demo puedes probar y analizar la implementación de Masterpass descrita aquí: