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 = {
  transactionId: '{TRANSACTION_ID}',
  action: 'pay',
  merchantCode: '{MERCHANT_CODE}',
  order: {
    orderNumber: '{ORDER_NUMBER}',
    currency: 'PEN',
    amount: '149.00',
    processType: 'AT',
    merchantBuyerId: '{MERCHANT_BUYER_ID}',
    dateTimeTransaction: '{DATETIME_TRANSACTION}'
  },
  billing: {
    firstName: 'Lucho',
    lastName: 'Torres',
    email: 'luchotorres@izipay.pe',
    phoneNumber: '989897960',
    street: 'Av. Jorge Chávez 275',
    city: 'Lima',
    state: 'Lima',
    country: 'PE',
    postalCode: '15000',
    documentType: 'DNI',
    document: '12345678'
  },
  shipping: {
    firstName: 'Lucho',
    lastName: 'Torres',
    email: 'luchotorres@izipay.pe',
    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: '{TOKEN_SESSION}',
      keyRSA: '{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}
    />
  )

Resultado

Loading...