Visa Checkout

Visa Checkout es un servicio de pago digital seguro y fácil que permite a los consumidores pagar mercancías en línea, en cualquier dispositivo, con apenas un par de clics. Los compradores pueden inscribir a sus tarjetas Visa de crédito y débito, así como tarjetas de otros sistemas. Cuando quieran realizar una compra, simplemente deben ingresar su nombre de usuario y contraseña para completar el proceso de pago.

El botón Visa Checkout aparece en su página de compra y, cuando hace clic en él, se abre el lightbox de Visa Checkout en esta página. Esto permite que sus clientes finalicen su pago sin tener que dejar el sitio.

Prerrequisitos

  • Su proveedor de servicios de pago debe permitir el servicio de Visa Checkout en su perfil de negocio.
  • Debe crear y activar su cuenta de Visa Checkout para usarla con el Mastercard Payment Gateway, utilizando Administración de negocios. El operador del negocio debe tener el privilegio "Puede configurar ajustes de integración".
Flujo de Visa Checkout

En el siguiente diagrama aparece una muestra del flujo de pago para el sitio de su tienda y Visa Checkout.

  1. Un pagador explora el sitio de la tienda, selecciona uno o más productos y hace clic en Visa Checkout en la página de pagos.
  2. En el Visa Checkout Lightbox, que aparece en la parte superior del sitio de la tienda, el pagador:
    • Inicia sesión en su billetera de Visa Checkout y realiza las etapas de validación secundaria obligatorias.
    • Selecciona una tarjeta de pago.
    • Selecciona una dirección de envío o agrega una nueva.
    • Hace clic en un botón para confirmar su elección y cerrar la ventana emergente.
  3. En el sitio de su tienda, el pagador finaliza la compra y usted muestra el resumen/recibo del pedido.

Integración con Visa Checkout

Hay tres opciones para integrar Visa Checkout en su flujo de pago:

Visa Checkout mediante Hosted Checkout

Si tiene una integración de Hosted Checkout existente, Visa Checkout estará disponible automáticamente una vez que active el servicio correctamente.

Visa Checkout mediante Hosted Session

Si usted tiene su propia página de pago, entonces puede seleccionar la opción de integración Hosted Session para que el Mastercard Payment Gateway maneje los detalles de la carga 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.

Código de muestra para invocar Visa Checkout Lightbox
<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>

<!-- DISPLAY VISA CHECKOUT AS A PAYMENT OPTION ON YOUR PAYMENT PAGE -->

<!-- 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 id="visaCheckoutButton" alt="Visa Checkout" role="button" class="v-button" style="display: none;" src="https://sandbox.www.v.me/wallet-services-web/xo/button.png"/>
</form>

<!-- 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({
    frameEmbeddingMitigation: ["javascript", "x-frame-options", "csp"],
    callbacks: {
        initialized: function(response) {
            // HANDLE INITIALIZATION RESPONSE
            if (response.status === "ok") {
                document.getElementById("visaCheckoutButton").style.display = 'block';
            }
        },
        visaCheckout: function(response) {
            // HANDLE VISA CHECKOUT RESPONSE
        }
    },
    order: {
        amount: 10.00,
        currency: "AUD"
    },
    wallets: {
        visaCheckout: {
            enabled: true,
            // Add Visa Checkout API specific attributes here
            countryCode: "AU",
            displayName: "Display name",
            locale: "en_au",
            logoUrl: "http://logo.logo",
            payment: {
                cardBrands: [
                    "VISA"
                ]
            },
            review: {
                buttonAction: "Pay",
                message: "Message"
            },
            shipping: {
                acceptedRegions: [
                    "AU"
                ],
                collectShipping: true
            }
        }
    }
})
</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. Muestre la página de pago al pagador con Visa Checkout como una opción de pago. Especifique el atributo de botón class="v-button" según lo requiere la integración de Visa Checkout. Esto es para facilitar el inicio del lightbox cuando el pagador haga clic en el botón Visa Checkout.
  3. Invoque la función PaymentSession.configure(configuration). Deberá proporcionar el siguiente objeto configuration para iniciar una interacción de Visa Checkout:

    • wallets.visaCheckout.enabled: configure esto en true.
    • wallets.visaCheckout.<attributes>: (opcional) parámetros de configuración adicionales para Visa Checkout tales como countryCode, locale, etc.
    • order.currency: la moneda en la que se está pagando el pedido.
    • order.amount: el monto del pedido.

    Referencia de API de session.js[JavaScript]

  4. Una vez que el lightbox de Visa Checkout se inicializa con los datos requeridos, la respuesta se devuelve en la devolución de llamada initialized( ) definida en la PaymentSession.configure(configuration) función. Una inicialización correcta devuelve response.status="ok".
  5. Cuando finaliza la interacción del pagador con el lightbox, session.js utiliza automáticamente el callId que el lightbox devuelve para recuperar los detalles de pago desde Visa Checkout. El resultado de la interacción se devuelve en la devolución de llamada visaCheckout( ) definida en la función PaymentSession.configure(configuration). Si response.status="ok", entonces la sesión de pago devuelta contendrá los detalles de interacción de Visa Checkout.
  6. Su página de pago debe transmitir la sesión de pago devuelta a su servidor web para que se pueda usar para invocar una operación que haga referencia a la sesión. Para obtener más información, consulte Realizar una operación con la sesión.
Visa Checkout a través de Direct Payment para la versión 31 y posteriores de API.

Si desea tener un control total sobre la interacción del lightbox de Visa Checkout en su página de pago, puede seleccionar esta opción para invocar el lightbox usted mismo. Para iniciar el lightbox, incluya el SDK de Visa Checkout directamente y escuche los eventos. A continuación, debe transmitir el callId devuelto por el lightbox de Visa Checkout al Mastercard Payment Gateway, mediante la operación de Update Session From Wallet. Este identificador permite que el Mastercard Payment Gatewayrecupere los detalles de Visa Checkout y almacenarlos en una sesión de pago. Puede elegir ver el contenido de la sesión de pago o realizar una operación de pago o almacenamiento mediante las operaciones estándar que hacen referencia a las sesiones de pago.

No invoque ninguna operación de API directamente desde el explorador.

Los pasos de integración son los siguientes:

En su servidor web: cree una sesión
  1. Realice una operación de Create Session para obtener un ID de sesión.

    Referencia de API de Create Session[REST][NVP]

En su página de pago: inicialice e invoque el lightbox de Visa Checkout
Use los siguientes pasos como pauta; para obtener más detalles, lea la guía Integración web de Visa Checkout/Integración de SDK de JavaScript.
  1. Consulte la biblioteca de cliente de Visa Checkout JavaScript en su página de pago.
  2. Cuando el pagador haga clic en Visa Checkout, inicie el lightbox de Visa Checkout. Debe incluir una manera de identificar Visa Checkout como la opción de pago seleccionada por el pagador.
  3. Agregue un administrador de devolución de llamada para el evento payment.success generado por el lightbox. Recupere el callId(devuelto únicamente si la interacción de Visa Checkout fue correcta) y páselo a su servidor web.
En su servidor web: recopile detalles de pago en una sesión
  1. Realice una operación de Update Session From Wallet para obtener los detalles de pago y envío del pagador desde Visa Checkout. Deberá proporcionar los siguientes parámetros en esta operación.

    • ID de sesión: el identificador para la sesión de pago según lo ha devuelto la operación Create Session.
    • order.walletProvider: configurado en VISA_CHECKOUT
    • wallet.visaCheckout.callId: el callId, tal como lo devolvió el lightbox de Visa Checkout.
    • order.amount: el monto del pedido.
    • order.currency: la moneda en la que se está pagando el pedido.

    Si la interacción se realiza correctamente, la sesión devuelta contendrá los detalles de pago del pagador desde la interacción de Visa Checkout.

    Referencia de API de Update Session From Wallet [REST][NVP]

  2. Use la sesión devuelta para presentar una página de confirmación de pedido o envíe un pago al Mastercard Payment Gateway. Consulte Realizar una operación con la sesión.
Si está usando la versión 22 a 30 de API, use la operación Open Wallet en lugar de la operación Update Session From Wallet.

Requisito para la prevención del clickjacking

Si su sitio web muestra el botón de Visa Checkout, usted debe proporcionar el código en cada página que aloja el botón, incluyendo encabezados en el servidor para evitar el clickjacking, lo que podría ocurrir si un código malicioso se oculta debajo de botones legítimos u otros contenidos sobre los que se puede hacer clic en su página web. Para obtener más información, consulte Requisitos para la prevención del clickjacking para Visa Checkout.

La integración predeterminada de Hosted Checkout con el requisito de prevención del clickjacking.

Requisitos de la interfaz de usuario

Cuando presente Visa Checkout como opción de pago en su sitio web, debe cumplir con los requisitos de marca de la interfaz de usuario de Visa. Para obtener pautas acerca de cómo presentar los elementos de interfaz de usuario, consulte Requisitos de marca de Visa Checkout.

Probar su integración de Visa Checkout

Tiene dos opciones para probar su integración de Visa Checkout:

  1. Emulador de Visa Checkout proporcionado por el Mastercard Payment Gateway.
  2. Sandbox de Visa Checkout proporcionado por Visa.

Estas opciones permiten iniciar diferentes respuestas para las interacciones de Visa Checkout.

Usar el Emulador de Visa Checkout
El Emulador de Visa Checkout se puede utilizar para probar las integraciones de Visa Checkout a través de Hosted Checkout y Hosted Payment Session solo con JavaScript (HPF.js).

Para configurar su perfil de negocio, para que pueda usar el Emulador de Visa Checkout:

  1. Inicie sesión en Administración de negocios utilizando su perfil de PRUEBAS del negocio (su ID de negocio con el prefijo "TEST").
  2. En Admin > Configuración de Visa Checkout:

    1. Seleccione la opción para direccionar las solicitudes al Emulador de Visa Checkout.
    2. Active Visa Checkout como opción de pago.

Ahora puede empezar a utilizar el Emulador de Visa Checkout.

Usar el Sandbox de Visa Checkout
El Sandbox de Visa Checkout se puede utilizar para probar las integraciones de Visa Checkout a través de Hosted Checkout, Hosted Payment Session con JavaScript (HPF.js) y Direct Payment.

Para configurar su perfil de negocio, para que pueda usar el Sandbox de Visa Checkout:

  1. Inicie sesión en Administración de negocios utilizando su perfil de PRUEBAS del negocio (su ID de negocio con el prefijo "TEST").
  2. En Admin > Configuración de Visa Checkout:

    1. Ingrese su información de negocio y cree la cuenta de Sandbox de Visa Checkout.
    2. Seleccione la opción para direccionar las solicitudes al Sandbox de Visa Checkout.
    3. Active Visa Checkout como opción de pago.

Ahora puede empezar a utilizar su cuenta de Sandbox. Si creó una integración de Visa Checkout de Direct Payment, utilice la Clave API asociada con su cuenta de Sandbox para realizar transacciones de prueba.

Probar una integración de Visa Checkout de Direct Payment

Envíe una solicitud de Open Wallet para una interacción de Visa Checkout con

callId=Success <RandomString>-<CardNumber>-<CardExpiryMonth>-<CardExpiryYear>.

Tarjetas de prueba Número de tarjeta
Visa 4005520201264821
Visa 4242424242424242
Mastercard 5500005555555559
American Express 340353278080900
Discover 6011003179988686

Esto iniciará una respuesta correcta de Open Wallet:

  • sourceOfFunds.provided.card.number=<CardNumber>
  • sourceOfFunds.provided.card.scheme=<CardType> (dependiendo de <CardNumber>)
  • sourceOfFunds.provided.card.brand=<CardBrand> (dependiendo de <CardNumber>)
  • sourceOfFunds.provided.card.expiry.month=<CardExpiryMonth>
  • sourceOfFunds.provided.card.expiry.year=<CardExpiryMonth>
  • sourceOfFunds.provided.nameOnCard=John Smith
  • billingAddress.line1=300 Adelaide Street
  • billingAddress.line2=Floor 21
  • billingAddress.city=Brisbane
  • billingAddress.stateProvinceCode=QLD
  • billingAddress.postalCode=4000
  • billingAddress.countryCode=AU
  • billingAddress.phone=07-0000-0000

Inicio de las transacciones en producción

Para iniciar las transacciones en producción, debe crear una cuenta de producción de Visa Checkout para usarla con el motor de pagos:

  1. Inicie sesión en Administración de negocios utilizando su perfil de negocio de producción (su ID de negocio sin el prefijo "TEST").
  2. En Admin > Configuración de Visa Checkout, ingrese su información de negocio y cree la cuenta de producción de Visa Checkout.
    El estado de la cuenta será PENDING, hasta que Visa Checkout finalice su proceso de registro. Después de eso, el estado de la cuenta se configurará en ACTIVE.
  3. Cuando el estado de la cuenta de producción de Visa Checkout sea ACTIVE, active Visa Checkout como opción de pago.

Ahora puede empezar a utilizar su cuenta de producción.

Si creó una integración de Visa Checkout de Direct Payment, utilice la Clave API asociada con su cuenta de producción para realizar transacciones en producción.

Preguntas frecuentes

¿Cómo identifico una interacción de Visa Checkout?

El callId identifica de forma exclusiva una interacción de Visa Checkout y se almacena en la transacción de Visa Checkout asociada. Una transacción de Visa Checkout es aquella en la que se utilizó Visa Checkout para recopilar los detalles de pago del pagador a través de una interacción de Visa Checkout.

Pude buscar una transacción de Visa Checkout en Administración de negocios utilizando el callId o cualquiera de las siguientes cadenas de búsqueda:

  • "Visa Checkout"
  • "Proveedor de billeteras digitales":"Visa Checkout"
  • VISA_CHECKOUT
  • @walletProvider:VISA_CHECKOUT

Esto puede ayudar a solucionar problemas con la interacción de Visa Checkout.

¿Por qué no puedo ver el correo electrónico del cliente recuperado de Visa Checkout en la transacción?

El Mastercard Payment Gateway almacena el correo electrónico del cliente recuperado de la interacción de Visa Checkout en una sesión de pago y en la transacción en el campo customer.email. Sin embargo, si usted proporciona directamente el detalle de customer.email y también proporciona la sesión de pago (que contiene los detalles de pago recopilados de Visa Checkout) en una transacción Pay o Authorize, entonces el campo customer.email, que se proporcionó directamente, anula el correo electrónico del cliente recuperado de Visa Checkout.

Derechos de autor © 2020 Mastercard