Insertar carta de pago

El siguiente script se encarga de incorporar el iframe directamente en la estructura de la página web del comercio, lo que permite la visualización y la interacción del usuario con la pasarela de pago de forma integrada. Este enfoque ayuda a mantener la coherencia visual y funcional del sitio, proporcionando una transición sin inconvenientes entre la navegación habitual del usuario y el proceso de pago.

Este script no solo facilita la inserción del Iframe de la pasarela de pagos, sino que va más allá al priorizar la seguridad en todos los aspectos del proceso. Desde el cifrado de datos hasta el cumplimiento de estándares como PCI-DSS, se garantiza una integración segura y confiable que cumple con las más estrictas normas de seguridad de la industria, proporcionando tranquilidad tanto a su comercio como a los usuarios finales.

Además de su enfoque en la seguridad, el script incorpora hooks (ganchos). Estos hooks proporcionan una interfaz para que su comercio personalice y responda a eventos clave, como la confirmación del pago o el cambio de estado de la transacción. Esta flexibilidad permite una mayor personalización y adaptación del flujo de trabajo de pago de acuerdo con las necesidades específicas de su comercio, mejorando así la versatilidad y la experiencia del usuario.

Ejemplo de implementación:

<!DOCTYPE html>
<html lang="en-US">
<head>
<script>
  (function(w, d, s, p, c) {
  w.ppc = c || {};w.pk = p;w[p] = w[p] || {};
  w.ppHock = function(name, func) {w.ppc[name] = func};
  var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
  j.async = true;j.src = 'https://{TODOdominio}/{proxy+}'; //url
  j.integrity = 'sha256-wiOdhYVfjuy3F0XwBIOtPqWfhN65naUwczrtjnkABys=';//integrity
  f.parentNode.appendChild(j);
  })(window, document, 'script', 'processorpay', {
  elementId: 'paymentForm', //elementId
  orderId: '5c51bebd-5b21-4ef3-b980-d41eb0b83568' //orderId
  });
</script>
</head>
<body>
.
.
  <div id='paymentForm'></div>
.

Este script debe ser insertado en la ubicación del sitio donde se mostrará la carta de pago.
A continuación, enumeramos los campos que son dinámicos, podrían cambiar en cada transacción y se extraen de la respuesta del endpoint de inicio de transacción.

Campo	Descripción
`elementId`	Del elemento de html en donde se va a renderizar el iframe.
`orderId`	Id de la orden devuelto en el inicio de la transacción.
`url`	URL devuelta en el inicio de la transacción.
`integrity`	Firma devuelta en el inicio de la transacción, que garantiza la integridad del script.

Hooks

Se pueden incluir acciones en el iframe para que se ejecuten acciones en el cliente, con respecto a
cualquier respuesta del sistema, razón por lo cual se integran los hooks siguientes:


ppHock('onSend3ds', function() {
//Cuando inicia una transaccion de 3ds que require paso adicional.
});
ppHock('onSuccess', function() {
// En un pago exitoso.
});
ppHock('onError', function(response) {
// En el caso de que suceda algún error.
});
ppHock('onBack', function() {
// En click del boton de regreso.
});
ppHock('onRejected', function() {
// En la transacción rechazada.
});