Culqi | Documentación

Culqi Checkout multipago versión 3

El método más simple para capturar los datos de tarjeta.

Culqi Checkout multipago es la manera más simple de empezar la integración con Culqi. Está diseñado para que tus clientes tengan la mejor experiencia de compra rápida y segura en tu tienda virtual. Es un formulario embebido que facilita la integración de Culqi en tu tienda web y móvil (soporta tablets y smartphones).

Usos del Culqi Checkout

Cargo único: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta, luego enviar el token ID a tu backend para realizar un cargo único.
Cargo one-click: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta, luego enviar el token ID a tu backend, registrar un cliente, generar una tarjeta(card) y realizar cargos recurrentes One-click.
Registrar suscripciones, puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta, luego enviar el token ID a tu backend, registrar un cliente generar una tarjeta(card), generar una suscripción en base a un plan.
Órdenes de pago, puedes usar el Culqi Checkout para realizar pagos por PagoEfectivo(depósitos en efectivo, banca online y móvil).

Integra Culqi Checkout multipago en tu tienda virtual

Para integrarlo debes seguir los siguientes pasos:

Incluye el Culqi Checkout en tu tienda.
Configura el Culqi Checkout para tokenizar la tarjeta.
Personaliza el Culqi Checkout (opcional).
Muestra el Culqi Checkout.
Enviar el ID del objeto token a tu backend.

Paso 1. Incluye el Culqi Checkout en tu tienda

Incluye el siguiente script en tu tienda virtual y configura tu llave pública. Puedes incluirlo antes del cierre de la etiqueta “body”:

<body>
  <script src="https://checkout.culqi.com/js/v3"></script>
  <script>
    Culqi.publicKey = 'Aquí inserta tu llave pública';
  </script>
</body>

Paso 2. Configura el Culqi Checkout para tokenizar la tarjeta

Configura los valores a mostrar en el formulario de Culqi Checkout.

<script>
  Culqi.settings({
    title: 'Culqi Store',
    currency: 'PEN',
    description: 'Polo/remera Culqi lover',
    amount: 3500,
    order: 'ord_live_0CjjdWhFpEAZlxlz'
  });
</script>

Paso 3. Personaliza el Culqi Checkout (opcional)

Personaliza el idioma, pagos en cuota y UI de tu checkout usando los parámetros de configuración de culqi.options.

Configuración básica

Configura el idioma (por defecto en auto detección).
Indica si se activa o no la opción de pago en cuotas.

<script>
  Culqi.options({
      lang: 'auto',
      modal: false,
      installments: true,
      customButton: 'Donar',
  });
</script>

Parámetro	Descripción
lang string	Idioma del checkout. Ejemplo: "auto","en","es"
modal boolean	Indica si el checkout es modal incrustrado o no. Ejemplo: "true", "false"
installments boolean	Indica si se activa o no la opción de pago en cuotas. Ejemplo: "true", "false"
customButton string	Permite colocar el texto que desees Ejemplo: "Donar", "Paga aqui 10.00 PEN"

Configuración de UI

Cambia la interfaz del checkout para que se ajuste a tu comercio.

<script>
  Culqi.options({
      style: {
        logo: 'https://culqi.com/LogoCulqi.png',
        maincolor: '#0ec1c1',
        buttontext: '#ffffff',
        maintext: '#4A4A4A',
        desctext: '#4A4A4A'
      }
  });
</script>

Parámetro	Descripción
logo string	Indica la URL del logo que se desea configurar. Ejemplo: "https://culqi.com/LogoCulqi.png"
maincolor string	Indica el color del botón pagar. Ejemplo: "#9BB613"
buttonText string	Indica el color del texto del botón. Ejemplo: "#080A01"
maintext string	Indica el color del título de Culqi Checkout. Ejemplo: "#2325B5"
desctext string	Indica el color de la descripción de Culqi Checkout. Ejemplo: "#FE0000"

Paso 4. Mostrar el Culqi Checkout

Usando la función “Culqi.open()” podemos mostrar el formulario de Culqi Checkout. En este paso el cliente ingresa la información de su tarjeta y el formulario lo convertirá en un token.

<script>
  const btn_pagar = document.getElementById('btn_pagar');

  btn_pagar.addEventListener('click', function (e) {
      // Abre el formulario con la configuración en Culqi.settings y CulqiOptions
      Culqi.open();
      e.preventDefault();
  })
</script>

Paso 5. Enviar el ID del objeto token a tu backend

Luego de haberse generado el token, este estará disponible en la función culqi(). Debes enviar a tu backend como mínimo el ID del token(token.id) para ser procesado y crear un cargo único, cargo One-click o una suscripción.

  <script>
  function culqi() {
    if (Culqi.token) {  // ¡Objeto Token creado exitosamente!
      const token = Culqi.token;
      console.log(`Se ha creado el objeto Token: ${token}.`);
      //En esta linea de codigo debemos enviar el "Culqi.token.id"
      //hacia tu servidor con Ajax
    } else if (Culqi.order) {  // ¡Objeto Order creado exitosamente!
      const order = Culqi.order;
      console.log(`Se ha creado el objeto Order: ${order}. para PagoEfectivo`);

    } else {
      // Mostramos JSON de objeto error en consola
      console.log(`Error : ${Culqi.error.merchant_message}.`);
    }
  };
</script>