Cambiar texto del botón

¿Quieres personalizar el texto del botón en tu formulario de pagos? ¡Es posible! Nuestro sistema flexible te permite cambiar el texto del botón para que se alinee mejor con tu marca y el contexto de tu formulario.

¿Por qué es importante personalizar el texto del botón?

• Mejora la experiencia del usuario: Un texto de botón claro y contextual puede guiar a tus clientes a través del proceso de pago y hacerlo más intuitivo.

• Aumenta la tasa de conversiones: Un botón con un llamado a la acción fuerte puede motivar a los clientes a completar la compra.

• Refuerza tu marca: Al personalizar el texto del botón, puedes reflejar la identidad de tu empresa y reforzar tu mensaje de marca.

Importante

El cambiar texto del botón 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 configuración para cambiar el texto del botón:

Objeto config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            elements: [
                {
                    paymentMethod: 'CARD',
                    changeButtonText: {
                        actionPay: 'Donar'
                    },
                }
            ]
        }
    },
    ...
  }
};

Nota

Valores permitidos:

• Pagar
• Aceptar pagar
• Pague aquí
• Cobrar
• Comprar
• Continuar
• Contribuir
• Confirmar Pago
• Donar
• Efectuar Pago
• Recargar

Importante

Estos valores se mostrarán dependiento el idioma en el que se envié el objeto config.

Objeto config

const iziConfig = {
  config: {
    ...,
    language: {
        init: 'ESP'
    },
    ...
  }
};

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', changeButtonText: { actionPay: 'Donar' } } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            changeButtonText: {
              actionPay: 'Donar'
            }
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Resultado

Loading...