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

A continuación se muestra un ejemplo de como ocultar la cabecera en un formulario de pagos.

const iziConfig = {
  config: {
    transactionId: '{TRANSACTION_ID}',
    action: 'pay',
    merchantCode: '{MERCHANT_CODE}',
    order: {
      orderNumber: '{ORDER_NUMBER}',
      currency: 'PEN',
      amount: '149.00',
      processType: 'AT',
      merchantBuyerId: '{MERCHANT_CODE}',
      dateTimeTransaction: '1747759374068000'
    },
    billing: {
      firstName: 'Lucho',
      lastName: 'Torres',
      email: 'luchotorres@gmail.com',
      phoneNumber: '989897960',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15000',
      documentType: 'DNI',
      document: '12345678'
    },
    shipping:{
      firstName: 'Juan',
      lastName: 'Pérez',
      email: 'juanperez@gmail.com',
      phoneNumber: '989897960',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15000',
      documentType: 'DNI',
      document: '12345679'
    },
    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...