Ordenar métodos de pago

¿Quieres personalizar el orden de los métodos de pago en tu plataforma? ¡Es posible! Con nuestro sistema flexible, puedes ordenarlos de la manera que mejor se adapte a tus necesidades y optimice la experiencia de tus clientes.

¿Por qué es importante ordenar los métodos de pago?

• Mejora la experiencia del usuario: Un orden lógico y preferencial de los métodos de pago facilita el proceso de pago para tus clientes. Por ejemplo, puedes poner los métodos de pago más utilizados al principio para que los clientes puedan encontrarlos rápidamente.

• Aumenta la tasa de conversiones: Un proceso de pago bien organizado reduce la fricción y aumenta la probabilidad de que los clientes completen la compra. Si los clientes pueden encontrar fácilmente su método de pago preferido, es más probable que finalicen la transacción.

• Refuerza tu marca: Puedes personalizar el orden de los métodos de pago para reflejar la identidad de tu empresa. Por ejemplo, puedes poner primero los métodos de pago que son más populares entre tus clientes para facilitarles el proceso.

Importante

El orden de los métodos de pago es una característica que funciona en todas las modalidades de integración: pop-up, embedded, redirect

Objetivo

Aprenderás a:

• Crear el objeto de configuración
• Inicializar el formulario de pago.
• Mostrar el Checkout.

1. Creando el objeto de configuración

• Ejemplo de ordenamiento de métodos de pago

Objeto config

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

2. Instanciando la clase

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

3. Mostrando el checkout

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

Demo

A continuación, te invitamos a explorar nuestra demo interactiva.

Editor en vivo

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

Resultado

Loading...