Implementación de una Integración de Hosted Session

La biblioteca de cliente JavaScript de Hosted Session le permite recopilar detalles de pago confidenciales desde el pagador en campos de formularios de pago, hospedados por el Mastercard Payment Gateway. El motor de pagos recopila los detalles de pago confidenciales en una sesión de pago y los almacena temporalmente para su uso posterior. Entonces puede incluir una sesión de pago en lugar de los detalles de pago en la solicitud de transacción para procesar un pago. Para obtener más información, consulte sesión de pago.

Hosted Session es un método de integración que cumple con PCI v3 y facilita el cumplimiento con SAQ-A a la vez que permite controlar el estilo y el diseño de la página de pago. En este modelo, la totalidad de los campos de pago confidenciales están incrustados en iFrames controlado por el Mastercard Payment Gateway. Los mecanismos estándar de protección de seguridad del explorador aíslan de usted los campos confidenciales, lo cual conserva la integridad del canal de pago proporcionado por el motor de pagos.

Prerrequisitos

  • Asegúrese de que el perfil de negocio está habilitado para el servicio de Hosted Session.
  • Hosted Session es compatible solo desde API versión 18 y posteriores.

Solicitar una interacción de Hosted Session

En esta sección se describe una integración sencilla para Hosted Session para recopilar detalles de la tarjeta de crédito del pagador.

<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://evopaymentsmexico.gateway.mastercard.com/form/version/57/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>

<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->

<div>Please enter your payment details:</div>
<h3>Credit Card</h3>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>
<div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="2" readonly></div>
<div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="3" readonly></div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="4" readonly></div>
<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="5" readonly></div>
<div><button id="payButton" onclick="pay('card');">Pay Now</button></div>

<!-- JAVASCRIPT FRAME-BREAKER CODE TO PROVIDE PROTECTION AGAINST IFRAME CLICK-JACKING -->
<script type="text/javascript">
if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
} else {
    top.location = self.location;
}

PaymentSession.configure({
    fields: {
        // ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
        card: {
            number: "#card-number",
            securityCode: "#security-code",
            expiryMonth: "#expiry-month",
            expiryYear: "#expiry-year",
            nameOnCard: "#cardholder-name"
        }
    },
    //SPECIFY YOUR MITIGATION OPTION HERE
    frameEmbeddingMitigation: ["javascript"],
    callbacks: {
        initialized: function(response) {
            // HANDLE INITIALIZATION RESPONSE
        },
        formSessionUpdate: function(response) {
            // HANDLE RESPONSE FOR UPDATE SESSION
            if (response.status) {
                if ("ok" == response.status) {
                    console.log("Session updated with data: " + response.session.id);
  
                    //check if the security code was provided by the user
                    if (response.sourceOfFunds.provided.card.securityCode) {
                        console.log("Security code was provided.");
                    }
  
                    //check if the user entered a Mastercard credit card
                    if (response.sourceOfFunds.provided.card.scheme == 'MASTERCARD') {
                        console.log("The user entered a Mastercard credit card.")
                    }
                } else if ("fields_in_error" == response.status)  {
  
                    console.log("Session update failed with field errors.");
                    if (response.errors.cardNumber) {
                        console.log("Card number invalid or missing.");
                    }
                    if (response.errors.expiryYear) {
                        console.log("Expiry year invalid or missing.");
                    }
                    if (response.errors.expiryMonth) {
                        console.log("Expiry month invalid or missing.");
                    }
                    if (response.errors.securityCode) {
                        console.log("Security code invalid.");
                    }
                } else if ("request_timeout" == response.status)  {
                    console.log("Session update failed with request timeout: " + response.errors.message);
                } else if ("system_error" == response.status)  {
                    console.log("Session update failed with system error: " + response.errors.message);
                }
            } else {
                console.log("Session update failed: " + response);
            }
        }
    },
    interaction: {
        displayControl: {
            formatCard: "EMBOSSED",
            invalidFieldCharacters: "REJECT"
        }
    }
 });

