Overview of Helcim.js

Embed payments into your website or app without handling sensitive information. Helcim.js is the ideal solution for developers looking for control over their user experience while reducing security and PCI-DSS scope.

Simply put, Helcim.js allows you to maintain full control over your server, HTML and customer experience, without the security drawbacks usually associated with typical payment gateway integrations. Customers remain on your website, yet sensitive credit card data is never submitted to your server directly.

Technical Overview

Helcim.js is a JavaScript that uses Cross-Origin Resource Sharing (CORS) AJAX to establish a secure connection between the cardholder's web browser and the Helcim API. Once the transaction is complete, Helcim.js submits the HTML form and your website can capture the results in POST (and XML) to access returned card tokens.

We recommend Helcim.js be used to tokenize credit cards, and in conjunction with the Helcim Payment API endpoints, you can achieve full control without the liability of storing and transmitting sensitive cardholder data.

Transaction Flow

Once embedded into your website, the steps below outline the transaction flow created by Helcim.js.

1. The customer enters their card information directly on your website.

2. The customer clicks on "Process".

3. Instead of submitting the form (POST) back to your server immediately, Helcim.js:

   a) Intercepts the submit request.
   b) Retrieves the sensitive cardholder information from the form (using the input field IDs).
   c) Establishes a secure connection between the client's web-browser and the Helcim API.
   d) Tokenizes the credit card information.
   e) Converts the response into hidden input fields on your website's form.
   f) Removes sensitive information from the original credit card input fields.
   g) Submits the form.

4. Your website receives the form (POST) response, containing the transaction response instead of full card data.

5. Your website processes the transaction response and displays an approval or error message to the customer.

API Authentication

Unlike HelcimPay.js, in order to utilize Helcim.js you will need to create both an API access token and a Helcim.js access token.

The Helcim.js token is included in the HTML form elements in your website front-end, and the API access token is stored securely in your backend and sent in the header of your subsequent Payment API calls to ensure only authorized transactions are processed.

Getting Started

To get started using Helcim.js to tokenize card details, you'll want to create your API access token and Helcim.js access token.

1. Review our guide on creating an API access token here.
2. Review our guide on creating a Helcim.js access token here.
3. Configure your websites HTML following the examples outlined here.
4. Review the Helcim.js request and response field documentation.
   1. Request fields
   2. Response fields