Insert Payment Form

The following script embeds the iframe directly into the merchant's webpage structure, allowing users to view and interact with the payment gateway in an integrated way. This approach helps maintain the visual and functional consistency of the site, providing a seamless transition between the user’s normal navigation and the payment process.

This script not only facilitates the insertion of the payment gateway iframe but goes further by prioritizing security in all aspects of the process. From data encryption to compliance with standards like PCI-DSS, it ensures a secure and reliable integration that meets the industry's strictest security requirements, offering peace of mind for both the merchant and end-users.

In addition to its focus on security, the script incorporates hooks. These hooks provide an interface for the merchant to customize and respond to key events, such as payment confirmation or transaction status changes. This flexibility allows for greater customization and adaptation of the payment workflow according to the specific needs of the merchant, enhancing both versatility and user experience.

Implementation Example:

<!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>
.

This script must be inserted in the location on the site where the payment form will be displayed.
Below, we list the fields that are dynamic, may change with each transaction, and are extracted from the response of the transaction initiation endpoint.

Field	Description
`elementId`	HTML element where the iframe will be rendered.
`orderId`	Order ID returned at the start of the transaction.
`url`	URL returned at the start of the transaction.
`integrity`	Signature returned at the start of the transaction, which guarantees the integrity of the script.

Hooks

Actions can be included in the iframe so that actions are executed on the client, with respect to
any system response, which is why the following hooks are integrated:


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.
});