function pay() {
    // UPDATE THE SESSION WITH THE INPUT FROM HOSTED FIELDS
    PaymentSession.updateSessionFromForm('card');
}
</script>
</body>
</html>
  1. Incluya la biblioteca JavaScript cliente session.js hospedada por el motor de pagos en su página de pago. La ruta a este campo incluye tanto la versión de la API como el identificador del negocio para la sesión.
  2. Cree el HTML para la página de pago que contiene los campos de la tarjeta de crédito.
    Para evitar el envío de datos confidenciales al servidor, asegúrese de que estos campos sean de readonly y NO tengan el atributo name .
  3. Invoque la función PaymentSession.configure(configuration).

    El objeto configuration le permite adjuntar campos hospedados a su página de pago y/o configurar la interacción de billetera. Debe proporcionar lo siguiente:

    • session(optional), si no proporciona una, la biblioteca de cliente crea una sesión de pago.
    • selectores de campo para los campos de la tarjeta de crédito, los cuales (cuando se proporcionan) se reemplazan con campos proxy correspondientes incrustados en iFrames hospedados por el Mastercard Payment Gateway. Los campos proxy tendrán la misma apariencia que los campos reemplazados. Usted puede captar detalles de pago para otros tipos de pago; consulte Métodos de pago compatibles a través de Hosted Session.
    • opciones de mitigación para la prevención de clickjacking

      Clickjacking, también conocido como "ataque de rectificación de UI", se produce cuando un atacante usa varias capas transparentes u opacas para engañar al usuario y lograr que haga clic en un botón o vínculo en otra página cuando intenta hacer clic en la página del primer nivel. Para usar Hosted Session, debe implementar una o más de las siguientes defensas contra ataques de clickjacking.

      Opción de mitigación de marcos Implementación
      javascript incluya el JavaScript "separador de marcos" en su página de pago.
      x-frame-options su servidor debe devolver un encabezado de respuesta HTTP de opciones X-Frame.
      csp su servidor debe devolver un encabezado de respuesta HTTP de contenido-seguridad-política que contenga una directiva de antecesores de marcos.

      Debe especificar qué defensas se implementan a través del parámetro frameEmbeddingMitigation en la llamada de PaymentSession.configure(configuration). Para obtener información sobre cómo defenderse contra ataques de clickjacking, consulte Referencia de defensa contra clickjacking en el sitio web externo OWASP.

    • devoluciones de llamada para administrar diversos eventos durante la interacción de la Hosted Session.
      • initialized( ): se invoca cuando los campos hospedados se adjuntan a su página de pago.
      • formSessionUpdate( ): se invoca en respuesta a la función PaymentSession.updateSessionFromForm(paymentType) (consulte el paso siguiente)

  4. Invoque PaymentSession.updateSessionFromForm('card') para almacenar los detalles de pago captados para el tipo de pago 'card' en una sesión de pago. Una vez finalizada la operación, la devolución de llamada formSessionUpdate( ) se invoca con un parámetro de resultado. Debe comprobar el valor result.status para determinar si la operación fue correcta. Consulte Administrar respuestas de devolución de llamada.
  5. Puede usar la sesión de pago devuelta (session.id) para realizar una tokenización o una transacción de pago cuando se requiere. Para obtener más información, consulte Realizar una operación con la sesión.

Referencia de session.js[JavaScript]

Métodos de pago compatibles a través de Hosted Session

Hosted Session le permite configurar uno o más de los siguientes métodos de pago para captar los detalles de pago del pagador. Los detalles de pago se captan a través de campos hospedados adosados a su formulario de pago con la excepción de las billeteras digitales, donde los detalles de pago se captan desde una interacción de billetera.

En el caso de cada método de pago admitido, la Hosted Session le permite recopilar y enviar detalles de pago completos, parciales o individuales (excepto mes y año de vencimiento de la tarjeta) a una sesión de pago. Puede usar la sesión de pago devuelta en combinación con varias fuentes para procesar un pago. Por ejemplo, si ya tokenizó el número de tarjeta del pagador y la fecha de vencimiento, entonces puede usar la Hosted Session para recopilar solo el CSC/CVV y usar los detalles de la tarjeta desde ambas fuentes en conjunto para realizar un pago. O bien puede usar la Hosted Session para recopilar solo la fecha de vencimiento de la tarjeta en una sesión de pago y actualizar una tarjeta vencida almacenada contra un token.
Tarjetas de crédito/débito

Puede captar los siguientes detalles de tarjeta mediante campos hospedados.

  • card.number
  • card.expiryMonth
  • card.expiryYear
  • card.securityCode
  • card.nameOnCard
Todos los campos son opcionales; sin embargo, si se configura el card.expiryMonth, entonces el card.expiryYear es obligatorio y viceversa.
Tarjetas de regalo

