Tokenizer

Overview

The purpose of the Tokenizer API is to provide a javascript implementation that injects hosted payment fields onto a client’s website. By injecting the hosted payment page into an iframe via this library, a client remains outside the scope of PCI while still having full control over the processing of the transaction. Once the sensitive data has been collected and tokenized, you may submit any regular API call exchanging the sensitive information with the token you have received.

TIP

You will need both a public and secret api key, the public api key will start with pub_ and is safe to use on the frontend of your website. The secret api key, should never be shared and should only be used within the backend of your application.

Step 1 - Include the tokenizer library on your website

<script language="javascript" src="URL_GOES_HERE/tokenizer/tokenizer.js"></script>

Step 2 - Frontend integration

Basic Example

// Example Code
var example = new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  container: document.querySelector('#div container'),
  // Callback after iframe is initiated an onload
  onLoad: () => {
    console.log('iframe has loaded')
  },
  // Callback after submission request has been made
  submission: (resp) => {
    console.log(resp)
  }
})

// Example submission
function submit() {
  example.submit() // Use submission callback to deal with response
}

Multiple Payment Types

// Example Code
var example = new Tokenizer({
  apikey: 'key here',
  container: document.querySelector('#div container'),
  submission: (resp) => {
    console.log(resp)
  },
  settings: {
    payment: {
      types: ['card', 'ach'], // Default ['card']
      ach: {
        sec_code: 'web' // Default web - web, ccd, ppd, tel
      }
    }
  }
})

// Example submission
function submit() {
  example.submit() // Use submission callback to deal with response
}

Style Examples

// Example Code
var example = new Tokenizer({
  apikey: 'key here',
  container: document.querySelector('#div container'),
  submission: (resp) => {
    console.log(resp)
  },
  settings: {
    // Styles object will get converted into a css style sheet.
    // Inspect elements to see structured html elements
    // and style them the same way you would in css.
    styles: {
      'body': {
        'color': '#ffffff'
      },
      'input': {
        'color': '#ffffff',
        'border-radius': '8px',
        'background-color': '#ffffff40',
        'border': 'none'
      },

      // Example - style cvv to have full border box
      '.payment .cvv input': {
        'border': 'solid 1px #ffffff',
        'padding-left': '6px'
      }
    }
  }
})

Step 3 - Process the request

Once you have received the token back by calling the form submission, you can use the token to replace a payment object in any of our direct API calls. For example:

Processing a Sale

curl -v -X POST \
  -H "Authorization: APIKEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "sale",
    "amount": 1112,
    "payment_method": {
        "token": "<tokenizer token goes here>"
    }
}'   \
"URL_GOES_HERE/transaction"  

See Transaction Processing for more details

Style examples

Default

Default

Dark Mode

Dark Mode

Purple

Purple

Full

Full