{"_id":"@transak/ui-js-sdk","_rev":"2-ae91d605941aa725b8b38bc0bc1e6006","name":"@transak/ui-js-sdk","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@transak/ui-js-sdk","version":"1.0.0","keywords":["crypto","cryptocurrency","fiat","on","off","ramp","sdk","ts","js"],"author":{"name":"Transak"},"license":"ISC","_id":"@transak/ui-js-sdk@1.0.0","maintainers":[{"name":"sshandilya","email":"shashank@transak.com"},{"name":"kutsav","email":"utsav2307@gmail.com"},{"name":"aditya1910","email":"aditya@transak.com"},{"name":"transakgs","email":"gaurav.singh@transak.com"},{"name":"devops-transak","email":"devops@transak.com"}],"homepage":"https://docs.transak.com/docs/web-integration#transak-sdk-reactvueangularts","dist":{"shasum":"9ed171dbb943914f538e2a4f1c6764b72a5325cc","tarball":"https://registry.npmjs.org/@transak/ui-js-sdk/-/ui-js-sdk-1.0.0.tgz","fileCount":8,"integrity":"sha512-GBaRBuWBRINtSjSIGBtGBuwGybF/Fag1MFMDNLkP40TYsQ6EKeo+xpb1uepYY8oP2Pwhv/S0ItY4SddUqCaWPg==","signatures":[{"sig":"MEYCIQDZRS2HUd/zUCryEZ7jeVCDyDBEhfE3Rc3OjaZrUi5MqQIhAIldjiD/NjSPda9qqPNpJXEdaWsBazorqJXWSltkQ1aR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59773},"main":"lib/index.cjs","type":"module","types":"lib/index.d.ts","engines":{"node":">=20.0.0"},"exports":{".":{"import":{"types":"./lib/index.d.ts","default":"./lib/index.js"},"require":{"types":"./lib/index.d.cts","default":"./lib/index.cjs"}}},"gitHead":"6c3b6766e84628de4815ab2bab0dce46c9f6550e","scripts":{"build":"tsc && tsup","eslint":"eslint . --ext .ts --fix","packDev":"pnpm pack","prepack":"pnpm build"},"_npmUser":{"name":"kutsav","email":"utsav2307@gmail.com"},"_npmVersion":"10.2.4","description":"A JavaScript SDK for decentralized applications to onboard their global user base with fiat currency","directories":{},"_nodeVersion":"20.11.1","dependencies":{"events":"^3.3.0","query-string":"^9.3.0"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.16.1+sha512.0e155aa2629db8672b49e8475da6226aa4bdea85fdcdfdc15350874946d4f3c91faaf64cbdc4a5d1ab8002f473d5c3fcedcd197989cf0390f9badd3c04678706","devDependencies":{"tsup":"^8.5.0","eslint":"~8.57.1","prettier":"^3.6.2","typescript":"~5.5.4","@types/events":"^3.0.3","eslint-plugin-import":"^2.32.0","eslint-plugin-promise":"^7.2.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","@typescript-eslint/parser":"^7.18.0","eslint-config-airbnb-base":"^15.0.0","eslint-plugin-eslint-comments":"^3.2.0","eslint-config-airbnb-typescript":"^18.0.0","@typescript-eslint/eslint-plugin":"^7.18.0","eslint-plugin-no-relative-import-paths":"^1.6.1"},"_npmOperationalInternal":{"tmp":"tmp/ui-js-sdk_1.0.0_1762751198928_0.12398067653304667","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-11-10T05:06:38.739Z","modified":"2026-05-12T13:37:43.084Z","1.0.0":"2025-11-10T05:06:39.135Z"},"author":{"name":"Transak"},"license":"ISC","homepage":"https://docs.transak.com/docs/web-integration#transak-sdk-reactvueangularts","keywords":["crypto","cryptocurrency","fiat","on","off","ramp","sdk","ts","js"],"description":"A JavaScript SDK for decentralized applications to onboard their global user base with fiat currency","maintainers":[{"email":"shashank@transak.com","name":"sshandilya"},{"email":"utsav2307@gmail.com","name":"kutsav"},{"email":"aditya@transak.com","name":"aditya1910"},{"email":"gaurav.singh@transak.com","name":"transakgs"},{"email":"utsav@transak.com","name":"utsav-transak"},{"email":"rushil@transak.com","name":"rushil-transak"},{"email":"devops@transak.com","name":"devops-transak"}],"readme":"# Transak SDK\n\nA JavaScript SDK for decentralized applications to onboard their global user base with fiat currency.\n\n## Installation\n\n```sh\nnpm i @transak/ui-js-sdk\n```\n\n## Example usage\n\n```html\n<div id=\"transakMount\"></div>\n```\n\n```ts\nimport { TransakConfig, Transak } from '@transak/ui-js-sdk';\n\n// Complete example with session URL\nconst initializeTransak = async () => {\n  const transakConfig: TransakConfig = {\n    widgetUrl: 'api-generated-widgetUrl', // Required\n    containerId: 'transakMount', // Id of the element where you want to initialize the iframe\n    widgetWidth: '100%', // Optional widget dimensions\n    widgetHeight: '600px',\n  };\n\n  let transak = new Transak(transakConfig);\n  transak.init();\n\n  return transak;\n};\n\n// Initialize the widget\nconst transak = await initializeTransak();\n\n// This will trigger when the user closed the widget\nTransak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {\n  console.log('Transak SDK closed!');\n});\n\n/*\n * This will trigger when the user has confirmed the order\n * This doesn't guarantee that payment has completed in all scenarios\n * If you want to close/navigate away, use the TRANSAK_ORDER_SUCCESSFUL event\n */\nTransak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {\n  console.log(orderData);\n});\n\n/*\n * This will trigger when the user marks payment is made\n * You can close/navigate away at this event\n */\nTransak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {\n  console.log(orderData);\n  transak.cleanup();\n});\n```\n\n## TransakConfig\n\n| Property     | Type   | Required | Description                                                                                                              |\n| :----------- | :----- | :------- | :----------------------------------------------------------------------------------------------------------------------- |\n| widgetUrl    | string | Yes      | [API generated widgetUrl](https://docs.transak.com/docs/migration-to-api-based-transak-widget-url#widget-url-generation) |\n| containerId  | string | No       | HTML element ID to mount the widget (omit for modal)                                                                     |\n| widgetWidth  | string | No       | Widget width (e.g., '100%', '400px')                                                                                     |\n| widgetHeight | string | No       | Widget height (e.g., '600px', '100vh')                                                                                   |\n\n### Using Modal UI\n\nIf you want to use our modal UI, do not pass the `containerId` and use `transak.close()` instead of `transak.cleanup()`\n\n### React Gotchas\n\nRemember to clean up by using the `transak.cleanup()` or `transak.close()`\n\n```ts\nuseEffect(() => {\n  return () => {\n    transak.cleanup();\n  };\n}, []);\n```\n\n## License\n\nISC Licensed. Copyright (c) Transak Inc.\n","readmeFilename":"README.md"}