Puede captar los siguientes detalles de tarjeta de regalo mediante campos hospedados.

  • giftCard.number
  • giftCard.pin

Consulte Integración con tarjetas de regalo mediante Hosted Session.

Pagos de Automated Clearing House

Hosted Session le permite captar detalles de pago para Pagos directos (pagos) y Depósitos directos (reembolsos) mediante Automated Clearing House. Puede captar los siguientes detalles de Automated Clearing House mediante campos hospedados:

  • ach.routingNumber
  • ach.bankAccountNumber
  • ach.bankAccountHolder
  • ach.accountType

Consulte Integración de Automated Clearing House mediante Hosted Session.

Billeteras digitales

Hosted Session le permite captar los detalles de pago desde una interacción de billetera. Actualmente, solo las interacciones de billetera Visa Checkout son compatibles. Debe estar habilitado para Visa Checkout mediante el Mastercard Payment Gateway para iniciar esta interacción. Consulte Integración de Visa Checkout mediante Hosted Session.

Administrar respuestas de devolución de llamada

Resultados para campos hospedados mediante initialized(result)
Si result.status=="ok"

Los campos hospedados se adjuntan correctamente a su página de pago.

       // An ok response
{
    "status":"ok",
}
       
Si result.status=="system_error" o result.status=="request_timeout"

Se produjo un error al adjuntar los campos hospedados. Debe volver a tratar después de un breve período.

// An error response (system_error)
{
    "status": "system_error",  
    "message": "System error message." 
}
// An error response (request_timeout)
{
    "status" : "request_timeout", 
    "message": "Request timeout error message."
}
       
Resultados para Update Session mediante formSessionUpdate(result)
Si result.status=="ok"

La sesión ahora contiene los detalles de tarjeta recopilados.

// An ok response
{
    "status":"ok",
    "merchant": "TESTMERCHANT",
    "session": {
        "id": "SESSION000218450948092491657986"
        "updateStatus":"SUCCESS",
        "version":"e3f144ce02"
    },
    "sourceOfFunds": {
        "provided": {
            "card": {
                "brand": "MASTERCARD",
                "expiry": {
                    "month": "5",
                    "year": "21"
                },
                "fundingMethod": "DEBIT",
                "nameOnCard": "John Smith",
                "number": "512345xxxxxx8769",
                "scheme": "MASTERCARD"
            }
        },
        "type": "CARD"
    },   
    "version": "43"
}
       
Si result.status=="fields_in_error"

La entrada del pagador no es válida y debe indicarle que actualice su entrada. La estructura de respuesta errors contiene información acerca de los campos no válidos.

       // An error response (fields_in_error)
{
    "status": "fields_in_error",  
    "session": {
        "id": "SESSION000218450948092491657986"
    },
    "errors": {
        "cardNumber": "invalid",
        "securityCode": "invalid"  
    },
    version: "43"
}
       
Si result.status=="system_error" o result.status=="request_timeout"

Se produjo un error al procesar la actualización. Debe volver a intentar la actualización de sesión después de un breve período.

       // An error response (system_error)
{
    "status": "system_error",  
    "session": {
        "id": "SESSION000218450948092491657986"
    },
    "errors": {
        "message": "System error message." 
    },
    "version": "43"
}
  // An error response (request_timeout)
{
    "status" : "request_timeout", 
    "session": {
        "id": "SESSION000218450948092491657986"
    },
    "errors": {
        "message": "Request timeout error message."
    },
    "version": "43"
}
       

Prestar atención a eventos en campos hospedados

Hosted Session le permite registrar funciones de devolución de llamada para administrar eventos que pueden ocurrir en los campos hospedados durante la interacción del pagador.

Puede registrar funciones de devolución de llamada para los siguientes eventos:
  • onChange( ): Se invoca cuando el valor de entrada en el campo hospedado en iFrame ha cambiado.
  • onFocus( ): Se invoca cuando el campo hospedado en iFrame ha obtenido enfoque.
  • onBlur( ): Se invoca cuando el campo hospedado en iFrame ha perdido enfoque.
  • onMouseOver( ): Se invoca cuando el mouse se posa sobre un elemento en el campo hospedado.
  • onMouseOut( ): Se invoca cuando se produce un evento de cursor fuera en el campo hospedado.
 /**
 * Provide an array of field roles for proxy fields as the first parameter
 * Each callback function is invoked with the selector for the field whose proxy triggered the event.
 */
 
