Integration Types
Otras características
Card Payments
Mobile Wallets
Alternative Payment Methods
Resources
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 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 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.
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/72/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({ session: "<your_session_ID>", 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>
Cree una sesión enviando una solicitud Create Session
desde su aplicación del lado del servidor. Especifique un límite de autenticación de sesión de 25. La respuesta devuelve un ID de sesión que debe utilizar en los pasos siguientes para hacer referencia a esta sesión.
URL | https://evopaymentsmexico.gateway.mastercard.com/api/rest/version/72/merchant/<your_gateway_merchant_ID>/session |
Método HTTP | POST |
{ "session":{ "authenticationLimit":25 } }
Actualice la sesión con al menos la moneda y el monto del pedido enviando una solicitud Update Session
desde su aplicación del lado del servidor. Este paso es necesario para consultar posteriormente si la tarjeta es compatible y si se requiere el código de seguridad de tarjeta.
URL | https://evopaymentsmexico.gateway.mastercard.com/api/rest/version/72/merchant/<your_gateway_merchant_ID>/session/<your_session_ID> |
Método HTTP | PUT |
{ "order":{ "amount":100.00, "currency":"USD" } }
Incluya la biblioteca de JavaScript del cliente session.js
hospedada por el motor de pagos en su página de pago agregando un elemento script
dentro del elemento head
. La ruta a este campo incluye tanto la versión de la API como el identificador del negocio para la sesión. Al hacerlo se coloca un objeto PaymentSession
en el espacio de nombres de la ventana.
<script type="text/javascript" src="https://evopaymentsmexico.gateway.mastercard.com/form/version/72/merchant/<your_gateway_merchant_ID>/session.js"></script>
readonly
y NO tengan el atributo name
.PaymentSession.configure(configuration)
El objeto configuration
le permite adjuntar campos hospedados a su página de pago y/o configurar la interacción de pago. Debe proporcionar lo siguiente:
El 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.
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)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
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.
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.
Puede captar los siguientes detalles de tarjeta mediante campos hospedados.
card.number
card.expiryMonth
card.expiryYear
card.securityCode
card.nameOnCard
card.expiryMonth
, entonces el card.expiryYear
es obligatorio y viceversa.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.
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 Automated Clearing House detalles mediante campos hospedados:
ach.routingNumber
ach.bankAccountNumber
ach.bankAccountNumberConfirmation
ach.bankAccountHolder
ach.accountType
Consulte Automated Clearing House Integración mediante Hosted Session.
Hosted Session le permite captar los detalles de pago desde una interacción de billetera. Actualmente, se admiten interacciones de billetera de Secure Remote Commerce. Para iniciar esta interacción, debe estar habilitado para Secure Remote Commerce mediante Mastercard Gateway. Consulte Secure Remote Commerce.
Hosted Session le permite proporcionar comentarios de validación al pagador durante las diversas etapas de interacción de pago en la interfaz de usuario:
onValidityChange
:PaymentSession.onValidityChange(["card.number", "card.nameOnCard"], function (selector, result) { if (result.isValid) { console.log("The field value is valid"); document.querySelector(selector).style.borderColor = "green"; } else if (result.isIncomplete) { console.log("The field value is not yet valid"); document.querySelector(selector).style.borderColor = "grey"; } else { console.log("The field value is invalid"); document.querySelector(selector).style.borderColor = "red"; } });
onBlur()
validate()
validate()
PaymentSession.onBlur( ["card.number", "card.nameOnCard", "card.securityCode", "card.expiryYear", "card.expiryMonth"], function (selector, role) { PaymentSession.validate('card', function (allresult) { if (allresult.card[role].isValid) { console.log("The field is valid"); document.querySelector(selector).style.borderColor = "green"; } else { console.log("The field is invalid"); document.querySelector(selector).style.borderColor = "red"; } }); });
updateSessionFromForm()
formSessionUpdate
Independientemente de su planteamiento, debe esperar errores y gestionarlos desde la devolución de llamada de formSessionUpdate
. Aunque el método validate()
puede indicar validez, la validación de formSessionUpdate
es más completa y puede detectar errores adicionales.
initialized(result)
result.status=="ok"
Los campos hospedados se adjuntan correctamente a su página de pago.
// An ok response { "status":"ok", }
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." }
formSessionUpdate(result)
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": "1", "year": "39" }, "fundingMethod": "DEBIT", "nameOnCard": "John Smith", "number": "512345xxxxxx8769", "scheme": "MASTERCARD" } }, "type": "CARD" }, "version": "43" }
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" }
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" }
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.
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 });
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.
setFocus( )
: establece el 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.setPlaceholderStyle( )
: establece los atributos de estilo para el texto del marcador de posición los campos hospedados especificados.setPlaceholderShownStyle( )
: establece los atributos de estilo para los campos hospedados especificados cuando el texto del marcador de posición es visible.PaymentSession.setFocus('card.number'); PaymentSession.setFocusStyle(["card.number","card.securityCode"], { borderColor: 'red', borderWidth: '3px' }); PaymentSession.setHoverStyle(["card.number","card.securityCode"], { borderColor: 'red', borderWidth: '3px' }); PaymentSession.setPlaceholderStyle(["card.number", "card.nameOnCard"], { color: 'blue', fontWeight: 'bold', textDecoration: 'underline' }); PaymentSession.setPlaceholderShownStyle(["card.number", "card.nameOnCard"], { color: 'green', fontWeight: 'bold', textDecoration: 'underline' });
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.
<html> <head> <!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY --> <script src="https://evopaymentsmexico.gateway.mastercard.com/form/version/72/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> <option>31</option> <option>32</option> <option>33</option> <option>34</option> <option>35</option> <option>36</option> <option>37</option> <option>38</option> <option>39</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>
Hosted Session proporciona las funcionalidades que pueden mejorar la accesibilidad de su sitio web.
<!-- 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:
El atributo title de iframe del campo alojado se puede controlar utilizando un atributo title en el campo.
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.
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()
.
lang
Agregue el atributo lang al elemento html.
<html lang="en"> <head></head> <body></body> </html>
Todos los campos alojados contienen una etiqueta oculta y los campos alojados obligatorios contienen un mensaje de error oculto. Cualquier error derivado de la invocación de PaymentSession.updateSessionFromForm()
generará etiquetas de mensajes de error. Además, puede emitir sus propios errores utilizando el método PaymentSession.setMessage()
.
Por ejemplo, la etiqueta oculta para el campo de número de tarjeta 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.
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 de_DE, el_GR, en_US, es_MX, es_ES, fr_CA, fr_FR, it_IT, ja_JA, pl_PL, pt_BR, ro_RO, zh_CN.
Para evitar confundir a los pagadores, se recomienda que el atributo lang coincida con la propiedad de la 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: { } });
Una de las funciones HTML5 predeterminadas no funciona con los campos alojados, es decir, cuando el pagador hace clic en la etiqueta, no enfoca automáticamente el elemento de entrada/selección correspondiente. Utilice setFocus
para lograrlo.
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.
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. Si 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)
<html> <head> <!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY --> <script src="https://evopaymentsmexico.gateway.mastercard.com/form/version/72/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>
Antes de iniciar transacciones en producción, debe probar su integración para garantizar una funcionalidad correcta.
Para permitir el registro adicional mientras prueba su integración de Hosted Session (mediante un ID de negocio TEST), añada ?debug=true
a la dirección URL.
https://evopaymentsmexico.gateway.mastercard.com/form/version/72/merchant/<TESTMERCHANTID>/session.js?debug=true
Para manejar esta situación, 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 muestre un mensaje de error si el tipo de tarjeta no se acepta.
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.
Existen problemas conocidos con devoluciones de llamada de eventos en los siguientes sistemas operativos y exploradores:
interaction.displayControl.formatCard=EMBOSSED
, el evento onChange
no se activa cuando cambiar el valor de un campo hospedado.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.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.
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.
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.