Hide header

Want to simplify your payment form by hiding the header? It's possible! Our flexible system allows you to hide the header to reduce distraction and focus your customers' attention on the input fields.

Why is the option to hide the header important?

• Improve the user experience: By offering the option to hide the header, you give your customers more control over their checkout experience. Some may prefer a more minimalist design, while others may appreciate the additional information the header provides.

• Increase conversion rate: By providing customization options such as hiding the header, you can adapt to the preferences of different customers, which could help maintain their interest and increase the likelihood that they will complete the purchase.

• Reinforce your brand: By offering personalization options such as header hiding, you demonstrate your company's flexibility and your commitment to meeting your customers' needs.

Important

Hiding header is a feature that works in the following integration modes: pop-up and embedded

Objective

You will learn how to:

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

1. Creating the configuration object

• Example of configuration to hide the header

Object config

const iziConfig = {
  config: {
    ...,
    appearance: {
          customize:{
              visibility: {
                  hideOrderNumber: true,
                  hideLogo: true
              }
          }
    },
    ...
  }
};

tip

Remember that you can also hide only the logo or the order number, depending on your needs.

2. Instantiating the class

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

3. Displaying the checkout

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_KEY_RSA',
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}

Demo

Next, we invite you to explore our interactive demo.

Live editor

const config = { appearance: { customize: { visibility: { hideOrderNumber: true, hideLogo: true } } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        visibility: {
          hideOrderNumber: true,
          hideLogo: true
        }
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Result

Loading...