Botón de pago

El botón de pago QVO es la forma más simple y elegante cobrar a tarjetas desde tu sitio web. Al presionarlo se despliega un formulario donde tus clientes pueden pagar sin ser redirigidos a otro lugar.

Nuestro botón de pago brinda a tus usuarios una experiencia lista para dispositivos móviles, optimizada y en constante mejora. Presiona el botón y descubre como funciona.

Una de las principales características de esta modalidad, es que mantiene al cliente dentro de tu sitio, nunca se saldrá de contexto. Además, en el caso de equivocaciones o problemas en el flujo de pago, como por ejemplo:

  • El cliente cierra la ventana de pago.
  • Existió un error en la conexión.
  • No se termina el flujo con normalidad, independientemente de su estado (exitoso o erróneo).

El formulario permitirá al cliente realizar múltiples re-intentos, maximizando así la conversión de pago.

Instalando el botón en tu sitio

Para incluir el botón de pago en tu sitio web primero debes importar el plugin de QVO en el <head> de tu página.

<script src="https://cdn.qvo.cl/checkout.min.js"></script>

Luego, debes insertar el siguiente código en el lugar donde quieres el botón.

<div id="qvo-button-container"></div>

Para desplegar el botón, basta insertar al final del <body> (o al menos después del código anterior) el script mostrado a continuación.

<script>

  // Render del botón
  qvo.button.render({

    env: 'sandbox', // sandbox | production

    // Crea una cuenta QVO: https://dashboard-test.qvo.cl/signup
    keys: {
      sandbox: 'FkZcGOAppvKR6CCVvZI6jQ',
      production: '<inserta tu llave de producción aquí>'
    },

    // El monto a cobrar
    amount: 21990,

    // La descripción del cobro
    description: 'Orden #3042',

    // El nombre de tu negocio
    name: 'Tu Tienda',

    // Link a la imagen que deseas que aparezca en el checkout
    image: 'https://cdn.qvo.cl/assets/shop.svg',

    // onSuccess() es llamado cuando el pago ha sido correcto
    onSuccess: function (response) {
      // Aquí puedes llamar a tu servidor para verificar la transacción
      setTimeout(function() {
        window.alert('Pago Completado 😁!');
      }, 500);
    },

    // onCancel() es llamado cuando el usuario cierra el formulario
    onCancel: function () {
      window.alert('Usuario canceló 🙁');
    },

    // Puedes pre-llenar los datos del cliente ...
    // customer: {
    //  name: 'Mi Cliente',
    //  email: 'mi@cliente.com',
    //  phone: '+56987654321'
    // },

    // .. así como también personalizar los colores del checkout
    // theme: {
    //   mainColor: '#3091c8',
    //   buttonColor: '#3091c8'
    // },
  }, '#qvo-button-container');
</script>

En este script es importante especificar:

  • El monto a cobrar en pesos chilenos amount.
  • El ambiente en el cual se cobrará (de prueba o real) env.
  • Tus llaves públicas para estos ambientes keys.
  • Una descripción del cobro description.
  • El nombre de tu tienda name.

Puedes encontrar más detalles de la configuración aquí.

Puedes probar tu código de inmediato tu código en nuestra página demo.

Obtener llave pública

Encuentra tu llave pública ingresando a el panel de QVO, en la sección API ubicada a la izquierda.

Llave pública

Es importante que utilices la llave pública y no la privada, esta última debe permanecer siempre en secreto.

Opciones de configuración

Campo Descripción
env Ambiente. Determina si los cobros son de prueba o reales. Los posibles valores son 'sandbox' el ambiente de prueba y 'production' el ambiente real.
keys Son las llaves te identifican en el ambiente de prueba y real. No es necesario que pongas ambas, basta que pongas la llave del ambiente que indicaste en env. Ve como obtener tu llave pública aquí.

Ejemplo: {sandbox: 'tu-llave-aquí', production: 'tu-llave-aquí'}
amount Monto a cobrar en pesos chilenos. Es un número entero.
description Descripción de lo que se quiere cobrar.
name Nombre de tu negocio.
image opcional URL absoluta de una imagen cuadrada de tu marca o producto.
Pueden ser archivos .png, .jpg o .svg
customer opcional Información del cliente. Puedes completar previamente los datos del formulario.

Ejemplo: {name: 'Ted Mosby', email: 'ted@howimet.com', phone: '+56987654321'}
theme opcional Determina el look del formulario, el color principal y del botón.

Ejemplo: {mainColor: '#3091c8', buttonColor: '#3091c8'}
onSuccess Función que se gatilla cuando el pago es exitoso.
Te recomendamos verificar el estado de la transacción en tu back-end, una vez ejecutada esta función. Ve como hacerlo vía nuestra API en la documentación. También puedes verificar la transacción en cualquier momento desde nuestro panel.
onCancel opcional Función que se gatilla cuando el usuario cierra el formulario.
onClose opcional Función que se gatilla cuando se cierra el formulario de pago (éxito o fracaso).
onEnter opcional Función que se gatilla cuando se entra al formulario de pago.

Ejemplos