¿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.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2) Agrega la librería de Masterpass.
Para pruebas utiliza:
<script type="text/javascript" src="https://sandbox.static.masterpass.com/dyn/js/switch/integration/MasterPass.client.js"></script>
Para producción utiliza:
<script type="text/javascript" src="https://static.masterpass.com/dyn/js/switch/integration/MasterPass.client.js"></script>
3) Agrega la librería de Openpay.
<script type='text/javascript' src="https://js.openpay.mx/openpay.v1.min.js"></script>
4) Agrega la librería js de Openpay para Masterpass.
<script type="text/javascript" src="${yourContextPath}/js/openpay/masterpass/openpay-masterpass.js"></script>Configuración del Botón Masterpass.
- Configura las llaves de Openpay.
OpenPay.setId('mYourMerchantId'); OpenPay.setApiKey('pk_yourPublicKey'); OpenPay.setSandboxMode(true);// set false to go production - 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.<div class="MasterPassBtnExample"> <a href="#"> <img src="https://www.mastercard.com/mc_us/wallet/img/en/US/mcpp_wllt_btn_chk_180x042px.png"></a> </div> <a href="https://www.mastercard.com/mc_us/wallet/learnmore/es/MX/">Learn More</a>
OpenpayMasterpass.configureButton(".MasterPassBtnExample a", { originUrl : 'https://myWebApp/demo/masterpass/main', callbackUrl : 'https://myWebApp/demo/masterpass/main', enableShippingAddress : true, successCallback : yourSuccessConfigureButtonCallback, // See an example below... failureCallback : yourFailureCallback, cancelCallback : yourCancelCallback, shoppingCart : {//Shopping cart currency: "MXN", //Currency subtotal: "123.00", //Total Amount items: [ //Optionally an array of items { description : "Pen", //Some description quantity : 2, value : "100.00", //Amount imageUrl : "https://cdn.pixabay.com/photo/2012/04/13/17/57/pen-33077_960_720.png" //Some image url }, { description : "Pencil", quantity : 1, value : "23.00", imageUrl : "http://i50.twenga.com/suministros/lapiz/lapices-staedtler-noris-hb-tp_3981652568322654320f.jpg" } ] } });
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
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
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:
var successCallback = function(masterpassResponse) {
OpenpayMasterpass.getCheckoutData(
masterpassResponse, //this is required
successCheckoutCallback, //You must implement this. See an example below...
failureCheckoutCallback //And this too!
);
};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
var successCheckoutCallback = function(response) {
var data = response.data;
console.log('DATA:');
console.log(data);
$("#tokenCard").val(data.id);//this is your openpay Token card to use in the charge request for Openpay
var card = data.card;
console.log(data.card);
$("#holderName").text(card.holder_name);
$("#cardNumber").text(card.card_number);
$("#expirationDate").text(card.expiration_month + '/' +card.expiration_year);
var customer = data.customer;
$("#customerName").text(customer.name);
$("#customerEmail").text(customer.email);
$("#customerLastName").text(customer.last_name);
$("#customerPhone").text(customer.phone_number);
var sa = data.shipping_address;
if (sa) {
$("#postalCode").text(sa.postal_code);
$("#country").text(sa.country_code);
$("#saPhone").text(sa.phone_number);
$("#recipient").text(sa.recipient);
$("#line1").text(sa.line1);
$("#line2").text(sa.line2);
$("#line3").text(sa.line3);
$("#state").text(sa.state);
$("#city").text(sa.city);
}
};
- 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í:
