Checkout

Importación de la Librería JavaScript

Las funcionalidades del formulario Checkout se encuentran en una librería JavaScript, que debe ser importada a la web del cliente directamente desde una URL pública de nuestra plataforma.

La llamada a esta librería debe incluir (como parámetro) la llave pública de la cuenta de comercio (PublicAccountKey) que utilizará para las llamadas a la API REST desde esta biblioteca.

<script src="{api_environment}/v1/Scripts/PWCheckout.js?key={PublicAccountKey}" type="text/javascript"></script>

Métodos

SetProperties

Este método establece las propiedades visuales (textos e imágenes) utilizadas en la ventana de Checkout.

Todas las propiedades son opcionales, excepto la propiedad form_id. Por lo tanto, la llamada al método SetProperties es obligatoria al menos para establecer esta propiedad, y debe ser invocada antes de la apertura del formulario del Checkout.

Ejemplo:

<script type="text/javascript">
PWCheckout.SetProperties(
{
  "name": "Mi tienda",
  "email": "cliente@gmail.com",
  "image": "http://mitienda.com/images/logocheckout.png",
  "button_label": "Pagar #monto#",
  "description": "Checkout de Mi tienda",
  "currency": "USD",
  "amount": "1843.21",
  "lang": "ES",
  "form_id": "commerce_form",
  "checkout_card": "1",
  "autoSubmit": `true`,
  "email_edit": `false`,
  "country_code" : "UY"
});
</script>

SetStyle

Este método establece los colores de la ventana del Checkout. Todas las propiedades son opcionales, por lo que la llamada al método SetStyle es opcional. El formulario del Checkout utilizará los colores por defecto si no se llama a este método.

Invoca el método antes de abrir el formulario del Checkout para establecer esas propiedades.

Ejemplo:

<script type="text/javascript">
PWCheckout.SetStyle(
{
  "backgroundColor": "f2f2f2",
  "buttonColor": "555555",
  "buttonHoverColor": "777777",
  "buttonTextColor": "ffffff",
  "buttonTextHoverColor": "ffffff",
  "inputBackgroundColor": "ffffff",
  "inputTextColor": "767676",
  "inputErrorColor": "ff0000",
  "inputAddonBackgroundColor": "ffffff",
  "labelColor": "494949"
}
);
</script>

SetStyleForVbV

Este método describe parámetros configurables cuando se despliega la página Verified By Visa.

Todas las propiedades son opcionales, por lo que la llamada al método SetStyleForVbV es opcional. Si no invoca este método, la página se mostrará en todo lo ancho de la pantalla.

Para establecer estas propiedades, invoque el método antes de abrir el formulario del Checkout.

Ejemplo:

<script type="text/javascript">
PWCheckout.SetStyle(
  {
    "width": "1600px",
    "height": "800px",
    "margin": "auto"
  }
);
</script>

Bind

Utilice este método para suscribirse a los eventos que lanza la librería PWCheckout.

Para recibir los eventos generados por este formulario, invoque el método antes de abrir la ventana del formulario Checkout.

Ejemplo:

<script type="text/javascript">
function WindowIsOpen(){
  console.log("Checkout Window is Open");
}
PWCheckout.Bind("opened", WindowIsOpen);
</script>

Eventos

La librería PWCheckout expone los siguientes eventos javascript a los que se puede suscribir usando el método Bind.

Unbind

Este método elimina la suscripción a un evento realizada previamente por el método Bind.

Ejemplo:

<script type="text/javascript">
PWCheckout.Unbind("opened", WindowIsOpen);
</script>

Invocación del formulario

La página web de invocación del formulario del checkout debe incluir un campo de entrada oculto llamado PWToken. La librería JavaScript establecerá el valor del campo después de obtener el Token.

Cree el campo de la siguiente manera:

    <input type="hidden" name="PWToken" id="PWToken" />

Para iniciar el proceso de pago, debe enlazar el elemento de la página que realiza la llamada al Formulario de Captura de Tarjetas. Este elemento puede ser un botón, una imagen o cualquier elemento activo que desee vincular.

Debe llamar al método AddActionButton de la librería PWCheckout de la siguiente manera:

<script type="text/javascript">
  PWCheckout.AddActionButton("buttonId");
</script>

El parámetro buttonId hace referencia al identificador del elemento que lanza el proceso de pago.

Se pueden asociar múltiples elementos en la misma llamada, identificando cada uno por su ID y separando cada identificador con una coma.

<script type="text/javascript">
  PWCheckout.AddActionButton("buttonId1", "buttonId2", "buttonId3");
</script>

Tras realizar este paso, el proceso de pago se invoca cuando el cliente hace clic en el elemento vinculado.

La librería JavaScript gestiona el proceso, tan pronto finaliza esta invocación, mostrando al usuario el formulario donde se solicitan los datos de la tarjeta.

Cuando el cliente ingresa los datos de su tarjeta, nuestros servidores tokenizan la información y envían el Token a la librería PWCheckout.

El valor del Token generado se inserta automáticamente en el campo oculto PWToken, y finalmente, la librería JavaScript PWCheckout realiza las siguientes acciones:

1. Activa el evento tokenCreated.
2. Enviar el formulario si la propiedad autoSubmit es true.

Debe procesar los datos del formulario del checkout, incluido el valor del campo PWToken, y enviar la información relevante descrita en la sección API de compras.

Invocación del formulario con filtros de validación

Si necesita validar el ingreso de una determinada tarjeta, ya sea por la marca o por el banco emisor, debe proceder a la apertura personalizada del Formulario de Captura de Tarjetas. Utilice un método explícito para validar los datos.

El método a utilizar es el OpenIframeWithPaymentMediaOptions, que recibe los siguientes parámetros:

• PaymentMediaId: Identificador del medio de pago en el gateway (consulte la tabla tipos de medios de pago).
• BankId: Identificador del banco en el gateway (consulte la tabla Banco Emisor).
• PaymentMediaType: Identificador del tipo de medio de pago (consulte la tabla medios de pago).

Ejemplo de la invocación de OpenIframeWithPaymentMediaOptions:

<script type="text/javascript">
  PWCheckout.Iframe.OpenIframeWithPaymentMediaOptions(paymentMediaId, bankId, paymentMediaType);
</script>

Última modificación 19 de septiembre de 2024

© Bamboo | All rights reserved 2024