PaymentSession.onBlur(['card.number'], function(selector) {
    //handle blur event
});
PaymentSession.onFocus(['card.number', 'card.securityCode'], function(selector) {
    //handle focus event
});
PaymentSession.onChange(['card.securityCode'], function(selector) {
    //handle change event
});
PaymentSession.onMouseOver(['card.number'], function(selector) {
    //handle mouse over event
});
PaymentSession.onMouseOut(['card.number'], function(selector) {
    //handle mouse out event
});
    

Estilo avanzado de campos hospedados

Hosted Session le permite aportar estilo a los campos hospedados para que coincidan con la apariencia de los campos reemplazados en su página de pago.

Puede invocar las siguientes funciones para estilo:
  • setFocus( ): Establece enfoque en el campo hospedado especificado.
  • setFocusStyle( ): Establece los atributos de estilo para los campos hospedados especificados cuando se obtiene enfoque.
  • setHoverStyle( ): Establece los atributos de estilo para los campos hospedados especificados cuando el mouse se posa sobre un elemento.
PaymentSession.setFocus('card.number');
    
PaymentSession.setFocusStyle(["card.number","card.securityCode"], {
  borderColor: 'red',
  borderWidth: '3px'
});

PaymentSession.setHoverStyle(["card.number","card.securityCode"], {
  borderColor: 'red',
  borderWidth: '3px'
});

Configurar la accesibilidad de los campos hospedados

Hosted Session proporciona las funcionalidades que pueden mejorar la accesibilidad de su sitio web.

Detalles
<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->
<div>Please enter your payment details:</div> 

<div>Cardholder Name: <input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="1" readonly></div>

<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="2" readonly></div>

<div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="3" readonly></div>

<div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="4" readonly></div>

<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="card security code" value="" tabindex="5" readonly></div>

<div><button id="payButton" onclick="pay();">Pay Now</button></div> 

Las siguientes opciones permiten controlar mejor la experiencia de usuario para pagadores con necesidades de accesibilidad:

Establecer el título de iFrame

El atributo title de iFrame del campo alojado se puede controlar utilizando un atributo title en el campo.

Establecer atributos de aplicaciones de Internet enriquecidas accesibles

Hosted Session es compatible con los atributos de aria, que se pueden utilizar para mejorar la experiencia para los pagadores que utilizan tecnologías de asistencia.

Establecer parámetro de visualización de caracteres no válido

Considere la posibilidad de aceptar todos los caracteres en los campos alojados para lograr una mejor experiencia para los pagadores que utilizan tecnología de asistencia. Para esto, establezca el parámetro de visualización interaction.displayControl.invalidFieldCharacters=ALLOW en el método PaymentSession.configure().

Establezca el atributo lang

Agregue un atributo lang al elemento html.

<html lang="en">
    <head></head>
    <body></body>
</html>

Etiqueta y mensaje de error ocultos

Todos los campos alojados contienen una etiqueta oculta y los campos alojados obligatorios contienen un mensaje de error oculto. La etiqueta oculta es "Número de tarjeta". El mensaje de error oculto para el número de tarjeta que falta es "Falta el número de la tarjeta, ingrese el valor". El mensaje de error oculto para un número de tarjeta no válido es "El número de la tarjeta no es válido, ingrese el valor correcto". Mientras se va pasando con el tabulador entre los campos alojados, el lector de pantalla solo lee la etiqueta oculta y el mensaje de error oculto, pero no la etiqueta real ni el mensaje de error que se muestra en la interfaz de usuario.

Establezca la propiedad de configuración regional en el objeto de configuración

La propiedad de configuración regional proporciona traducciones para todos los campos alojados, incluidas las etiquetas y los mensajes de error ocultos. Si no está configurado, el valor predeterminado será inglés. Los valores admitidos para esta propiedad son ar_AE, de_DE, el_GR, en_US, es_MX, es_ES, fr_CA, fr_FR, in_ID, it_IT, ja_JA, nl_NL, pl_PL, pt_BR, ro_RO, zh_CN, zh_HK.

Para evitar la confusión del cliente, recomendamos que el atributo lang coincida con la propiedad de configuración regional.

