Cambiar tamaño de los campos
¿Quieres personalizar aún más los campos de tu formulario de pagos? ¡Puedes hacerlo! Nuestro sistema flexible te permite no solo ordenar los campos, sino también cambiar su tamaño (ancho). Esto te permite optimizar aún más la experiencia de tus clientes y adaptar el formulario a tus necesidades específicas.
¿Por qué es importante ordenar los campos del formulario?
Mejora la experiencia del usuario: Al ajustar el tamaño de los campos, puedes hacer que el formulario sea más intuitivo y fácil de usar. Por ejemplo, puedes agrupar campos relacionados para que ocupen una línea completa, lo que facilita la comprensión del formulario por parte del usuario.
Aumenta la tasa de conversiones: Un formulario bien organizado y fácil de entender reduce la fricción y aumenta la probabilidad de que los clientes completen la compra.
Refuerza tu marca: Al personalizar el tamaño de los campos, puedes reflejar la identidad de tu empresa y destacar los campos que son más importantes para ti.
El cambio de tamaño de los 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 cambio de tamaño de los campos para pago con tarjeta
CARD
const iziConfig = {
config: {
...,
appearance: {
customize:{
visibility: {...},
elements: [
{
paymentMethod: 'CARD',
fields: [
{
name: 'firstName',
order: 1,
groupName: 'info'
},
{
name: 'lastName',
order: 2,
groupName: 'lastName'
},
{
name: 'cardNumber',
order: 3,
},
{
name: 'expirationDate',
order: 4,
groupName: 'expirationDate'
},
{
name: 'securityCode',
order: 5,
groupName: 'securityCode'
},
{
name: 'email',
groupName: 'info'
},
]
}
]
}
},
...
}
};
Los campos firstName y lastName originalmente se muestran juntos por defecto. Sin embargo, en este ejemplo, se han desacoplado al asignarles diferentes groupName. firstName tiene un groupName de 'info' y lastName tiene un groupName de 'lastName'. Esto significa que ahora se mostrarán en líneas separadas en el formulario.
Luego, el campo firstName se ha acoplado con email al asignarles el mismo groupName de 'info'. Esto significa que se mostrarán juntos en la misma línea en el formulario. Notarás que email no tiene un valor order. Esto se debe a que, cuando los campos están en el mismo grupo, el valor order del primer campo en el grupo se aplica a todos los campos en ese grupo. Por lo tanto, el valor order de email se ignora y sigue el valor order de firstName.
Los campos expirationDate y securityCode también se muestran juntos por defecto. Pero en este ejemplo, se han desacoplado al asignarles diferentes groupName. expirationDate tiene un groupName de 'expirationDate' y securityCode tiene un groupName de 'securityCode'. Esto significa que ahora se mostrarán en líneas separadas en el formulario. Y dado que están en grupos separados, sus valores order individuales se respetan, lo que permite personalizar su orden en el formulario.
Recuerda que son dos campos como máximo los que se pueden mostrar en una misma línea (acoplar).
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.