{"_id":"@astropay/tokenizer-sdk","_rev":"6-a3b690821b900a81eaf4bc3e5033e691","name":"@astropay/tokenizer-sdk","dist-tags":{"latest":"1.1.3"},"versions":{"1.1.0":{"name":"@astropay/tokenizer-sdk","version":"1.1.0","author":{"url":"https://developers.astropay.com/help","name":"AstroPay","email":"support@astropay.com"},"license":"UNLICENSED","_id":"@astropay/tokenizer-sdk@1.1.0","maintainers":[{"name":"astropay","email":"it_services@astropay.com"}],"contributors":[{"name":"AstroPay IT","email":"it_services@astropay.com"}],"nx":{},"dist":{"shasum":"7e1a09040f37681fe06218b6fe88454ef0990ac4","tarball":"https://registry.npmjs.org/@astropay/tokenizer-sdk/-/tokenizer-sdk-1.1.0.tgz","fileCount":6,"integrity":"sha512-wylutzHdmg8t2/P6LwTjBiT2Gu0h3RS+7cx7OiZlGBVO4TALzxdulBXEHL7tvA2HzZxNhw+7ImF9ttZORqL5hg==","signatures":[{"sig":"MEUCIQCic9xaERSe+TAjazLDXYXurQf5ZBesQaAe0jxC58Y4UwIgZnhXU+ySZwVndzSvGjmtDGUIwEsHk3E+oa8dVXGa6Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79426},"main":"dist/index.min.js","types":"dist/types/index.d.ts","module":"dist/index-es.min.js","engines":{"npm":">=8.3","node":">=18"},"scripts":{"lint":"eslint --quiet src/**/*.ts","test":"echo Testing ${npm_package_name}","build":"npm run build:prod","clean":"rimraf dist *.tgz","build:all":"concurrently 'npm:build:pkg' 'npm:build:types'","build:pkg":"rollup -c rollup.config.js","build:tst":"cross-env NODE_ENV=test npm run build:all","build:prod":"cross-env NODE_ENV=production npm run build:all","clean:deps":"rimraf -rf node_modules package-lock.json yarn.lock","build:types":"tsc -p tsconfig.types.json"},"_npmUser":{"name":"astropay","email":"it_services@astropay.com"},"repository":{"url":"https://git-codecommit.us-east-1.amazonaws.com/v1/repos/tokenizer-web","type":"git"},"_npmVersion":"10.7.0","description":"Official AstroPay client for easy frontend integration to Tokenizer","directories":{},"_nodeVersion":"18.20.4","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"swc":"^1.0.11","jest":"^29.7.0","tslib":"^2.5.0","rimraf":"^5.0.5","rollup":"^4.21.2","ts-jest":"^29.2.5","ts-node":"^10.9.2","fs-extra":"^11.2.0","cross-env":"^7.0.3","typescript":"^5.2.2","@types/jest":"^29.5.12","@types/node":"^18.19.47","concurrently":"^8.2.2","rollup-plugin-swc":"^0.2.1","@rollup/plugin-terser":"^0.4.4","jest-environment-jsdom":"^29.7.0","@rollup/plugin-commonjs":"^26.0.1","rollup-plugin-obfuscator":"^1.1.0","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/tokenizer-sdk_1.1.0_1726782901441_0.9834217000073024","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@astropay/tokenizer-sdk","version":"1.1.3","description":"Official AstroPay client for easy frontend integration to Tokenizer","license":"UNLICENSED","repository":{"type":"git","url":"https://git-codecommit.us-east-1.amazonaws.com/v1/repos/tokenizer-web"},"author":{"name":"AstroPay","email":"support@astropay.com","url":"https://developers.astropay.com/help"},"contributors":[{"name":"AstroPay IT","email":"it_services@astropay.com"}],"keywords":["astropay","credit card","debit card","tokenizer","tokenization","payment","online payment"],"main":"dist/index.min.js","module":"dist/index-es.min.js","types":"dist/types/index.d.ts","scripts":{"build":"npm run build:prod","build:tst":"cross-env NODE_ENV=test npm run build:all","build:prod":"cross-env NODE_ENV=production npm run build:all","build:all":"concurrently 'npm:build:pkg' 'npm:build:types'","build:pkg":"rollup -c rollup.config.js","build:types":"tsc -p tsconfig.types.json","lint":"eslint --quiet src/**/*.ts","clean":"rimraf dist *.tgz","clean:deps":"rimraf -rf node_modules package-lock.json yarn.lock","test":"echo Testing ${npm_package_name}"},"engines":{"node":">=18","npm":">=10.7"},"dependencies":{},"devDependencies":{"@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@types/jest":"^29.5.12","@types/node":"^18.19.47","concurrently":"^8.2.2","cross-env":"^7.0.3","fs-extra":"^11.2.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","rimraf":"^5.0.5","rollup":"^4.21.2","rollup-plugin-obfuscator":"^1.1.0","rollup-plugin-swc":"^0.2.1","ts-jest":"^29.2.5","ts-node":"^10.9.2","tslib":"^2.5.0","typescript":"^5.2.2"},"nx":{},"_id":"@astropay/tokenizer-sdk@1.1.3","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"integrity":"sha512-NcxSJFO/rdfuFrbjdhT4QwgI8IuYPO7jAvS3+q1x2ZOiSMRKM52897jWuXzoaK3nEAxFbJYwWUcYvWSB3iU3bw==","shasum":"0d7e9551f1cea1aba8ef15fa79817e8d5cedbec8","tarball":"https://registry.npmjs.org/@astropay/tokenizer-sdk/-/tokenizer-sdk-1.1.3.tgz","fileCount":6,"unpackedSize":117738,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAt2s0cXPvpzqAbKaJVfpYWc7dFNG0Gw5vVOZrLZ/Kb+AiEA4fg+uNMZ0r6kfrZRXz7vFV23QKvgCiEe4rCtI11Z16k="}]},"_npmUser":{"name":"astropay","email":"it_services@astropay.com"},"directories":{},"maintainers":[{"name":"astropay","email":"it_services@astropay.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tokenizer-sdk_1.1.3_1732819103842_0.13675185833686254"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-19T21:55:01.342Z","modified":"2024-11-28T18:38:24.234Z","1.0.0":"2024-09-02T21:09:02.525Z","1.1.0":"2024-09-19T21:55:01.647Z","1.1.2":"2024-11-12T18:42:19.647Z","1.1.3":"2024-11-28T18:38:24.038Z"},"author":{"name":"AstroPay","email":"support@astropay.com","url":"https://developers.astropay.com/help"},"license":"UNLICENSED","repository":{"type":"git","url":"https://git-codecommit.us-east-1.amazonaws.com/v1/repos/tokenizer-web"},"description":"Official AstroPay client for easy frontend integration to Tokenizer","contributors":[{"name":"AstroPay IT","email":"it_services@astropay.com"}],"maintainers":[{"name":"astropay","email":"it_services@astropay.com"}],"readme":"# AstroPay Tokenizer SDK for JavaScript\n\n![AstroPay](https://getapp.astropay.com/img/astropay/2023/logo-black.svg)\n\n## **Official AstroPay Tokenizer SDK for easy product integrations**\n\n[npm]: https://img.shields.io/npm/v/@astropay/tokenizer\n[npm-url]: https://www.npmjs.com/package/@astropay/tokenizer\n[size]: https://packagephobia.now.sh/badge?p=@rastropay/tokenizer\n[size-url]: https://packagephobia.now.sh/result?p=@astropay/tokenizer\n[prettier]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg\n[prettier-url]: https://github.com/prettier/prettier\n[typescript]: https://img.shields.io/npm/types/typescript.svg\n[typescript-url]: https://www.typescriptlang.org\n[downloads]: https://img.shields.io/npm/dm/@astropay/tokenizer.svg\n[downloads-url]: https://www.npmjs.com/package/@astropay/tokenizer\n\n[![npm][npm]][npm-url]\n[![downloads][downloads]][downloads-url]\n[![size][size]][size-url]\n[![typescript][typescript]][typescript-url]\n[![prettier][prettier]][prettier-url]\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Proposal](#proposal)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Usage](#usage)\n  - [Initialization](#initialization)\n  - [Methods](#methods)\n    - [Create secure component](#create)\n    - [Render secure component](#render)\n    - [Create copy button](#copy)\n    - [Render copy button](#to-render-copy-button)\n    - [Unmount components](#teardown)\n  - [Events](#events)\n- [Support](#support)\n- [License](#license)\n\n## Overview\n\nThe AstroPay Web Tokenizer SDK for JavaScript is a powerful tool designed to facilitate easy integration of AstroPay's secure payment solutions into your web applications. This SDK provides a streamlined way to tokenize and reveal sensitive payment information, ensuring that your transactions are both secure and efficient.\n\n## Proposal\n\nThe primary goal of this SDK is to provide developers with a simple yet robust method to integrate payment tokenization into their products. By using this SDK, developers can easily create and manage secure components for handling payment data, thereby reducing the complexity and overhead associated with PCI compliance.\n\n## Getting Started\n\n### Prerequisites\n\nTo use this SDK, you'll need the following:\n\n- [LTS](https://github.com/nodejs/Release) Node version (v16 or higher)\n- npm or yarn\n\n### Installation\n\nThe Astropay Tokinizer Web SDK can be added to your project in two ways:\n\n- Directly in the web application in a `script` tag or as an `import`\n- As part of your project build as a library imported from [NPM](https://www.npmjs.com/package/@astropay/tokenizer)\n\nTo benefit from the latest features and patches released by [Astropay](https://astropay.com), more security and minimize the size of the script used, it is highly recommended to use an integration method that leverages the Astropay Tokenizer CDN, as detailed in the following sections.\n\n**Note** that while Astropay Tokenizer hosts the CDN and ensures the script availability at runtime, any project using the Astropay Web Tokenizer SDK library from NPM would require its hosting.\n\n### Direct CDN integration\n\nThe quickest and simplest way to integrate the Astropay Tokenizer Web SDK is to use the Astropay hosted library.\n\nThe version number you subscribe to can vary, depending on your needs:\n\n- subscribing to a major release (e.g. `v1`) means Tokenizer will update to the latest available patch and minor release\n- subscribing to a minor level release (e.g. `v1.1`) means Tokenizer will update to the latest available patch release\n- subscribing to a specific patch release (e.g. `v1.1.2`) will fix the library files to that SDK release\n\n### Importing the SDK in an html `script` tag\n\n```html\n<!-- \n Replace \"<version>\" with the actual Astropay Tokenizer Web SDK \n  version do you want to use, example: v1.0.0 \n-->\n  <script\n    src=\"https://tokenizer-web.astropay.com/tokenizer-sdk/<version>/astropay-tokenizer.min.js\"\n    integrity=\"sha256-0IZ4FGb7Sl8EPFgYoSTsxIrPhtJL2Bfa3El0wZgP/KU=\"\n    crossorigin=\"anonymous\"\n  ></script>\n```\n\n```javascript\nconst APTokenizer = window.APTokenizer;\n```\n\n### Integrating with an NPM package\n\nThe npm Registry is a public collection of packages of open-source code for Node.js, front-end web apps, mobile apps, robots, routers, and countless other needs of the JavaScript community.\nUsing your favorite package manager, install `@astropay/tokenizer` package.\n\n```bash\nnpm install @astropay/tokenizer\n```\n\nor\n\n```bash\nyarn add @astropay/tokenizer\n```\n\nThe `@astropay/tokenizer` package by default, be connected to the Astropay CDN. In addition to the benefits of using a CDN and the library being directly in your build process, core functions will also be typed when used with [Typesript](https://www.typescriptlang.org/).\n\n### Importing the SDK with a JavaScript `import` directive\n\nThe library can also be invoked directly within an object or component:\n\n```javascript\n// ES6 module import\nimport APTokenizer from '@astropay/tokenizer';\n\n// commonjs style require\nvar APTokenizer = require('@astropay/tokenizer')\n```\n\n**Note**: The library is Browser only, it does not support the Node Context.\n\n## Usage\n\n### Initialization\n\nInitialization\nTo load the Astopay Web Tokenizer, add an empty HTML element for the secure element interface to mount itself on:\n\n```html\n<div id=\"secure-card\"></div>\n```\n\n```javascript\nconst APRevealer = APTokenizer.initRevealer({\n  environment: \"sandbox\",\n  version: \"latest\",\n});\n```\n\n### Methods\n\n### `create`\n\nCreate the secure frame to be used for revealing content.\n\n```javascript\nconst fieldFrame = Tokenizer.create({ \n  name: \"<FIELD_NAME>\", \n  token: \"<SECRET_TOKEN>\", \n  auth: \"<ACCESS_TOKEN>\",\n  formatters: [\n            Tokenizer.formatters.DASH_14,\n            Tokenizer.formatters.DASH_15,\n            Tokenizer.formatters.DASH_16,\n          ],\n});\n```\n\n#### Parameters of `create`\n\n|Parameter | Type   | Required | Description                             |\n|-----------|--------|----------|-----------------------------------------|\n| name      | _string_ | _*`required`*_ | The name of the field to reveal.        |\n| token     | _string_ | _*`required`*_ | The secret token for authentication.    |\n| auth      | _string_ | _*`required`*_ | The access token for authorization.     |\n| formatters| _array_  | optional | An array of formatters to apply to the value before rendering. |\n\n### Formatters\n\nHas to be an array of objects with `strategy` and `params` keys. The\n`params` key is an object with the three keys `search`, `replacer`, and `count`. The `strategy` key is an string, now we support 'replace' only.\n\n- here is an example of a formatter object:\n\n```json\n{\n  \"strategy\": \"replace\",\n  \"params\": {\n    \"search\": \"^(\\\\d{4})(\\\\d{4})(\\\\d{4})(\\\\d{4})$\",\n    \"replacer\": \"$1-$2-$3-$4\",\n    \"count\": 0\n  }\n}\n```\n\n**Note**: We strongly recomment use the predefined values inside the `Tokenizer` instance. Example of use [here](#create)\n\n#### Predefined formatters\n\n| Key                   | Strategy | Search Pattern                        | Replacer       | Count |\n|-----------------------|----------|---------------------------------------|----------------|-------|\n| **DASH_16**           | replace  | ^(\\d{4})(\\d{4})(\\d{4})(\\d{4})$        | `$1-$2-$3-$4`  | 0     |\n| **DASH_15**           | replace  | ^(\\d{4})(\\d{6})(\\d{5})$               | `$1-$2-$3`     | 0     |\n| **DASH_14**           | replace  | ^(\\d{4})(\\d{6})(\\d{4})$               | `$1-$2-$3`     | 0     |\n| **SPACE_16**          | replace  | ^(\\d{4})(\\d{4})(\\d{4})(\\d{4})$        | `$1 $2 $3 $4`  | 0     |\n| **SPACE_15**          | replace  | ^(\\d{4})(\\d{6})(\\d{5})$               | `$1 $2 $3`     | 0     |\n| **SPACE_14**          | replace  | ^(\\d{4})(\\d{6})(\\d{4})$              | `$1 $2 $3`     | 0     |\n| **COPY_NUMBER**          | replace  | ' \\|-'              | `''` (_empty string_)    | 0     |\n\n### `render`\n\nRenders the frame inside the specified container.\n\n```javascript\nfieldFrame.render(container, {\n  padding: '10px',\n  fontSize: '14px',\n  display: 'block',\n  background: 'black',\n  borderRadius: '4px',\n});\n```\n\n### `copy`\n\nCreates a secure component for copy the value of the specified frame.\n\nYou have twice way to create a copy component\n\n```javascript\n// using the Tokenizer instance\nconst copyFrame = Tokenizer.copy(fieldFrame, { \n  text: \"Copy card number\", \n}, ({ status }) => {\n  console.log(\"copy callback:\", status);\n});\n```\n\nor\n\n```javascript\n// using the secure component\nconst copyFrame = fieldFrame.copy({ \n  text: \"Copy card number\", \n});\n```\n\n#### Parameters of `copy`\n\n|Option | Type   | Required | Description                             |\n|-----------|--------|----------|-----------------------------------------|\n| targetFrame      | _SecureFrame_ | _*`required`*_ | Only when the copy is create using the Tokenizer instance.        |\n| options | _object_  | optional | An object with keys `text` and `formatters` |\n| callback | _function_  | optional | The callback function for the copy button |\n\n`options`\n|Option | Type   | Required | Description                             |\n|-----------|--------|----------|-----------------------------------------|\n| text      | _string_ | optional | The `text` inside de HTML button.|\n| formatters| _array_  | optional | An array of formatters to apply to the value before rendering. [see here](#formatters)|\n\n### To render copy button\n\nSame as field, see [render method](#render)\n\n### `tearDown`\n\nDestroys all the frames created by the Astropay Web Tokenizer.\n\n```javascript\n// using the Tokenizer instance\nTokenizer.tearDown();\n```\n\n```javascript\n// using the secure component\nfieldFrame.tearDown();\n```\n\n### Events\n\nThe `.on()` method of _Secure Component_ you can listen to events and handle different states in callback functions. Multiple event handlers can be added for the same event of the field.\n\n```javascript\nfieldFrame.on(\"request\", function ({status}) {\n  console.log(`the request finish with status: ${status}`);\n});\n```\n\nThe `.off()` method of _Secure Component_ removes event handlers that were attached with .on() method.\n\n```javascript\nfieldFrame.off(\"request\", function ({status}) {\n  console.log(`the request finish with status: ${status}`);\n});\n```\n\n### Event types\n\n|Event|Parameters|Description|\n|---|--- |---|\n|request|{ status: \"success\" \\| \"error\", message?: string}| Triggers when the request of reveal was successfully completed, or when the request of reveal was completed with error and send the message of reason.|\n|reveal|{ status: \"success\" \\| \"error\", message?: string}|Triggers when the field was successfully revealed, or failed and send the message of reason.|\n|copy| { status: \"success\" \\| \"error\", message?: string}|Triggers when the revealed field was successfully copy to the clipboard, or failed the operation|\n\n## Support\n\nWe provide detailed documentation on the [AstroPay Developer Guide](https://developers.astropay.com/docs/partners/tokenizer-partners-api). Please check it for more information that might be necessary for developers.\n\nIf you need more technical support, please [contact support](https://astropay.com/contact/?lang=en)\n\n## License\n\nCopyright © 2023 AstroPay. All rights reserved.\n","readmeFilename":"README.md","keywords":["astropay","credit card","debit card","tokenizer","tokenization","payment","online payment"]}