Tokenizer

Securely tokenize user payments

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.

Example

Simplicity

With a few lines of code you can take customer payments on your website

Security

Tokenizer creates a secure iframe that seperates your website from the processing of users payment information into a vault system with a returned token hash

Customizability

Even though we host and provide the form you can pass your own css styles to tokenizer. See styles

Step 1 - Add Script Code

TIP

You will need a public api key, the public api key will start with pub_ and is safe to use on the frontend of your website.

WARNING

If you're developing locally be sure to set the url to your api endpoint. Otherwise it will attempt to make a request to the url you are on.

WARNING

The secret api key, should never be shared and should only be used within the backend of your application.

<html>
  <head>
    <!-- Add tokenizer.js file to head -->
    <script language="javascript" src="URL_GOES_HERE/tokenizer/tokenizer.js"></script>

    <!-- Add script tag -->
    <script>
      var example = new Tokenizer({
        url: '', // Optional - Only needed if domain is different than the one your on, example: localhost
        apikey: 'pub_XXXXXXXXXXXXXX',
        container: document.querySelector('#form'),
        // Callback after submission request has been made
        // See Advanced -> Methods for breakdown of specific fields
        submission: (resp) => { console.log(resp) }
      })
    </script>
  </head>
  <body>
    <!-- Add div with id for where iframe form will go -->
    <div id="form"></div>

    <!-- Add button to call submit -->
    <button onclick="example.submit()">Submit</button>
  </body>
</html>

Default Output

Default

Step 2 - Process with token

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

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

Advanced

Multiple Payment Types

Tokenizer currently supports two payment types credit/debit cards and ach. By default only card is enabled, to enable ach add it to the payment types

var example = new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  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
      }
    }
  }
})

Settings

Tokenizer allows the you to easy take in user, billing and shpping information within the same form. This info will be pased back to the submission callback in raw values.

TIP

Tokenizer DOES NOT tokenize user, shipping or billing information! It only tokenizes payment info

var example = new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  container: document.querySelector('#div container'),
  submission: (resp) => { console.log(resp) },
  settings: {
    payment: {
      showTitle: true,
      showExpDate: true,
      showCVV: true
    },
    user: {
      showInline: true,
      showName: true,
      showEmail: true,
      showPhone: true,
      showTitle: true
    },
    shipping: {
      show: true,
      showTitle: true
    },
    billing: {
      show: true,
      showTitle: true
    }
  }
})

Methods

var example = new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  container: document.querySelector('#div container'),
  // Callback after submission request has been made
  submission: (resp) => {
    // Figure out what response you got back
    switch(resp.status) {
      case 'success':
        // Successful submission
        console.log(resp.token)

        // If you had user info
        if (resp.user) { console.log(resp.user) }

        // If you had billing info
        if (resp.billing) { console.log(resp.billing) }
        
        // If you had shipping info
        if (resp.shipping) { console.log(resp.shipping) }
        break;
      case 'error':
        // Encountered an error while performing submission
        console.log(resp.message)
        break;
      case 'validation':
        // Encountered form validation specific errors
        console.log(resp.invalid)
        break;
    }
  },

  // Callback after iframe is initiated an onload
  onLoad: () => { console.log('iframe has loaded') },
})

// Set expiration date on card payment
example.setExpDate('09/12')

// Submit payment
example.submit()

Single Page Apps

Tokenizer is currently setup to output to UMD(univeral module loader). If you hare having difficulty configuring webpack to get the file imported. You can always import into your main file and just refer to it as if it was a window variable.

// index.js - add to your main file
import './tokenizer.js' // tokenizer will add to window.Tokenizer allowing you to globally use it

new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  container: document.querySelector('#div container')
})

Style Examples

Tokenizer allows the passing of css information to style form within the iframe

// Example Code
var example = new Tokenizer({
  apikey: 'pub_XXXXXXXXXXXXXX',
  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'
      }
    }
  }
})

Default

Default

Dark Mode

Dark Mode

Purple

Purple

Full

Full