Librería Javascript (Cliente)

La biblioteca de cliente javascript le permite recoger la tarjeta pan utilizando un iframe seguro alojado en nuestro entorno PCI. Utilizando este enfoque, puede incrustar una entrada segura para la tarjeta pan en su formulario de captura de tarjetas existente y almacenar los datos no sensibles (por ejemplo: titular de la tarjeta y fecha de caducidad) directamente por usted mismo.

info

Reemplazaremos la bandeja de la tarjeta por una versión tokenizada de la misma que podrá ser almacenada junto con los demás datos de la tarjeta.

¿Cómo funciona?

Para trabajar con el enfoque de tokenización del cliente debe seguir los siguientes pasos:

1. Lo primero que tienes que hacer es generar un token de captura utilizando el POST /tokenize/{reference} en la API REST. Durante la generación de este token tienes que proporcionar una referencia. Esta referencia debe ser única y puede ser el id de tu reserva, reservación, etc.
2. Una vez que tengas el token tienes que inicializar la biblioteca javascript con este token. Más detalles sobre esto a continuación.
3. La biblioteca javascript se inicializa y muestra un campo de entrada iframe seguro en su sitio web.
4. El usuario introduce sus datos en su formulario web y el número de pan se introduce en el campo iframe seguro.
5. El usuario pulsa enviar, y usted le dice a la biblioteca que envíe los datos a nuestro motor de bóveda.
6. A continuación, puede obtener el resultado en su servidor iniciando una llamada al método GET /card/reference/{reference}. El resultado incluirá el pan tokenizado de la tarjeta entre otros detalles.
7. Este token puede utilizarse para enviar los datos de la tarjeta a un tercero o para emitir un token de visualización.

danger

La API REST debe llamarse siempre directamente desde su servidor, nunca desde el lado del cliente.

Inclusión de la librería javascript

Por favor, cargue la versión correcta de la librería javascript directamente desde nuestros servidores compatibles con PCI dependiendo del entorno.

SANDBOX

<script src="https://pci-proxy-api.paynopain.com/sandbox/client.js"></script>

PRODUCTION

<script src="https://pci-proxy-api.paynopain.com/prod/client.js"></script>

info

Puedes consultar el ejemplo de codepen en funcionamiento para verlo en acción.

Inicialización de la librería

Para inicializar la librería necesitas proporcionar el id del elemento DOM donde la librería debe inyectar el iframe con el campo de entrada pan junto con el token emitido con la API REST. Una vez que el iframe haya terminado de cargarse, se disparará un evento ready.

``html

```

var proxyFields = new ProxyFields();
proxyFields.init('::token::', { cardNumber: "pan" });
proxyFields.on('ready', () => {
    console.log('iframe ha terminado de cargarse');
});

Estilizar el campo de entrada

El método recomendado para dar estilo al campo de entrada es utilizar el método setStyle. Esto debe hacerse en el callback ready.

``js proxyFields.on("ready", function() { proxyFields.setStyle( "cardNumber", "width: 300px; border-radius: 4px; border: 1px solid black; padding:5px 10px;font-size:100%;" ); proxyFields.setStyle("cardNumber::placeholder", "color: grey"); proxyFields.setPlaceholder("cardNumber", "4987806170805591"); });

### Validación y envío de los datos
Una vez que el usuario ha completado el formulario de envío puedes llamar al método `submit`. El método `submit` recibe como único parámetro un objeto en el que tienes que proporcionar información adicional de la tarjeta. Estos datos pueden ser recogidos directamente por usted ya que no están sujetos a la normativa PCI.

Una vez que hayas llamado al método `submit` se disparará un callback `validate` con un objeto de entrada que contiene información relacionada con el error si lo hubiera. Si la bandeja es válida, el envío se llevará a cabo y se disparará una llamada de retorno de éxito o de error. Después de que se dispare la llamada de retorno `success`, puedes llamar con seguridad al [método de la API REST](https://pci-proxy-api.paynopain.com/docs#/Client%20tokenization/GetTokenizationResults) en tu servidor para obtener el token del pan.

``js
proxyFields.submit({
  expiryMonth: "01",
  expiryYear: "21",
  cardHolder: "Name Displayed On Card"
});

proxyFields.on("validate", function(data) {
  if(validate.hasErrors){
    console.log("Card pan is not valid");
    proxyFields.setStyle("cardNumber","border: 1px solid red");
  }
});

proxyFields.on("success", function(data) {
  console.log('Submission succeded');
});

proxyFields.on("error", function(error) {
  console.log('Ha ocurrido algo malo');
});