Mensajes de validación

¿Quieres mejorar la forma en que se muestran los mensajes de validación en tu formulario de pagos? ¡Es posible! Nuestro sistema flexible te permite personalizar la ubicación de estos mensajes para optimizar la experiencia de tus clientes.

¿Por qué es importante personalizar los mensajes de validación?

• Mejora la experiencia del usuario: Tanto si eliges mostrar los mensajes de validación de forma global como si prefieres hacerlo justo debajo de cada campo, puedes facilitar a tus clientes la identificación y corrección de errores. Ambas opciones pueden hacer que el proceso de pago sea más fluido y menos frustrante.

• Aumenta la tasa de conversiones: Adaptando la ubicación de los mensajes de validación a las necesidades de tus clientes, puedes reducir la fricción en el proceso de pago y, por lo tanto, aumentar la tasa de conversiones.

• Refuerza tu marca: Al personalizar los mensajes de validación, puedes adaptar aún más el proceso de pago a las necesidades de tus clientes, demostrando así tu compromiso con su satisfacción.

Importante

El mensaje de validación es una característica que solo está disponible en 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 personalización de mensajes de validación

Objeto config

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

tip

Por defecto el valor de config.appearance.customize.visibility.hideGlobalErrors es false

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: { hideGlobalErrors: true, }, } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        visibility: {
          hideGlobalErrors: true,
        },
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Resultado

Loading...