Order payment methods

Want to customize the order of payment methods on your platform? It's possible! With our flexible system, you can order them in the way that best suits your needs and optimizes your customers' experience.

Why is it important to sort the payment methods?

• Improve the user experience: A logical and preferential order of payment methods facilitates the payment process for your customers. For example, you can put the most used payment methods at the beginning so that customers can find them quickly.

• Increases the conversion rate: A well-organized checkout process reduces friction and increases the likelihood of customers completing the purchase. If customers can easily find their preferred payment method, they are more likely to complete the transaction.

• Reinforce your brand: You can customize the order of payment methods to reflect your company's identity. For example, you can put the payment methods that are most popular with your customers first to make the process easier for them.

Important

The order of payment methods is a feature that works in all integration modes: pop-up, embedded, redirect

Objective

You will learn how to:

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

1. Creating the configuration object

• Example of ordering of payment methods

Object config

const iziConfig = {
  config: {
    ...,
    appearance: {
        customize:{
            visibility: {...},
            elements: [
                        {
                            paymentMethod: 'CARD',
                            order: 3,
                        },
                        {
                            paymentMethod: 'QR',
                            order: 1,
                        },
                        {
                            paymentMethod: 'YAPE_CODE',
                            order: 2,
                        }
                    ]
        }
    },
    ...
  }
};

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', order: 3, }, { paymentMethod: 'QR', order: 1, }, { paymentMethod: 'YAPE_CODE', order: 2, } ] } }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customize: {
        elements: [
          {
            paymentMethod: 'CARD',
            order: 3,
          },
          {
            paymentMethod: 'QR',
            order: 1,
          },
          {
            paymentMethod: 'YAPE_CODE',
            order: 2,
          }
        ]
      }
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Result

Loading...