Ordenamiento de campos

¿Quieres personalizar el orden de los campos en tu formulario de pagos? ¡Claro que sí! Con nuestro sistema flexible, puedes acomodarlos como mejor te convenga para optimizar la experiencia de tus clientes.

¿Por qué es importante ordenar los campos del formulario?

• Mejora la experiencia del usuario: Un orden lógico y intuitivo facilita el proceso de pago para tus clientes.
• Aumenta la tasa de conversiones: Un formulario bien organizado reduce la fricción y aumenta la probabilidad de que los clientes completen la compra.
• Refuerza tu marca: Puedes personalizar el orden para reflejar la identidad de tu empresa.

Importante

El ordenamiento de 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 ordenamiento de campos para pago con tarjeta CARD

Objeto config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            elements: [
                        {
                            paymentMethod: 'CARD',
                            fields: [
                                {
                                    name: 'firstName',
                                    order: 1,
                                },
                                {
                                    name: 'lastName',
                                    order: 1,
                                },
                                {
                                    name: 'cardNumber',
                                    order: 2,
                                },
                                {
                                    name: 'expirationDate',
                                    order: 3,
                                },
                                {
                                    name: 'securityCode',
                                    order: 3,
                                },
                                {
                                    name: 'email',
                                    order: 4,
                                },
                            ]
                        }
                    ]
        }
    },
    ...
  }
};

Este ejemplo muestra cómo personalizar el orden de los campos en un formulario de pagos.

Importante

• Los campos firstName y lastName se muestran primero y juntos. A continuación, se muestra el campo cardNumber. Luego, se muestra los campos expirationDate y securityCode, que también se muestran juntos. Finalmente, se muestra el campo email.

• Debes tener en cuenta que los campos firstName y lastName, así como expirationDate y securityCode, se muestran juntos por defecto. Si estos pares de campos se configuran con diferentes valores de order, solo se tomará en cuenta el primer valor de order especificado. El segundo valor de order será ignorado a menos que los campos estén desacoplados.

• Si deseas desacoplar estos pares de campos y permitir que cada uno tenga su propio valor de order, consulta nuestra guía sobre cómo cambiar tamaño de los campos

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: 'firstName', order: 1, }, { name: 'lastName', order: 1, }, { name: 'cardNumber', order: 2, }, { name: 'expirationDate', order: 3, }, { name: 'securityCode', order: 3, }, { name: 'email', order: 4, }, ] } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            fields: [
              {
                name: 'firstName',
                order: 1,
              },
              {
                name: 'lastName',
                order: 1,
              },
              {
                name: 'cardNumber',
                order: 2,
              },
              {
                name: 'expirationDate',
                order: 3,
              },
              {
                name: 'securityCode',
                order: 3,
              },
              {
                name: 'email',
                order: 4,
              },
            ]
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Resultado

Loading...