Integration Types
Otras características
Card Payments
Mobile Wallets
Alternative Payment Methods
Resources
El modelo de Hosted Payment Session con JavaScript(HPF.js) es una integración simple que reduce al mínimo las interacciones entre su servidor web y Mastercard Gateway mediante una biblioteca JavaScript del lado cliente, que usted debe incluir en la página de pago y acceder a ella mediante el método HostedForm.updateSession( ). Los detalles de tarjeta del pagador se envían al Mastercard Gateway en el método de HostedForm.updateSession( ) al que se llama cuando el pagador hace clic en 'Pagar' para enviar la página de pago.
Es importante asegurarse de que los campos de pago confidenciales no se envíen a su servidor. Por ejemplo, si usa un formulario de pago, puede lograrlo al omitir el atributo “name” de los campos de número de tarjeta, vencimiento de tarjeta y CSC/CVV.
Usted no puede usar el modelo de Hosted Payment Session con JavaScript si el explorador del pagador no es compatible con JavaScript.
A continuación, se ilustra el flujo de pago detallado para el modelo de HPF.js.
Consulte Cree su integración.
Mastercard Gateway recopila, verifica (mediante verificación básica) y sanea los detalles de tarjeta (datos de número y vencimiento de tarjeta, y CSC/CVV) antes de agregar estos detalles a la sesión.
Puede elegir mostrar más páginas al pagador según su flujo de trabajo comercial o realizar una transacción de almacenamiento o pago al tiempo de recopilar los detalles de tarjeta.
Si usted tiene su propia página de pago, entonces puede seleccionar esta opción para que Mastercard Gateway maneje los detalles de la inclusión de SDK de Visa Checkout, el lanzamiento del lightbox de Visa Checkout y la actualización de los resultados en una sesión de pago. Esta es la opción más fácil para las integraciones de Hosted Payment Session existentes (con JavaScript).
El flujo de pago es de la siguiente manera:
El siguiente es un ejemplo de código que le muestra cómo aparece Visa Checkout como opción en la página de pago.
<script id="hpfScript" src="https://evopaymentsmexico.gateway.mastercard.com/form/v3/hpf.js"></script>
<!-- REPLACE THE action URL with the payment URL on your webserver -->
<form name="myform" method="POST" action="https://my.company.com/pay">
<!-- Other fields can be added to enable you to collect additional data on the payment page -->
Email: <input type="text" name="email">
<!-- The hidden values below can be set in the callback function as they are returned when creating the session -->
<input type="hidden" name="sessionId" id="sessionId">
<img alt="Visa Checkout" role="button" src="https://sandbox.www.v.me/wallet-services-web/xo/button.png" onclick="showVisaCheckoutLightbox()"/>
</form>
El siguiente es un ejemplo de código que le muestra cómo invocar el método HostedForm.showVisaCheckout( ) para iniciar el lightbox de Visa Checkout con las opciones necesarias y completar los detalles de interacción de Visa Checkout en una sesión de pago.
<script>
var options = {
acceptedCards: [
"MASTERCARD",
"AMEX",
"DISCOVER",
"VISA"
],
order: {
currency: "AUD",
amount: 10.50
},
merchant: {
logo: "https://test.te",
displayName: "your merchant"
},
country: "AUS",
locale: "en_AU",
paymentConfirmation: "CONFIRM_AT_PROVIDER"
paymentConfirmationMessage: "Continue to the merchant to complete your purchase"
};
function showVisaCheckoutLightbox() {
if (typeof HostedForm === 'undefined') {
throw 'hpf.js is not loaded';
}HostedForm.setMerchant("MERCHANT_ID"); //Replace with your merchant id
HostedForm.showVisaCheckout(options,
callback);
}</script>
HostedForm.showVisaCheckout( )
. Debe definir esta función de devolución de llamada en su página de pago.
Si response.status="ok"
, su página web debe transmitir el identificador de sesión devuelto a su servidor web para que se pueda usar para invocar una operación que haga referencia a la sesión.
El siguiente es un ejemplo de código que muestra cómo definir la función de devolución de llamada en la página de pago, que se envía a su servidor web.
var callback = function(response) {
if (response.status === "ok") {
// call your server to do the payment with the response.session value
// this is where we populate the hidden values in the form
var sessionIdElement = document.getElementById("sessionId");
sessionIdElement.value = response.session;
document.myform.submit();
}else if (response.status === "request_timeout") {
// handle the timeout for example by giving the payer the possibility to retry
}else if (response.status === "invalid_session") {
// handle invalid session details for example by giving the payer the possibility to retry with different card details. If the new details are correct,
you can call the updateSession( ) method
}else if (response.status === "cancelled") {
// handler code for the case when the user closes the Visa Checkout lightbox without selecting a credit card
}else {
// add system error handling here. Typically this would mean the integration is not working properly because there is no response from the client library.
// this could result in displaying a page to the payer to try again later and call support
}
};
Si actualiza la sesión mediante el método HostedForm.updateSession( ), puede realizar una transacción de pago con la sesión mediante ÚNICAMENTE API v30. Si está integrado con API v29 o menos, entonces debe actualizar su integración con v30.
El formulario de pago puede devolver diversos tipos de errores. Consulte Administración de errores.
Su página de pago puede contener campos definidos por el negocio para recopilar información adicional, por ejemplo, un código de cupón de descuento, identificador de programa de lealtad, dirección de envío, método de envío, etc. Sin embargo, si traspasa esta información en el método de HostedForm.updateSession( ), se ignorará.
Sí, puede llamar al método de HostedForm.createSession( ) varias veces —; cada vez que llama al método HostedForm.createSession( ) se crea una nueva sesión.