PaymentSession.configure({
    fields: {
        card: {
            nameOnCard: cardHolderNameField ? "#card-holder-name" : null,
            number: "#card-number",
            securityCode: "#security-code",
            expiryMonth: "#expiry-month",
            expiryYear: "#expiry-year"
        }
    },
    frameEmbeddingMitigation: ["javascript"],
    locale:"fr",
        callbacks: {
    }
});

Enfoque automático

Una de las funciones HTML5 predeterminadas no funciona con los campos alojados, es decir, cuando el usuario hace clic en la etiqueta, no enfoca automáticamente el elemento de entrada/selección correspondiente. Utilice setFocus para lograrlo.

Nota: No es posible acceder a los campos alojados desde la web cuando se utiliza IE 11 en combinación con el lector de pantalla SuperNova.

Aceptación de múltiples tarjetas mediante Hosted Session

Hosted Session permite aceptar múltiples tarjetas del pagador en la misma página. En este caso, cada tarjeta se convierte en una sesión de pago distinta y un pedido distinto (cuando se utiliza la sesión de pago en una transacción de pago). Esto puede resultar útil, por ejemplo, cuando un cliente desee poder pagar utilizando más de una tarjeta para la misma reserva. Entonces, su sitio web debe poder agrupar estos pedidos generados de sesiones de pago distintas en una sola reserva para el cliente.

El uso de múltiples tarjetas por medio de Hosted Session solo es compatible a partir de la versión 51 de API.
Detalles

Solicitar una interacción de Hosted Session múltiple

Para aceptar múltiples tarjetas, debe invocar la función PaymentSession.configure() utilizando el parámetro scope. Este parámetro puede ser cualquier cadena única utilizada para identificar un bloque de datos de pago mediante tarjeta y no es necesario que haga referencia a ningún html específico en la página. Los datos que almacene en el servidor de su negocio para cada tarjeta se deben retener en un ámbito distinto.

  • PaymentSession.configure('configuration', scope)

El parámetro scope de las siguientes llamadas de Hosted Session resulta obligatorio cuando se invoca la llamada inicial de PaymentSession.configure() con scope.

  • PaymentSession.updateSessionFromForm('card', 'card-type', scope)
  • PaymentSession.setFocus('cardNumber', scope)

El parámetro scope es opcional en las siguientes llamadas si una interacción se configura con un ámbito. So no se especifica un ámbito en las llamadas, la función/devolución de llamada se aplicará a todos los conjuntos de datos de llamada en el iFrame alojado.

  • PaymentSession.setFocusStyle([<HostedFieldsRole>], styles, scope)
  • PaymentSession.setHoverStyle([<HostedFieldsRole>], styles, scope)
  • PaymentSession.onFocus([<HostedFieldsRole>],function(selector), scope)
  • PaymentSession.onBlur([<HostedFieldsRole>], function(selector), scope)
  • PaymentSession.onChange([<HostedFieldsRole>], function(selector), scope)
  • PaymentSession.onMouseOver([<HostedFieldsRole>], function(selector), scope)
  • PaymentSession.onMouseOut([<HostedFieldsRole>], function(selector), scope)

Ejemplo

<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://evopaymentsmexico.gateway.mastercard.com/form/version/57/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>

<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->

<div>Please enter your payment details:</div>
<div>Cardholder Name: <input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="1" readonly></div>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="2" readonly></div>
<div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="3" readonly></div>
<div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="4" readonly></div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="5" readonly></div>
<div><button id="payButton" onclick="pay();">Pay Now</button></div>

<!-- JAVASCRIPT FRAME-BREAKER CODE TO PROVIDE PROTECTION AGAINST IFRAME CLICK-JACKING -->
<script type="text/javascript">
if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
} else {
    top.location = self.location;
}

