{"_id":"@blockchyp/blockchyp-tokenizer","_rev":"5-b5b37afd2e896fc18497f1f8b9afcbfb","name":"@blockchyp/blockchyp-tokenizer","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@blockchyp/blockchyp-tokenizer","version":"1.0.0","description":"BlockChyp Tokenizer","main":"tokenizer.js","scripts":{"build":"eslint src/* && babel src -d dist","prod":"npm run build && browserify dist/global.js -o dist/blockchyp-tokenizer-all.js && uglifyjs dist/blockchyp-tokenizer-all.js -o dist/blockchyp-tokenizer-all.min.js","test":"babel src -d dist && jasmine","dev":"http-server . -p 9000 -c-1","prepare":"npm run prod"},"repository":{"type":"git","url":"git+https://github.com/blockchyp/blockchyp-tokenizer.git"},"keywords":["es6","payments","blockchain"],"author":{"name":"jeffreydpayne"},"license":"MIT","bugs":{"url":"https://github.com/blockchyp/blockchyp-tokenizer/issues"},"homepage":"https://github.com/blockchyp/blockchyp-tokenizer#readme","devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-polyfill":"^6.26.0","babel-preset-latest":"^6.24.1","browserify":"^16.2.2","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-plugin-import":"^2.12.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-standard":"^3.1.0","fs":"0.0.1-security","jasmine":"^3.1.0","jasmine-promises":"^0.4.1","uglify-js":"^3.4.2","http-server":"^0.12.0"},"dependencies":{"babel-runtime":"^6.26.0","cached-path-relative":"^1.0.2","moment":"^2.22.2","npm":"^6.10.1","axios":"^0.19.0","js-base64":"^2.5.1"},"gitHead":"b0415803437e675dc4b06d78d6f278d2654168d2","_id":"@blockchyp/blockchyp-tokenizer@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.11.2","_npmUser":{"name":"jniedrauer","email":"josiah@blockchyp.com"},"dist":{"integrity":"sha512-10C0sY5rSCuDppSjT90TtbZDNuoKOkTDNKIJn19DD1o8F/dRVTji963L7PyMN7xNGEG4z/r+9+ozctbOuJxx2Q==","shasum":"f14ed3f8c47c84a124138968331de03ad952b970","tarball":"https://registry.npmjs.org/@blockchyp/blockchyp-tokenizer/-/blockchyp-tokenizer-1.0.0.tgz","fileCount":13,"unpackedSize":142040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjXOCRA9TVsSAnZWagAAow8P/jmay565A7I18PYtSCJg\n4pFWW5ckX4uIFYny25MddwoER743dSnTYI3QBhC6IAYolYd7DpFL3yhXoV+8\n8BxgK8WoYmaPCVbCmgKOyMHWjR/MP1+vfh5vw3mf0ooMASCC/ct0M5q5/jxx\n9bzlaktjwDKv8KyN+w9pUFSR0XE56PHMUeQY2P59V6rWAPyvH9+3hQyAWIjE\ni09LjLSZ/d5Znk55b44plHOAzqX/qGKkF6yfJX8T6IDpm5/xBx15UKUD3RBy\nG3IqcC8Ywgox7k5Kj0Gza9UXzm5ejjzxwwYdwU/rJyOw40UWw45b3KvRt2yg\ne++dyCxPCKjrKCvC84HbgWxm/K/CqPrhJoa102n6JbLgbmDwrvv9VGUGC23f\nzp5uhX5FnzX+zk2PRXdBmhEsWZxFtMgWW+tnTw3wjqdqFlW1KrFBhtGDLx67\nWmLAh6NR27zCnpqm9oKUBn9iHvx5t0eNgIkAk0dhaUpBuJE+smiUTFmS30mZ\nm+E9BJHQ7DKrKUUnnmQFaKEy1MSFzkn8wfGIP3WqmUwvnMpndv1RzY7ujz6T\nFDxL76D+pZn7k60lcNtcV0ngJBR5ttehTgHjCUYJBEajTJeQY3sTUwPH2U36\nOr1SqoOIf7NYuaUoP7LTWjrz0NJEg9qJXBRWQStabBNj1p6ThsaFqbf2CNXK\ndqke\r\n=o4sX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE77Px05Mp317AqI7yRXIAN68xzbcsZMBATwe73q7NkbAiBTwQOlfRxhyQ36mmHlYY9JnxKqFX6oahxWtOmx0pz2Ug=="}]},"maintainers":[{"name":"jniedrauer","email":"josiah@blockchyp.com"},{"name":"jeffreydpayne","email":"jeff@blockchyp.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blockchyp-tokenizer_1.0.0_1578513870186_0.5635048694020848"},"_hasShrinkwrap":false},"1.0.1":{"name":"@blockchyp/blockchyp-tokenizer","version":"1.0.1","description":"BlockChyp Tokenizer","main":"tokenizer.js","scripts":{"build":"eslint src/* && babel src -d dist","prod":"npm run build && browserify dist/global.js -o dist/blockchyp-tokenizer-all.js && uglifyjs dist/blockchyp-tokenizer-all.js -o dist/blockchyp-tokenizer-all.min.js","test":"babel src -d dist && jasmine","dev":"http-server . -p 9000 -c-1","prepare":"npm run prod"},"repository":{"type":"git","url":"git+https://github.com/blockchyp/blockchyp-tokenizer.git"},"keywords":["es6","payments","blockchain"],"author":{"name":"jeffreydpayne"},"license":"MIT","bugs":{"url":"https://github.com/blockchyp/blockchyp-tokenizer/issues"},"homepage":"https://github.com/blockchyp/blockchyp-tokenizer#readme","devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-polyfill":"^6.26.0","babel-preset-latest":"^6.24.1","browserify":"^16.2.2","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-plugin-import":"^2.12.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-standard":"^3.1.0","fs":"0.0.1-security","jasmine":"^3.1.0","jasmine-promises":"^0.4.1","uglify-js":"^3.4.2","http-server":"^0.12.0"},"dependencies":{"babel-runtime":"^6.26.0","cached-path-relative":"^1.0.2","moment":"^2.22.2","npm":"^6.10.1","axios":"^0.19.0","js-base64":"^2.5.1"},"gitHead":"b1ba2c76eebb97e740f730b1bf105a54136d0d6b","_id":"@blockchyp/blockchyp-tokenizer@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"9.11.2","_npmUser":{"name":"jniedrauer","email":"josiah@blockchyp.com"},"dist":{"integrity":"sha512-5P4hldp1ayaNcHEoom35aj2eRdTjSJqPwi8P+Xlo4JCcp0QzidsnOhD0r96oisUMycPzokISDGACPFI+p/kaaQ==","shasum":"3a514b4c07e83451b3c221cceb478c46c4bdcb46","tarball":"https://registry.npmjs.org/@blockchyp/blockchyp-tokenizer/-/blockchyp-tokenizer-1.0.1.tgz","fileCount":13,"unpackedSize":142037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDlLCRA9TVsSAnZWagAAnlIP/RO1mrJaMZJPZ68Df8i2\n+iQTN6wJCkiibPp7OWvvqobb62Pq3iOykhxUUesiI/t513ViRAP4zcOnucgP\nHz4qs6r8NdewllFOpcs97BVKinTLgPT+An/vWufSSoPhBfJSSZqtXYKyX2nc\nwvSRWKqtnkVX601ng/6rUwDkk0lPNBy77kkvlwB/nz0Dyu2Q4EcztmoFcI3M\n956g8GN8i63JZtdrAvXrG+wGkHCI6EAEafSKkRSZjNg0+iw+wD6gh+OSz1w3\nAcxGpgri/n0G4BLwRPo8Axuj99JWbeVEeJNBkU0A3LKV37XziHy5MMhtNlin\nAeHJrwPr7cou9p/D0KbNm58kVpLSG36mrS/DF7fJhF2EdjRhPPwN5VSoWoK9\nTPmS8KJNlRC0oYlQctiPIah3TueNAHduvHUgaMBBvsQySl5DGyiMoQh9ygyL\npCWOt0B1YknaHPIrZjqjVFealLj1VASFLmWvQ35WNZMA+WI5wTZHQhVzFN9w\nC9zimtgJcWWqZfs/DcpYC5ENynRzqnP0ojKAqbO7KrQGAFAJUhbYauZgMklu\nYrJL3gBaTLXuDJb3ImHR9mPexLAc/kBvUkyQn7+KznipzDL9D87Y3nH7Zjdg\nagnqhmdmkzYEPNA770EiKiVcy5F/OuWCi62HfnKXaRsLeohHV0Q3dB3SGplF\nxkCK\r\n=liS6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWqaZA2qSq0pbUdaNYwdeIjNjVsUgBNMDERCad1+Z13AIgeBTC6kpT8bCb0yXT0e219NXJwR0r9zs3Qn00p45Cbzg="}]},"maintainers":[{"name":"jniedrauer","email":"josiah@blockchyp.com"},{"name":"jeffreydpayne","email":"jeff@blockchyp.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blockchyp-tokenizer_1.0.1_1604335947092_0.5573567219217261"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-08T20:04:30.097Z","1.0.0":"2020-01-08T20:04:30.342Z","modified":"2023-10-31T16:54:45.619Z","1.0.1":"2020-11-02T16:52:27.279Z"},"maintainers":[{"email":"devops@blockchyp.com","name":"devops-blockchyp"},{"email":"curtis@blockchyp.com","name":"curtisparker"},{"email":"jeff@blockchyp.com","name":"jeffreydpayne"}],"description":"BlockChyp Tokenizer","homepage":"https://github.com/blockchyp/blockchyp-tokenizer#readme","keywords":["es6","payments","blockchain"],"repository":{"type":"git","url":"git+https://github.com/blockchyp/blockchyp-tokenizer.git"},"author":{"name":"jeffreydpayne"},"bugs":{"url":"https://github.com/blockchyp/blockchyp-tokenizer/issues"},"license":"MIT","readme":"# The BlockChyp Web Tokenizer\n\n[![Build Status](https://circleci.com/gh/blockchyp/blockchyp-tokenizer/tree/master.svg?style=shield)](https://circleci.com/gh/blockchyp/blockchyp-tokenizer/tree/master)\n[![NPM](https://img.shields.io/npm/v/@blockchyp/blockchyp-tokenizer)](https://www.npmjs.com/package/@blockchyp/blockchyp-tokenizer)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/blockchyp/blockchyp-tokenizer/blob/master/LICENSE)\n\nThis is a simple Javascript library intended to connect public e-commerce or\npayment pages to BlockChyp in a secure way that minimizes PCI scope.\n\nThis library sends card data directly to BlockChyp from the browser and returns\na token that can then be used to perform subsequent server side authorizations. It prevents merchants and e-commerce providers from handling and being responsible for PCI scoped cardholder data.\n\nDevelopers can take advantage of this functionality in two different ways:\n\n**Cross Origin IFrame:** The most secure and popular option is to allow BlockChyp to render the\ncard data input controls. This will put the sensitive card data entry\nfields into a cross-origin iframe hosted by BlockChyp, which means that\ncard data input controls are not accessible from the parent payment page.\nAccording to the PCI Council, developers using this method are eligible for\nSAQ A (self assessment) and do not require a fully validated ROC (record of compliance).\n\n**Direct Tokenization:** The downside of the iframe based approach is that merchants and e-commerce\nproviders have limited control of the user experience. While BlockChyp's iframe based tokenization does allow for custom CSS and a fair degree of\ncustomization, some developers may wish for more fine grained control of\nhow the input control looks.\n\nDevelopers can use their own forms and input controls and submit the\ncard data to BlockChyp's tokenizer directly, but it comes with additional\nsecurity and PCI compliance burdens. Developers using their\nown forms and input controls must carefully guard against malicious JavaScript\ncode running on their pages, since such Javascript will have access to the\nDOM and all input elements. Developers using direct Javascript tokenization\nwithout iframes are also required to retain a QSA and complete a ROC if their\ntransaction volume is above the usual self assessment levels.\n\nMore detail on PCI compliance rules for each scenario can be found in [Best Practices for E-Commerce](https://www.pcisecuritystandards.org/pdfs/best_practices_securing_ecommerce.pdf), a\nsupplement to the core PCI security standard provided by the PCI Council.\n\n## Installing The Tokenizer\n\nThe tokenizer can be obtained directly from BlockChyp or via NPM.\n\n### NPM\n\nIf you're using NPM, the following command will add the BlockChyp Tokenizer as\na project dependency.\n\n```\nnpm install @blockchyp/blockchyp-tokenizer --save\n```\n\n### Manual Installation\n\nYou can also drop the tokenizer directly into web pages by pasting in the following script tag:\n\n```\n\n```\n\n## Using The Tokenizer\n\nRegardless of your integration and installation methods, you'll need a tokenizing key\nbefore you can tokenize payment cards. In the BlockChyp dashboard, under API Credentials, click the Tokenizing Keys tab and generate a new key. You'll see\na popup form like this:\n\n![Tokenizing Key Generation](docs/images/tokenizing-key-example.png)\n\nAdd your web site as a referer, copy the Tokenizing Key to your configuration, and save the key. You won't be able to see the full tokenizing key ever again. In\nproduction, we recommend enabling delete protection.\n\n### IFrame Based Tokenization (Recommended)\n\nIf you've wisely chosen to use the outsourced iframe approach, you'll need to\ncreate a form with a placeholder DIV for the payment input. You should also\nadd a cardholder name input to your form that you manage yourself. Consider\nthe following example:\n\n```\n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n```\n\nCreate a DIV wherever you'd like the input control. Assign the DIV a unique ID\nof your choosing and optionally provide a second DIV whose id should be the same\nas that of the payment input appended with '-error'.\n\n#### IFrame Rendering and Tokenization (Conventional Web Page)\n\nIf your application uses a conventional web page, call `render()` when your page\nloads to initalize the input control and `tokenize()` when you're ready to tokenize\nthe card. The example below shows how this might work with jQuery.\n\njQuery Example:\n```\n$( document ).ready(function() {\n // options not required\n var options = {\n // if true, will add postal code to the secure input\n postalCode: false,\n\n // optional name of your front end framework (i.e. 'bootstrap4', 'boostrap3', 'materialize', 'foundation')\n // The input will be rendered for best compatibility with your framework\n framework: 'bootstrap4'\n };\n // second argument is true if you're using test creditials\n tokenizer.render('', true, 'secure-input', options);\n});\n\nfunction submitPaymentForm(event) {\n\n event.preventDefault();\n\n var req = {\n test: true,\n transactionRef: 'YOUR TRANSACTION OR TENDER ID',\n postalCode: $('#postalCode').val(), //if you have a seperate postal code input\n cardholderName: $('#cardholder').val()\n }\n\n tokenizer.tokenize('', req)\n .then(function (response) {\n console.log(JSON.stringify(response.data));\n console.log(\"Token: \" + response.data.token);\n //add your real form submission code here\n })\n .catch(function (error) {\n console.log(error);\n })\n\n}\n```\n\nSample JSON Response:\n```\n{\n \"success\": true,\n \"error\": \"Approved\",\n \"responseDescription\": \"Approved\",\n \"transactionId\": \"M3X3RZRIFAI6VO4ENSLM7WZLHE\",\n \"transactionRef\": \"YOUR TRANSACTION OR TENDER ID\",\n \"token\": \"USAXQBVT3IKRZQ5XQUASZEXISE\",\n \"entryMethod\": \"ECOM\",\n \"paymentType\": \"VISA\",\n \"maskedPan\": \"************1111\",\n \"expMonth\": \"12\",\n \"expYear\": \"25\"\n}\n```\n\n`render()` will draw the input form with your preferences and add any\npayment errors to the error DIV, if defined.\n\nBy default the payment input is optimized for Bootstrap 4 'form-control' inputs.\nIf you use a different front end framework, you can declare it as an options parameter. As of this writing, the tokenizer supports 'bootstrap4', 'bootstrap3',\n'materialize', and 'foundation'. You can also fully customize the iframe's CSS. (More on that later.)\n\nThe input can optionally prompt for postal codes by adding the `postalCode` flag\nto options.\n\n`tokenize()` will validate and submit the payment information to the BlockChyp\ngateway for tokenization. It returns a promise with a token and all the usual\nmeta data you might need.\n\n#### IFrame Rendering and Tokenization (ES6 / Single Page Applications)\n\nIf you're using a single page application framework like React or Vue.js,\nyou'll want to go about this a bit differently.\n\nThe example below shows how this would work with an ES6 framework like Vue.js.\n\nThe form below shows a minimal input form template for Vue.js.\n\n```\n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n```\n\nThe code below shows how rendering and tokenization would work with Vue.js.\n```\n\n```\n\n#### Custom CSS\n\nThe options framework property is intended to reduce the number of situations\nwhere using custom CSS for the payment input might be necessary, but this\nisn't a complete solution. Some of you will need more fine grained control over\nyour input rendering.\n\nThe options object has a style property for use in situations where custom\nCSS is necessary. Custom CSS is passed into the options object as a Javascript\nmap as shown in the example below. This example includes most of the default\nCSS for Bootstrap 4 which can be tweaked for custom scenarios.\n\n```\n var options = {\n framework: 'none',\n style: {\n '#secure-input': {\n 'font-size': '14pt',\n 'min-width': '345px'\n },\n '#secure-input input': {\n 'border': '0',\n 'font-size': '14pt'\n },\n '#secure-input input:focus': {\n 'outline-width': '0'\n },\n '#secure-input .panInput': {\n 'margin-left': '3px',\n 'margin-right': '3px',\n 'min-width': '140px'\n },\n '#secure-input .dateInput': {\n 'width': '35px'\n },\n '#secure-input .cvvInput': {\n 'width': '40px',\n 'margin-left': '3px'\n },\n '#secure-input .postalCodeInput': {\n 'width': '100px',\n 'margin-left': '3px'\n },\n '.placeholderText': {\n 'font-weight': 'bold',\n 'color': '#777777'\n },\n '.cardIcon': {\n 'color': '#777777',\n 'font-size': '18pt'\n },\n '#cardImage': {\n 'max-height': '24px'\n }\n }\n }\n\n tokenizer.render('', true, 'secure-input', options);\n\n```\nCustom CSS can extend and override the existing CSS for a given front end\nframework or style the input completely from scratch. Setting framework to\n'none' will remove all framework CSS from the input element and let you start\nfrom scratch.\n\nNote that any CSS that references external files or images will be ignored.\n\n### Direct Tokenization (Not Recommended, Increases PCI Scope)\n\nThis method bypasses the cross-origin iframe and allows you to pass\ncard data directly into the tokenizer.\n\n**Note:** This method does not protect payment forms from malicious JavaScript\nand may require a fully validated Record of Compliance for PCI Certification.\n\nTo use this method of tokenization, create a form with all the usual payment\nfields as shown in the following jQuery based example:\n\n```\n
\n
\n \n \n
\n \n /\n \n \n \n
\n
\n
\n \n \n
\n \n
\n```\n\nThe form submission handler is largely the same as for an iframe based form, with the exception of adding card data manually to the request.\n\njQuery Example:\n```\nfunction submitPaymentForm(event) {\n\n event.preventDefault();\n\n var req = {\n test: true,\n transactionRef: 'YOUR TRANSACTION OR TENDER ID',\n postalCode: $('#postalCode').val(), //if you have a seperate postal code input\n cardholderName: $('#cardholder').val(),\n pan: $('#pan').val(),\n expMonth: $('#expMonth).val(),\n expYear: $('#expYear).val(),\n cvv: $('#cvv').val()\n }\n\n tokenizer.tokenize('', req)\n .then(function (response) {\n console.log(JSON.stringify(response.data));\n console.log(\"Token: \" + response.data.token);\n //add your real form submission code here\n })\n .catch(function (error) {\n console.log(error);\n })\n\n}\n```\n\nSample JSON Response:\n```\n{\n \"success\": true,\n \"error\": \"Approved\",\n \"responseDescription\": \"Approved\",\n \"transactionId\": \"M3X3RZRIFAI6VO4ENSLM7WZLHE\",\n \"transactionRef\": \"YOUR TRANSACTION OR TENDER ID\",\n \"token\": \"USAXQBVT3IKRZQ5XQUASZEXISE\",\n \"entryMethod\": \"ECOM\",\n \"paymentType\": \"VISA\",\n \"maskedPan\": \"************1111\",\n \"expMonth\": \"12\",\n \"expYear\": \"25\"\n}\n```\n","readmeFilename":"README.md"}