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).

  1. El cliente preciona el botón Masterpass en el web site.
  2. Se lanza el evento que fue previamente inicializado en la función OpenpayMasterpass.configureButton
  3. Openpay regresa el resultado de autenticación de tu sítio.
  4. Se inicializa el proceso de selección de tarjeta en el modal “Masterpass lightbox”.
  5. El cliente selecciona la tarjeta.
  6. Masterpass envía el resultado de la selección a Openpay.
  7. Openpay consulta la tarjeta seleccionada.
  8. Masterpass regresa la información de la tarjeta.
  9. Openpay almacena la información de la tarjeta y regresa el token.
  10. Se muestra el dialogo de confirmación de pago.
  11. El cliente confirma el pago.
  12. Se envía la petición de cargo con token hacia Openpay.

Flujo por redireccionamiento.

  1. El cliente preciona el botón Masterpass en tu web site.
  2. Se lanza el evento el cual debe ser inicializado en la función OpenpayMasterpass.configureButton
  3. Openpay regresa el resultado de autenticación relacionada a tu sítio.
  4. El usuario es redirigido a Masterpass.
  5. El cliente selecciona la tarjeta.
  6. Masterpass redirige al usuario a la Url configurada en la función OpenpayMasterpass.configureButton
  7. Se lanza la función OpenpayMasterpass.getCheckoutData, la cual envía hacia Openpay la información obtenida de masterpass en el paso anterior.
  8. Openpay consulta la tarjeta seleccionada por el cliente.
  9. Masterpass regresa la información de la tarjeta.
  10. Openpay almacena la tarjeta y regresa el token.
  11. Se muestra el dialogo de confirmación de pago.
  12. El cliente confirma el pago.
  13. 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:

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.

  1. Configura las llaves de Openpay.
    OpenPay.setId('mYourMerchantId');
    OpenPay.setApiKey('pk_yourPublicKey');
    OpenPay.setSandboxMode(true);// set false to go production
  2. 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> 
    Agrega el evento de configuración para el botón.
    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í: