---
agentTools:
  projectIndex: https://virtualpos.readme.io/llms.txt
---

# 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.

Ambiente Sandbox:

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

<br />

Ambiente Producción:

```html
<script src="https://quick-checkout.virtualpos.cl/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í](https://virtualpos.readme.io/reference/crear-un-objeto-payment). 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.

![](https://files.readme.io/a2305dc-image.png)