Skip to main content

​
Prerequisites

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

​
Sample project

If you want 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 Commerce Web SDK. It is also prepared to handle 3D Secure in case the tokenization is set up 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 Commerce 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 Commerce 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.9.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);
  }
}