Wompi JS - Librería JavaScript

Wompi quiere que construyas no sólo las mejores, sino más seguras experiencias de pago para tus clientes. Para esto, te ofrecemos nuestra librería para navegadores Wompi JS.

Integrando Wompi JS cuentas con la mayor protección antifraude, brindando una experiencia personalizada y segura cada vez que tus clientes hacen una Transacción o crean una Fuente de Pago, usando nuestro API.

Integra Wompi JS y protégete del fraude

Paso a paso

  • Paso 1 — Incluye la librería en tu sitio
  • Paso 2 — Inicializa la librería y utiliza un sessionId

Paso 1: Incluye la librería

Dentro de las etiquetas <head> y </head> de tu sitio, incluye la librería de Wompi JS:

<script src="https://cdn.wompi.co/libs/js/v1.js" data-public-key="LLAVE_PUBLICA"></script>

Reemplaza LLAVE_PUBLICA por tu llave pública de comercio. Conoce todo sobre las llaves y ambientes de Wompi haciendo clic aquí.

Uso recomendado
Como mínimo, incluye Wompi JS en la misma página donde creas una transacción o una fuente de pago. Idealmente, incluye Wompi JS en todas las páginas de tu sitio, para obtener los mejores resultados de seguridad, permitiendo a Wompi detectar comportamientos potencialmente fraudulentos.

Paso 2: Inicializa la librería

Al incluir la librería vas a tener disponible la variable global $wompi, que deberás inicializar para obtener un sessionId, de la siguiente manera:

$wompi.initialize(function ( data, error ) {
  if ( error === null ) {
    var sessionId = data.sessionId
    // `sessionId` es un string, por ejemplo: "1289_1696830983722-ab493d40c02e-278bab34-323va3"
  }
})

Dentro de data encuentras la variable sessionId que deberás utilizar para crear Transacciones o Fuentes de Pago, como se explica a continuación.

¿Qué es un sessionId?
Es un dato que identifica el dispositivo de un usuario y su actividad en el proceso de compra, que Wompi utiliza para protegerte de individuos maliciosos.

Creando Transacciones

Debes enviar el sessionId junto con los demás campos de la Transacción al hacer POST /transactions. Por ejemplo:

{
  // El `sessionId` obtenido en la inicialización
  "session_id": sessionId,

  // Otros campos de la transacción
  "amount_in_cents": 2500000,
  "currency": "COP",
  "customer_email": "john.smith@example.com",
  "reference": "2322er3234ed4",
  // Etc...
}

Creando Fuentes de Pago

IMPORTANTE: Recuerda que, a diferencia de las transacciones, las Fuentes de Pago deben ser creadas desde tu backend (no desde tu frontend), pues utilizas tu llave privada. Por lo tanto, aunque obtengas el sessionId en tu frontend, debes hacerlo llegar primero a tu backend para poder crear la fuente de pago.

Debes enviar el sessionId junto con los demás campos de la Fuente de Pago al hacer POST /payment_sources desde tu backend:

{
    // El `sessionId` obtenido en la inicialización
  "session_id": sessionId,

  // Otros campos de la fuente de pago
  "type": "CARD",
  "token": "tok_prod_1_BBb749EAB32e97a2D058Dd538a608301",
  "customer_email": "john.smith@example.com"
  // Etc...
}
← Fuentes de pago & TokenizaciónErrores →