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:

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

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>

   
3. 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ámetros del objeto shoppingCart:

• Parámetros del objeto dentro del arreglo items:

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

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

<script type="text/javascript"> //This block is executed when user is redirected from masterpass
  $(document).ready(function () {//masterpass example
    var masterpassResponse = {
        checkout_resource_url : '${param.checkout_resource_url}',
        oauth_verifier : '${param.oauth_verifier}',
        oauth_token : '${param.oauth_token}',
        mpstatus : '${param.mpstatus}'
    };
    OpenpayMasterpass.getCheckoutData(
        masterpassResponse, //masterpass response
        successCheckoutCallback, //success callback method
        failureCheckoutCallback //Failure callback method
    );
  });
</script>

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

Demo.

En nuestro Demo puedes probar y analizar la implementación de Masterpass descrita aquí: