Change button text

Want to customize the button text on your payment form? It's possible! Our flexible system allows you to change the button text to better align with your brand and the context of your form.

Why is it important to customize the button text?

• Improve user experience: Clear and contextual button text can guide your customers through the checkout process and make it more intuitive.

• Increases conversion rate: A button with a strong call to action can motivate customers to complete the purchase.

• Reinforce your brand: By customizing the button text, you can reflect your company's identity and reinforce your brand message.

Important

Changing button text is a feature that is only available for the CARD payment method.

Objective

You will learn how to:

• Create the configuration object.
• Initialize the payment form.
• Display the Checkout.

1. Creating the configuration object

• Example of configuration to change the button text:

Object config

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

Note

Allowable values:

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

Important

These values will be displayed depending on the language in which the config object is sent.

Object config

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

2. Instantiating the class

const checkout = new Izipay({config: iziConfig});

3. Displaying the checkout

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_KEY_RSA',
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}

Demo

Next, we invite you to explore our interactive demo.

Live editor

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}
    />
  )

Result

Loading...