Ocultar cabecera

¿Quieres simplificar tu formulario de pagos ocultando la cabecera? ¡Es posible! Nuestro sistema flexible te permite ocultar la cabecera para reducir la distracción y centrar la atención de tus clientes en los campos de entrada.

¿Por qué es importante la opción de ocultar la cabecera?

• Mejora la experiencia del usuario: Al ofrecer la opción de ocultar la cabecera, das a tus clientes más control sobre su experiencia de pago. Algunos pueden preferir un diseño más minimalista, mientras que otros pueden apreciar la información adicional que proporciona la cabecera.

• Aumenta la tasa de conversiones: Al proporcionar opciones de personalización como ocultar la cabecera, puedes adaptarte a las preferencias de diferentes clientes, lo que podría ayudar a mantener su interés y aumentar la probabilidad de que completen la compra.

• Refuerza tu marca: Al ofrecer opciones de personalización como ocultar la cabecera, demuestras la flexibilidad de tu empresa y tu compromiso con satisfacer las necesidades de tus clientes.

Importante

El ocultar cabecera es una característica que funciona en las siguientes modalidades de integración: pop-up y embedded

Objetivo

Aprenderás a:

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

1. Creando el objeto de configuración

• Ejemplo de configuración para ocultar la cabecera

Objeto config

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

tip

Recuerda que puedes ocultar también solo el logo o el número de orden, según tus necesidades.

2. Instanciando la clase

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

3. Mostrando el checkout

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

Demo

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

Editor en vivo

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}
    />
  )

Resultado

Loading...