Show / hide fields

Do you want to have full control over which fields are displayed on your payment form? It's possible! Our flexible system allows you to show or hide fields according to your needs.

Why is it important to show or hide fields in the form?

• Improve user experience: By displaying only the necessary fields, you can simplify the checkout process for your customers and make it more intuitive.

• Increases conversion rate: A less overwhelming checkout form can reduce friction and increase the likelihood of customers completing the purchase.

• Reinforce your brand: By adjusting which fields are displayed, you can make your payment form speak more about your brand and focus on what is important to your customers.

Important

Showing/hiding fields 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 how to show/hide fields

Object config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            elements: [
                        {
                            paymentMethod: 'CARD',
                            fields: [
                                {
                                    name: 'typeDocument',
                                    visible: true,
                                },
                                {
                                    name: 'documentNumber',
                                    visible: true,
                                },
                            ]
                        }
                      ]
        }
    },
    ...
  }
};

Important

These fields will always be displayed:

• cardNumber
• expirationDate
• securityCode

Note

Fields that can be shown/hidden:

• firstName (Can only be hidden if previously sent)
• lastName (Can only be hidden if previously sent)
• email (Can only be hidden if previously sent)
• typeDocument
• documentNumber
• installments
• deferred

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', fields: [ { name: 'typeDocument', visible: true, }, { name: 'documentNumber', visible: true, }, ] } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            fields: [
              {
                name: 'typeDocument',
                visible: true,
              },
              {
                name: 'documentNumber',
                visible: true,
              },
            ]
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Result

Loading...