var sessions = [];
PaymentSession.configure({
    fields: {
        // ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
        card: {
        	number: "#card-number",
        	securityCode: "#security-code",
        	expiryMonth: "#expiry-month",
        	expiryYear: "#expiry-year",
        	nameOnCard: "#cardholder-name"
        }
    },
    //SPECIFY YOUR MITIGATION OPTION HERE
    frameEmbeddingMitigation: ["javascript"],
    callbacks: {
        initialized: function(response) {
            // HANDLE INITIALIZATION RESPONSE
        },
        formSessionUpdate: function(response) {
            // HANDLE RESPONSE FOR UPDATE SESSION AS PER USUAL MANNER.
            if (response.status) {
                if ("ok" == response.status) {
                    // RECORD THE SESSIONID RETURNED AND ASSOCIATE IT WITH THE SCOPE CONFIGURED.
                    sessions.push(JSON.parse('{ "scopeId": "' + response.scopeId + '", "sessionId": "' + response.session.id + '"}'));
                }
            } else {
                console.log("Session update failed: " + response);
            }
        }
    },
    interaction: {
        displayControl: {
            formatCard: "EMBOSSED",
            invalidFieldCharacters: "REJECT"
        }
    }
  }, 'card-payment-details-#1'); // ADD ANY UNIQUE STRING IDENTIFIER VALUE TO THE CONFIGURE CALL

function pay() {
    sessions.forEach(function (e) {
        // UPDATE THE SESSION WITH THE FIELD VALUES. THE SCOPE MUST BE THE THIRD PARAMETER.
        PaymentSession.updateSessionFromForm('card', undefined, e.scopeId);
     });
}
</script>
</body>
</html>

Campos desplegables para mes y año de vencimiento

Hosted Session le permite utilizar valores desplegables para el mes y el año de vencimiento. Vea el código de muestra a continuación para obtener más detalles.

Detalles
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://evopaymentsmexico.gateway.mastercard.com/form/version/57/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>

<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->

<div>Please enter your payment details:</div>

<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>

<div>Expiry Month: 
<select id="expiry-month" class="form-control input-md" required="" readonly>
	<option value="">Select Month</option>
	<option value="01">January</option>
	<option value="02">February</option>
	<option value="03">March</option>
	<option value="04">April</option>
	<option value="05">May</option>
	<option value="06">June</option>
	<option value="07">July</option>
	<option value="08">August</option>
	<option value="09">September</option>
	<option value="10">October</option>
	<option value="11">November</option>
	<option value="12">December</option>
</select>
</div>
<div>Expiry Year: 
<select id="expiry-year" class="form-control input-md" required="" readonly>
	<option value="">Select Year</option>
	<option>21</option>
	<option>22</option>
	<option>23</option>
	<option>24</option>
	<option>25</option>
	<option>26</option>
	<option>27</option>
	<option>28</option>
	<option>29</option>
	<option>30</option>
</select>
</div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="4" readonly></div>

<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="3" readonly></div>

<div><button id="payButton" onclick="pay();">Pay Now</button></div>

<!-- JAVASCRIPT FRAME-BREAKER CODE TO PROVIDE PROTECTION AGAINST IFRAME CLICK-JACKING -->
<script type="text/javascript">
if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
} else {
    top.location = self.location;
}
var sessions = [];
PaymentSession.configure({
    fields: {
        // ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
        card: {
        	number: "#card-number",
        	securityCode: "#security-code",
        	expiryMonth: "#expiry-month",
        	expiryYear: "#expiry-year",
            nameOnCard: "#cardholder-name"
        }
    },   
//SPECIFY YOUR MITIGATION OPTION HERE
frameEmbeddingMitigation: ["javascript"],
  	callbacks: {
 		initialized: function(response) {
 		// HANDLE INITIALIZATION RESPONSE
 },
 	formSessionUpdate: function(response) {
	// HANDLE RESPONSE FOR UPDATE SESSION
 	if (response.status) {
   	if ("ok" == response.status) {
		console.log("Session updated with data: " + response.session.id);
		//check if the security code was provided by the user
 		if (response.sourceOfFunds.provided.card.securityCode) {
 		console.log("Security code was provided.");
 		}
		//check if the user entered a Mastercard credit card
		if (response.sourceOfFunds.provided.card.scheme == 'MASTERCARD') {
		console.log("The user entered a Mastercard credit card.")
       }
         } else if ("fields_in_error" == response.status)  {
                 console.log("Session update failed with field errors.");
                 if (response.errors.cardNumber) {
                 console.log("Card number invalid or missing.");
                  }
                 if (response.errors.expiryYear) {
                 console.log("Expiry year invalid or missing.");
                  }
                 if (response.errors.expiryMonth) {
                 console.log("Expiry month invalid or missing.");
                  }
              	 if (response.errors.securityCode) {
                 console.log("Security code invalid.");   
                 }
                } else if ("request_timeout" == response.status)  {
                  console.log("Session update failed with request timeout: " + response.errors.message);
                } else if ("system_error" == response.status)  { 
                  console.log("Session update failed with system error: " + response.errors.message); 
               }
            } else {
              console.log("Session update failed: " + response);
           }
        }
    },
    interaction: {
        displayControl: {
            formatCard: "EMBOSSED",
            invalidFieldCharacters: "REJECT"
			 }
 		}
 });
