Pop-up

The Web SDK allows you to open a payment form in a pop-up window for a smoother user experience.

Objective

You will learn how to:

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

1. Creating the configuration object

const iziConfig = {
 config: {
   ...,
   render: {
      typeForm: 'pop-up'
   },
   ...
 }
};

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: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_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.

Information

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

Demo

Next, we invite you to explore our interactive demo.

Live editor

const config = { render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    render: {
      typeForm: 'pop-up'
    }
  }

  render (
    <Izipay
      config={config}
    />
  )

Result

Loading...