Wompi wants you to build not only the best, but also the most secure payment experiences for your customers. For that matter, we're making available the Wompi JS library.

By integrating Wompi JS, you benefit from the best anti-fraud protection, while still offering a custom user experience every time your customers initiate a Transaction or create a Payment Source, by using our API. We are innovating day after day in new techniques and on this occasion we are working with Fingerprinting, an advanced technique that allows a device or user to be uniquely identified by collecting specific characteristics of the environment from which a transaction is made.

Use Wompi JS and protect against fraud

Step by step

Step 1 — Include the library in your site.
Step 2 — Initialize the library and use a sessionId or a deviceID.

Step 1: Include the library

Inside the <head> and </head> tags of your website, include the Wompi JS library:

<script src="https://wompijs.wompi.com/libs/js/v1.js" data-public-key="PUBLIC_KEY"></script>

Replace PUBLIC_KEY for your business' public key. Get to know everything about Wompi Keys and Environments by clicking here.

Recommended use

At minimum, include Wompi JS in your the page where a Transaction or a Payment Source is created. Ideally, include Wompi JS in every page of your website, to obtain the best results regarding fraud prevention by allowing Wompi to detect potentially fraudulent behaviors.

Step 2: Initialize the library

By including the library, you'll now have the global variable $wompi, which must be initialized in order to obtain a sessionId, as follows:

$wompi.initialize(function ( data, error ) {
  if ( error === null ) {
    var sessionId = data.sessionId
    var deviceId = data.deviceData.deviceID

    // `sessionId` is a string, for example: "1289_1696830983722-ab493d40c02e-278bab34-323va3"
    // `deviceId` current un string, por ejemplo: "456sdfs4654564adsfs6fsdfsf"

  }
})

Inside the resulting data, you'll find the sessionId variable which must be used when creating Transacciones or Payment Sources, as explained below.

What is a sessionId?

It's a piece of data that identifies a customer's device and its activity during the purchase process in your site, that Wompi uses to protect your business against fraudulent users.

What is a deviceId?

It is a piece of data that uniquely identifies a user's device in the purchasing process, which Wompi uses to protect you.

Creating Transactions

You must send the sessionId together with the rest of the fields of a Transaction when using the POST /transactions endpoint. For example:

{
  // The `sessionId` obtained on the `initialize` function
  "session_id": sessionId,
  // The deviceID on the `initialize` function
  "customer_data": {
    "device_id": deviceId,
  },
  // Other transaction fields
  "amount_in_cents": 4499,
  "currency": "USD",
  "customer_email": "john.smith@example.com",
  "reference": "2322er3234ed4",
  // Etc...
}

Creating Payment Sources

IMPORTANT: Be aware that, as opposed to transaction, Payment Sources must always be created from the backend and not from the frontend, since the business' private key is used. Therefore, even though you always obtain the sessionId in the frontend, it must first be sent to the backend in order to create a Payment Source.

You must send the sessionId and optional into customer_data device_id together with the rest of the fields of a payment source when using the POST /payment_sources endpoint from the backend:

{
    // The `sessionId` obtained on the `initialize` function
  "session_id": sessionId,
    // The deviceID obtained on the `initialize` function
  "customer_data": {
    "device_id": "string",
    "full_name": "string",
    "phone_number": "+57number"
  },
  // Other payment source fields
  "type": "CARD",
  "token": "tok_prod_1_BBb749EAB32e97a2D058Dd538a608301",
  "customer_email": "john.smith@example.com"
  // Etc...
}

Step by step​

Step 1: Include the library​

Step 2: Initialize the library​

Creating Transactions​

Creating Payment Sources​

Step by step

Step 1: Include the library

Step 2: Initialize the library

Creating Transactions

Creating Payment Sources