Mostrar / ocultar campos

¿Quieres tener un control total sobre qué campos se muestran en tu formulario de pagos? ¡Es posible! Nuestro sistema flexible te permite mostrar u ocultar campos según tus necesidades.

¿Por qué es importante mostrar u ocultar campos en el formulario?

• Mejora la experiencia del usuario: Al mostrar solo los campos necesarios, puedes simplificar el proceso de pago para tus clientes y hacerlo más intuitivo.

• Aumenta la tasa de conversiones: Un formulario de pago menos abrumador puede reducir la fricción y aumentar la probabilidad de que los clientes completen la compra.

• Refuerza tu marca: Al ajustar qué campos se muestran, puedes hacer que tu formulario de pagos hable más sobre tu marca y se centre en lo que es importante para tus clientes

Importante

El mostrar / ocultar campos es una característica que solo está disponible para el método de pago con tarjeta CARD.

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 personalizar el mostrar u ocultar campos 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:{
        elements: [
          {
            paymentMethod: 'CARD',
            fields: [
              {
                name: 'typeDocument',
                visible: true
              },
              {
                name: 'documentNumber',
                visible: true
              }
            ]
          }
        ]
      }
    }
  }
};

Importante

Estos campos siempren se mostrarán:

• cardNumber
• expirationDate
• securityCode

Nota

Campos que se pueden mostrar/ocultar:

• firstName (Solo se puede ocultar si previamente se ha enviado)
• lastName (Solo se puede ocultar si previamente se ha enviado)
• email (Solo se puede ocultar si previamente se ha enviado)
• typeDocument
• documentNumber
• installments
• deferred

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: { elements: [ { paymentMethod: 'CARD', fields: [ { name: 'typeDocument', visible: true, }, { name: 'documentNumber', visible: true, }, ] } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            fields: [
              {
                name: 'typeDocument',
                visible: true,
              },
              {
                name: 'documentNumber',
                visible: true,
              },
            ]
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Resultado

Loading...