Saltar al contenido principal

Embebido

Con esta opción, puedes integrar el formulario de pago directamente en una sección de tu página web. El SDK proporciona métodos para renderizar el formulario y manipularlo según tus necesidades.

Objetivo​

Aprenderás a:

  • Crear el objeto de configuración
  • Inicializar el formulario de pago.
  • Mostrar el Checkout.

1. Creando el objeto configuración​

  • Incluyendo la opción render con sus respectivos parámetros dentro de las opciones de inicialización de formulario de pagos.
const iziConfig = {
 config: {
   ...,
   render: {
      typeForm: 'embedded',
      container:'my-form-payment',
      showButtonProcessForm: true
   },
   ...
 }
};
Nota

Puedes configurar los atributos correspondientes para personalizar su apariencia y comportamiento aquí.

2. Instanciando la clase​

const checkout = new Izipay({config: iziConfig});

3. Mostrando el checkout​

El método LoadForm, que se muestra en el siguiente ejemplo, se encarga de levantar el checkout:

const callbackResponsePayment = (response) => console.log(response);

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_KEY_RSA',
      callbackResponse: callbackResponsePayment
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}
tip
  • En el ejemplo anterior, la función callbackResponsePayment se utiliza para recibir la respuesta de la transacción.
  • El Ancho y Alto del formulario se ajustará a las medidas del elemento contenedor donde se muestre el checkout.
tip

Si quieres precargar el formulario de pago en modo embebido en tu página web, puedes hacerlo con el siguiente script en el head de tu página:

<script src="https://sandbox-checkout.izipay.pe/payments/v1/js/index.js?mode=embedded&container=iframe-payment"></script>

Donde:​

  • mode: es el modo de visualización del formulario y los valores permitidos son: embedded o pop-up.
  • container: es el id/class del elemento contenedor donde se mostrará el formulario.

Asegurate de que el mode y el container sean los mismos que enviaras en la configuración de tu formulario de pagos.​

Formulario sin Botón

Si decides ocultar el botón Pagar:

  1. Envía en la configuración, el parámetro showButtonProcessForm en false.

  2. Realiza la transacción invocando la función submit. Por ejemplo:

/* Enviando en el iziConfig showButtonProcessForm: false */

let btnPayNow = document.querySelector('#boton-comercio');

btnPayNow.addEventListener('click', async (event) => {

 event.preventDefault();

 checkout.form.events.submit();

});

Información

Si necesitas hacer un redireccionamiento después de recibir la respuesta de la transacción te recomendamos utilizar el Modo Redirect.

Demo​

A continuación, te invitamos a explorar nuestra demo interactiva.

Editor en vivo
Resultado
Loading...