Field ordering

Do you want to customize the order of the fields in your payment form? Of course you do! With our flexible system, you can arrange them as you see fit to optimize your customers' experience.

Why is it important to sort the form fields?

• Improve user experience: A logical and intuitive order facilitates the payment process for your customers.
• Increases conversion rate: A well-organized form reduces friction and increases the likelihood that customers will complete the purchase.
• Reinforce your brand: You can customize the order to reflect your company's identity.

Important

Field sorting 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 field ordering for payment with CARD card

Object config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            elements: [
                        {
                            paymentMethod: 'CARD',
                            fields: [
                                {
                                    name: 'firstName',
                                    order: 1,
                                },
                                {
                                    name: 'lastName',
                                    order: 1,
                                },
                                {
                                    name: 'cardNumber',
                                    order: 2,
                                },
                                {
                                    name: 'expirationDate',
                                    order: 3,
                                },
                                {
                                    name: 'securityCode',
                                    order: 3,
                                },
                                {
                                    name: 'email',
                                    order: 4,
                                },
                            ]
                        }
                    ]
        }
    },
    ...
  }
};

This example shows how to customize the order of the fields in a payment form.

Important

• The firstName and lastName fields are displayed first and together. The cardNumber field is shown below. The expirationDate and securityCode fields are then displayed, which are also displayed together. Finally, the email field is displayed.

• Please note that the firstName and lastName fields, as well as expirationDate and securityCode, are displayed together by default. If these pairs of fields are configured with different order values, only the first specified order value will be taken into account. The second value of order will be ignored unless the fields are decoupled.

• If you want to decouple these field pairs and allow each to have its own order value, see our guide on how to resize fields

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: 'firstName', order: 1, }, { name: 'lastName', order: 1, }, { name: 'cardNumber', order: 2, }, { name: 'expirationDate', order: 3, }, { name: 'securityCode', order: 3, }, { name: 'email', order: 4, }, ] } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            fields: [
              {
                name: 'firstName',
                order: 1,
              },
              {
                name: 'lastName',
                order: 1,
              },
              {
                name: 'cardNumber',
                order: 2,
              },
              {
                name: 'expirationDate',
                order: 3,
              },
              {
                name: 'securityCode',
                order: 3,
              },
              {
                name: 'email',
                order: 4,
              },
            ]
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Result

Loading...