Integración

Para configurar la integración de Quick Checkout y tener un pago receptivo, optimizado y configurable, proporcionamos en los pasos a continuación el proceso de configuración inicial común para Quick Checkout.

Para integrarlo en su sitio web, primeramente debe contar con el servicio contratado y una api key, la cual permitirá el renderizado del formulario.

Una vez que cuente con lo anterior mencionado, debe realizar lo siguiente.

Incluir la biblioteca de Virtualpos - Quick Checkout

Utilice nuestro script oficial para acceder a las funcionalidades del producto de forma segura desde tu frontend.

HTML

<script src="https://quick-checkout.virtualpos-sandbox.com/virtualpos-quick-checkout.js"></script>

Configurar el Quick Checkout

Crea la configuración de inicio del Quick Checkout.

JSON

const settings = {
  initialization: {
    amount: 1000,
    api_key: 'your_api_key',
    order_id: 'order_uuid',
    clientInformation: {
      fullName: '',
      socialId: '',
      email: '',
    }
  },
  customization: {
    paymentMethods: {
      creditCard: {
        available: "yes",
        installments: "1,2,3,4,5"
      },
      debitCard: {
        available: "yes"
      },
      prePaidCard: {
        available: "yes"
      },
    },
  },
  callbacks: {
    onSubmit: ({ selectedPaymentMethod, formData }) => {
      // callback de llamada al hacer clic en el botón de envío de datos
      return new Promise((resolve, reject) => {
        fetch("/api/process-payment", {
          method: "POST",
          body: formData,
        })
        .then((response) => response.json())
        .then((data) => {
          resolve()
        })
        .catch((error) => {
          // manejar la respuesta de error al intentar procesar el pago
          reject()
        });
      });
    },
    onError: (error) => {
      // callback manejar la respuesta de error para todos los casos de Quick Checkout
    },
  },
}
window.initPaymentController(settings)

🚧

Nota importante

Se debe considerar que para renderizar el formulario, primeramente se debió haber creado una orden a través de nuestro webservice, para mayor información haga clic aquí. Caso contrario, no se podrá renderizar el formulario.

Renderizar el QuickCheckout

Una vez creadas las configuraciones, ingrese el código a continuación para renderizar el producto.

HTML

<div id="vpos_payment_form"></div>

El resultado de renderizar el medio de pago debería parecerse a la imagen de abajo.