Skip to main content

Embedded

With this option, you can integrate the payment form directly into a section of your website. The SDK provides methods to render the form and manipulate it according to your needs.

Objective​

You will learn how to:

  • Create the configuration object.
  • Initialize the payment form.
  • Display the Checkout.

1. Creating the configuration object​

  • Including the render option with its respective parameters within the initialization options of the payment form.
const iziConfig = {
 config: {
   ...,
   render: {
      typeForm: 'embedded',
      container:'my-form-payment',
      showButtonProcessForm: true
   },
   ...
 }
};
Note

You can configure the corresponding attributes to customize its appearance and behavior here.

2. Instantiating the class​

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

3. Displaying the checkout​

The LoadForm method, shown in the following example, is responsible for raising the checkout: 

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

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'YOUR_TOKEN_SESSION',
      keyRSA: 'YOUR_KEY_RSA',
      callbackResponse: callbackResponsePayment
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}
tip
  • In the above example, the callbackResponsePayment function is used to receive the transaction response.
  • The Width and Height of the form will be set to the dimensions of the container element where the checkout is displayed.
tip

If you want to preload the payment form in embedded mode on your web page, you can do this with the following script in the head of your page:

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

Where:​

  • mode: is the display mode of the form and the allowed values are: embedded or pop-up.
  • container**: is the id/class of the container element where the form will be displayed.

Make sure that the mode and container are the same as the ones you will send in the configuration of your payment form.​

Form without Button

If you decide to hide the Pay button:

  1. Send in the configuration, the parameter showButtonProcessForm in false.

  2. Perform the transaction by invoking the submit function. For example:

 
/* Sending in iziConfig showButtonProcessForm: false */

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

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

 event.preventDefault();

 checkout.form.events.submit();

});

Information

If you need to make a redirect after receiving the transaction response we recommend using the Redirect Mode.

Demo​

Next, we invite you to explore our interactive demo.

Live editor
Result
Loading...