function pay() {
// UPDATE THE SESSION WITH THE INPUT FROM HOSTED FIELDS
PaymentSession.updateSessionFromForm('card');
}
</script>
</body>
</html>
	

Pruebe su integración

Antes de comenzar con transacciones en directo, debe probar su integración para garantizar una funcionalidad correcta.

Para admitir registro adicional mientras prueba su integración de Hosted Session (mediante un ID de negocio TEST), adjunte ?debug=true a la URL.

https://evopaymentsmexico.gateway.mastercard.com/form/version/57/merchant/<TESTMERCHANTID>/session.js?debug=true
Hosted Session requiere que JavaScript se habilite en el explorador del pagador. Entre los explorados compatibles, se encuentran: IE 11, Safari iOS13/12, Safari OSX13, Microsoft Edge 18, Firefox, Android 4.4, Android 5 y Chrome.

Solución de problemas y preguntas frecuentes

¿Cómo manejo el evento donde el tipo de tarjeta que ingresa el pagador no se admite en el perfil de negocio?

Para manejar este evento, inspeccione la información del tipo de tarjeta (sourceOfFunds.provided.card.brand y sourceOfFunds.provided.card.scheme) en la respuesta PaymentSession.updateSessionFromForm('card'), valídela contra su lista de tipos de tarjeta admitidos y muestra un mensaje de error si el tipo de tarjeta no se acepta.

¿Cómo detecto si el pagador proporcionó un CSC/CVV en una interacción de Hosted Session?

Si el pagador no proporciona un CSC/CVV, el campo securityCode NO se devuelve en la respuesta PaymentSession.updateSessionFromForm('card'). Si requiere un CSC/CVV y no hay ningún valor presente, entonces debe mostrar un error al pagador.

¿Las devoluciones de llamada de eventos para campos hospedados funcionan en todos los exploradores?

Existen problemas conocidos con devoluciones de llamada de eventos en los siguientes sistemas operativos y exploradores:

  • Internet Explorer 11 en Windows 10: Si interaction.displayControl.formatCard=EMBOSSED, el evento onChange no se activa cuando cambiar el valor de un campo hospedado.
  • iOS9 en iPhone 6+: Los eventos onChange( ) y onBlur( ) no se activan cuando el pagado ingresa datos en un campo hospedado y toca otro campo en la página de pago. Además, el pagador no puede navegar desde campos hospedados a otros campos en la página de pago y viceversa.
  • Los eventos de desplazamiento del puntero no se admiten en dispositivos táctiles.
¿Puedo recopilar detalles de pago para múltiples tarjetas en una interacción de Hosted Session?

A partir de la versión 51 de la API, puede recopilar detalles de pago de una o varias tarjetas de crédito en una interacción de Hosted Session. Esto permite al pagador utilizar diversas tarjetas de crédito para pagar una sola reserva; no obstante, como los detalles de pago de cada tarjeta generan un pedido distinto, usted debe encargarse de agrupar estos pedidos diferentes en una sola reserva para el pagador.

Se crea un identificador de sesión exclusivo para cada tarjeta, que se debe almacenar en el servidor web. El pagador puede optar por eliminar una tarjeta durante la interacción y esta acción elimina los datos de la sesión asociados con la tarjeta de su servidor web.

¿Dónde puedo encontrar las pautas de integración y la referencia de API para el Hosted Payment Session modelo POST?

El Hosted Payment Session modelo POST está dejando de usarse por parte de la integración Hosted Session JavaScript (session.js).

En el caso de Hosted Payment Session integraciones POST existentes, consulte pautas de integración y Referencia de API.

¿Dónde puedo encontrar las pautas de integración y la referencia de API para el Hosted Payment Session modelo HPF.js JavaScript?

El Hosted Payment Session modelo HPF.js JavaScript está dejando de usarse por parte de la integración Hosted Session JavaScript (session.js).

En el caso de Hosted Payment Session integraciones HPF.js existentes, consulte pautas de integración y Referencia de API.

Derechos de autor © 2020 Mastercard