Existe una nueva versión del Checkout
Con la nueva versión del Custom Checkout tendrás la opción de personalizar totalmente tu checkout de acuerdo a las necesidades de tu comercio. Conoce más aquí

Culqi Checkout multipago versión 4

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

Tu checkout lucirá así:

Checkout Culqi

Sin embargo podrás personalizarlo eligiendo:

  • Los medios de pago que aceptará tu tienda virtual (pagos con tarjetas, yape, PagoEfectivo, billeteras móviles y Cuotéalo).
  • El nombre de tu comercio en el encabezado.
  • Los colores de tu marca.
  • El logo del comercio.

Usos del Culqi Checkout

  • Cargo único: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta o número de teléfono, 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 cobros por PagoEfectivo(banca móvil e internet, agentes y bodegas), billeteras móviles y Coutéalo.

Integra Culqi Checkout multipago en tu tienda virtual

Para integrarlo debes seguir los siguientes pasos:

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/v4"></script>
  <script>
    Culqi.publicKey = 'Aquí inserta tu llave pública';
  </script>
</body>

Recuerda que para obtener tu llave pública, debes ingresar a la sección “Desarrollo” y luego a “API Keys” en tu CulqiPanel.

Paso 2. Configura el Culqi Checkout para tokenizar la tarjeta

Configura los valores a mostrar en el formulario de Culqi Checkout. Para encriptar el payload de los servicios del checkout configura las variables xculqirsaid y rsapublickey.

El campo Currency es obligatorio y los demás son opcionales.
<script>
  Culqi.settings({
    title: 'Culqi Store',
    currency: 'PEN',  // Este parámetro es requerido para realizar pagos yape
    amount: 1000,  // Este parámetro es requerido para realizar pagos yape
    order: 'ord_live_0CjjdWhFpEAZlxlz', // Este parámetro es requerido para realizar pagos con pagoEfectivo, billeteras y Cuotéalo
    xculqirsaid: 'Inserta aquí el id de tu llave pública RSA',
    rsapublickey: 'Inserta aquí tu llave pública RSA',
  });
</script>

Recuerda que, si el parámetro order se encuentra vacío, solamente mostrará pago con tarjetas. Si deseas habilitar los demás medios de pagos, se debe generar un order ID previamente.

Paso 3. Personaliza el Culqi Checkout (opcional)

Personaliza el idioma, medios de pago, cuotas y UI de tu checkout usando los parámetros de configuración de culqi.options.

Configuración básica

Prende o apagar medios de pagos.

<script>
  Culqi.options({
    lang: "auto",
    installments: false, // Habilitar o deshabilitar el campo de cuotas
    paymentMethods: {
      tarjeta: true,
      yape: true,
      bancaMovil: true,
      agente: true,
      billetera: true,
      cuotealo: true,
    },
    style: {
          logo: "https://static.culqi.com/v2/v2/static/img/logo.png",
    }
  });
</script>
ParámetroDescripción
lang
string
Idioma del checkout.
Ejemplo: "auto","en","es"
installments
boolean
Indica si se activa o no la opción de pago en cuotas.
Ejemplo: "true", "false"
paymentMethods
Object
prende o apagar los medios de pagos

Recuerda que el código de aprobación de Yape es un código de 6 dígitos que se obtiene del aplicativo Yape del cliente. Este código es necesario para crear el objeto token.

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',
        bannerColor: '', // hexadecimal
        buttonBackground: '', // hexadecimal
        menuColor: '', // hexadecimal
        linksColor: '', // hexadecimal
        buttonText: '', // texto que tomará el botón
        buttonTextColor: '', // hexadecimal
        priceColor: '' // hexadecimal
      }
  });
</script>
ParámetroDescripción
Logo
string
Indica la URL del logo que se desea configurar.
Ejemplo: "https://culqi.com/LogoCulqi.png"
bannerColor
string
Indica el color del banner.
Ejemplo: "#9BB613"
buttonBackground
string
Indica el color del botón pagar.
Ejemplo: "#9BB613"
menuColor
string
Indica el color de las letras del menú cuando se activan las opciones.
Ejemplo: "#9BB613"
linksColor
string
Indica el color de las letras de los links.
Ejemplo: "#9BB613"
buttonText
string
Indica el texto del botón de pago.
Ejemplo: "Donar","Pagar"
buttonTextColor
string
Indica el color de los textos.
Ejemplo: "#9BB613"
priceColor
string
Indica el color del texto del precio.
Ejemplo: "#9BB613"

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.id;
      console.log('Se ha creado un 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);

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

Concluida la integración del checkout, consume nuestra API de cargos para terminar el flujo de pagos.