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

• Ejemplo de cómo mostrar/ocultar campos

Objeto config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            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...