Validation messages

Want to improve the way validation messages are displayed on your payment form? It's possible! Our flexible system allows you to customize the placement of these messages to optimize your customers' experience.

Why is it important to customize validation messages?

• Improve the user experience: Whether you choose to display validation messages globally or just below each field, you can make it easier for your customers to identify and correct errors. Both options can make the checkout process smoother and less frustrating.

• Increase conversion rates: By tailoring the placement of validation messages to your customers' needs, you can reduce friction in the checkout process and therefore increase the conversion rate.

• Reinforce your brand: By customizing validation messages, you can further tailor the checkout process to your customers' needs, demonstrating your commitment to their satisfaction.

Important

The validation message 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 validation message customization

Object config

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

tip

By default the value of config.appearance.customize.visibility.hideGlobalErrors is false.

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

Result

Loading...