Tokenizer

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.

Picture

Simplicity

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

Security

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

Customization

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

Implementation

Step 1 - Add Script Code

You will need a public API key, this key starts with "pub_" - there are two types of key (public and private).  Be sure NOT to share the private (secret) API key (the secret key begins with "api_").  Do not share the private api key, it should only be used in your backend application.

If you are developing locally be sure to set the url parameter in the tokenizer setup or it will attempt to make a request to the url you are on.

<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>