Skip to main content

Get Started

This guide will help you get started with Hellgate® in order to tokenize cardholder data in compliance with the Payment Card Industry Data Security Standard (PCI DSS). We will walk you through a sample integration of a web project using our Web SDK.

Prerequisites​

Before you start, you need to have a Hellgate® account. If you don't have one yet, you can sign up here. Once you have an account in place, you need to setup an API key, which you can setup in your Hellgate® settings section.

Sample Project​

If you want to have a quick start, you can use our sample project as a reference. The sample project is a simple web application that demonstrates how to tokenize cardholder data using the Hellgate® Web SDK. It is also prepared to handle 3D Secure in case the tokenization is setup with Identification & Verification (ID&V) enabled.

You can find the sample project on our GitHub.

Implementation Walkthrough​

The following sections walk you through the sample integration of a web project using the Hellgate® Web SDK. It is intentionally kept simpler than the sample repository, but we keep enough references to understand both.

Step 1 - Setup the Project​

This sample integration will require both server-side and client-side implementation.

  • On the server-side, you will need to create a session to tokenize cardholder data using the Web SDK.
  • On the client-side, you will make use of the session (which is a client-sharable secret) to initialize the Web SDK and request a Hellgate® token.

Project Template​

You can use the following template to get started with an implementation.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Tokenization</title>

    <script src="https://sdk.hellgate.io/web/v3.4.0/hellgate-sdk.min.js"></script>
    <script type="module" src="./index.js" defer></script>

  </head>

  <body>
    <main>
      <div class="form-input" id="card-form"></div>
      <div id="cardholderName" class="form-input"></div>

      <button id="submit-button">Submit</button>
    </main>

  </body>

</html>

Step 2 - Create a Session​

In order to tokenize cardholder data, you need to create a session on the server-side. This session will be used to initialize the Web SDK on the client-side.

app.get('/config', async (_: Request, res: Response): Promise<void> => {
  const headers = new Headers();
  headers.set('Content-Type', 'application/json');
  headers.set('Accept', 'application/json');
  headers.set('X-API-KEY', 'YOUR_API_KEY');

  const request = new Request(
    process.env.HELLGATE_BACKEND + '/tokens/session',
    {
      method: 'POST',
      headers: headers,
    }
  );

  const response = await fetch(request);
  const data = await response.json();

  if (!response.ok) {
    res.status(response.status).send(data);
    return;
  }

  const { session_id } = data;

  res.send({
    session_id: session_id
  });
});

Step 3 - Render the Form​

Once you have the session, you can render the form on the client-side.

document.addEventListener('DOMContentLoaded', async () => {
  const { session_id } = await fetchConfig();
  if (!session_id) return;

const { Hellgate } = window;
const client = await Hellgate.init(session_id);
const cardHandler = client.use('CARD');

const cardForm = await cardHandler.createForm({ style: cardFormStyle });
const cardHolderField = cardHandler.createTextField({
placeholder: 'Cardholder Name',
});

await Promise.all([
cardForm.mount('#card-form'),
cardHolderField.mount('#cardholderName'),
]);

const submitButtonEl = document.getElementById('submit-button');
submitButtonEl.addEventListener('click', () => handleSubmit(cardHandler, cardHolderField));
});

Step 4 - Tokenize Cardholder Data​

When the form is submitted, you can tokenize the cardholder data using the Web SDK.

async function handleSubmit(cardHandler, cardholderField) {
  try {
    const result = await cardHandler.process({
      cardholder_name: cardHolderField,
    });
    console.log(result);
  } catch (e) {
    console.log(e.message);
  }
}