{"_rev":"33-1184ffb09aa07080e0bad62ab460562d","time":{"created":"2026-04-30T07:34:10.762Z","modified":"2026-04-30T07:34:11.197Z","1.0.0":"2025-09-15T03:08:36.385Z","1.0.1":"2025-09-17T08:02:24.067Z","1.0.2":"2025-09-17T08:05:17.408Z","1.0.3":"2025-09-17T08:08:04.732Z","1.0.4":"2025-09-17T08:08:49.704Z","1.0.5":"2025-09-17T08:09:35.431Z","1.0.6":"2025-09-17T08:11:32.074Z","1.0.7":"2025-09-17T08:16:15.110Z","1.0.8":"2025-09-17T08:16:38.358Z","1.0.10":"2025-09-17T08:41:20.740Z","1.0.11":"2025-09-17T08:43:08.691Z","1.0.12":"2025-09-17T08:47:57.464Z","1.0.13":"2025-09-24T04:12:40.124Z","1.0.14":"2025-09-24T04:20:56.616Z","1.0.15":"2025-09-24T04:24:20.545Z","1.0.16":"2025-09-24T07:31:12.970Z","1.0.17":"2025-10-08T02:56:21.206Z","1.0.18":"2025-10-08T03:00:11.046Z","1.1.0":"2025-10-08T03:03:42.492Z","1.1.1":"2025-10-08T03:06:40.983Z","1.1.2":"2025-10-08T03:10:59.684Z","1.1.3":"2025-11-17T02:16:03.780Z","1.1.5":"2025-11-17T02:20:47.420Z","1.1.6":"2025-11-17T02:21:50.852Z","1.1.7":"2025-11-17T02:24:19.377Z","1.1.8":"2025-11-17T02:25:59.574Z","1.1.9":"2025-11-17T02:32:01.228Z","2.0.0":"2026-03-03T09:12:40.292Z","2.0.1":"2026-03-03T09:15:06.851Z","2.0.2":"2026-03-03T09:17:56.626Z","2.0.3":"2026-03-03T09:31:13.782Z","2.0.4":"2026-04-30T07:34:11.006Z"},"_id":"kirapay-merchant-sdk","name":"kirapay-merchant-sdk","dist-tags":{"latest":"2.0.4"},"versions":{"2.0.4":{"name":"kirapay-merchant-sdk","version":"2.0.4","description":"KiraPay JavaScript SDK for payment integration","type":"module","main":"dist/kirapay-merchant-sdk.cjess.js","module":"dist/kirapay-merchant-sdk.esm.js","browser":"dist/kirapay-merchant-sdk.esm.js","unpkg":"dist/kirapay-merchant-sdk.umd.js","types":"./dist/types/index.d.ts","typings":"./dist/types/index.d.ts","scripts":{"rollup":"rollup -c","build":"sh scripts/build.sh","dev":"rollup -c -w","prepublishOnly":"npm run build","version":"npm run build"},"config":{"version-git-message":"chore: release v%s","version-git-tag":true,"version-git-commit-hooks":true,"version-tag-prefix":"v"},"keywords":["payment","kirapay","sdk","javascript","react","nextjs","typescript"],"author":{"name":"KiraPay"},"license":"MIT","devDependencies":{"@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","rollup":"^4.9.6"},"repository":{"type":"git","url":"git+https://github.com/kirapay/kirapay-merchant-sdk.git"},"bugs":{"url":"https://github.com/kirapay/kirapay-merchant-sdk/issues"},"homepage":"https://github.com/kirapay/kirapay-merchant-sdk#readme","gitHead":"06823a43fa8d6f738564d4f14b12dd1752d81ea4","_id":"kirapay-merchant-sdk@2.0.4","_nodeVersion":"22.13.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-UshwLhb2zpOdJvmDXt2YziG1g/SuE+bQJvuQR3lTuEgP0MqzPDQAe9SFaHytte0Zwtn/VEK5uOBe+qIq/RzIeg==","shasum":"d9eea5354dde7cdfa4045d7e0fc27ef86ed1bd27","tarball":"https://registry.npmjs.org/kirapay-merchant-sdk/-/kirapay-merchant-sdk-2.0.4.tgz","fileCount":7,"unpackedSize":48330,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCraIGUiGxBqZtj5TuNKuvGMBkx1zC7k0gdjXHYowKa5QIgYV7/y7gS7D01zw3VR+/hRCn2/2vT6LjFEWsE5ECGMiY="}]},"_npmUser":{"name":"kira-pay","email":"dev@kira-pay.com"},"directories":{},"maintainers":[{"name":"kira-pay","email":"dev@kira-pay.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kirapay-merchant-sdk_2.0.4_1777534450851_0.8331747760423149"},"_hasShrinkwrap":false}},"maintainers":[{"name":"kira-pay","email":"dev@kira-pay.com"}],"description":"KiraPay JavaScript SDK for payment integration","homepage":"https://github.com/kirapay/kirapay-merchant-sdk#readme","keywords":["payment","kirapay","sdk","javascript","react","nextjs","typescript"],"repository":{"type":"git","url":"git+https://github.com/kirapay/kirapay-merchant-sdk.git"},"author":{"name":"KiraPay"},"bugs":{"url":"https://github.com/kirapay/kirapay-merchant-sdk/issues"},"license":"MIT","readme":"# KiraPay JavaScript SDK\r\n\r\nA lightweight, framework-agnostic JavaScript SDK for integrating KiraPay payments into any website, including React, Next.js, and plain HTML applications.\r\n\r\n## Features\r\n\r\n- 🚀 **Universal compatibility**: Works with React, Next.js, Vue, Angular, and plain HTML\r\n- 📦 **Multiple build formats**: ESM, CommonJS, and UMD\r\n- 🎨 **Fully customizable**: Style buttons with CSS classes or inline styles\r\n- 📱 **Responsive modal**: Beautiful payment modal with iframe integration\r\n- 🔒 **Secure**: API key-based authentication\r\n- 📝 **TypeScript support**: Full type definitions included\r\n- 🔄 **Dynamic imports**: Support for lazy loading and module imports\r\n- ⚡ **Performance optimized**: Load SDK only when needed\r\n- 🌐 **SSR Support**: Works with Next.js server-side rendering\r\n\r\n## Installation\r\n\r\n### NPM/Yarn (React, Next.js, etc.)\r\n\r\n```bash\r\nnpm install kirapay-merchant-sdk\r\n# or\r\nyarn add kirapay-merchant-sdk\r\n```\r\n\r\n### CDN (Plain HTML)\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Usage\r\n\r\n### 1. Static Import (Traditional)\r\n\r\n```html\r\n\r\n\r\n\r\n KiraPay Integration\r\n\r\n\r\n
\r\n\r\n \r\n \r\n \r\n\r\n\r\n```\r\n\r\n### 2. Dynamic Import (Lazy Loading)\r\n\r\n```html\r\n\r\n```\r\n\r\n### 3. ES Module Import (Modern)\r\n\r\n```html\r\n\r\n```\r\n\r\n### 4. React Integration\r\n\r\n#### Static Import (Build Time)\r\n\r\n```jsx\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { ButtonDynamicPrice } from 'kirapay-merchant-sdk';\r\n\r\nfunction PaymentComponent() {\r\n const [price, setPrice] = useState(100);\r\n const buttonRef = useRef(null);\r\n const buttonInstance = useRef(null);\r\n\r\n useEffect(() => {\r\n // Create button instance\r\n buttonInstance.current = new ButtonDynamicPrice({\r\n price: price,\r\n apiKey: \"your-api-key\",\r\n title: `Pay $${price}`,\r\n name: \"My Link\",\r\n receiver: \"\",\r\n redirectUrl: \"https://merchant.example.com/thank-you\",\r\n type: \"single_use\",\r\n isViewAsCrypto: false,\r\n cryptoCurrency: \"\",\r\n tokenOut: {\r\n chainId: \"\",\r\n address: \"\"\r\n },\r\n style: {\r\n backgroundColor: '#007bff',\r\n borderRadius: '8px'\r\n }\r\n });\r\n\r\n // Render button\r\n if (buttonRef.current) {\r\n buttonRef.current.appendChild(buttonInstance.current.render());\r\n }\r\n\r\n // Cleanup on unmount\r\n return () => {\r\n if (buttonInstance.current) {\r\n buttonInstance.current.destroy();\r\n }\r\n };\r\n }, []);\r\n\r\n // Update price dynamically\r\n const handlePriceChange = (newPrice) => {\r\n setPrice(newPrice);\r\n if (buttonInstance.current) {\r\n buttonInstance.current.updatePrice(newPrice);\r\n }\r\n };\r\n\r\n return (\r\n
\r\n handlePriceChange(+e.target.value)}\r\n />\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n#### Dynamic Import (Runtime)\r\n\r\n```jsx\r\nimport React, { useState, useEffect, useRef } from 'react';\r\n\r\nfunction PaymentComponent() {\r\n const [price, setPrice] = useState(100);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(null);\r\n const buttonRef = useRef(null);\r\n const buttonInstance = useRef(null);\r\n\r\n // Dynamic import function\r\n const loadSDK = async () => {\r\n try {\r\n const { ButtonDynamicPrice } = await import('kirapay-merchant-sdk');\r\n return ButtonDynamicPrice;\r\n } catch (err) {\r\n throw new Error('Failed to load KiraPay SDK');\r\n }\r\n };\r\n\r\n // Initialize button\r\n const initializeButton = async () => {\r\n setIsLoading(true);\r\n setError(null);\r\n\r\n try {\r\n const ButtonDynamicPrice = await loadSDK();\r\n \r\n // Create button instance\r\n buttonInstance.current = new ButtonDynamicPrice({\r\n price: price,\r\n apiKey: \"your-api-key\",\r\n title: `Pay $${price}`,\r\n name: \"My Link\",\r\n receiver: \"\",\r\n redirectUrl: \"https://merchant.example.com/thank-you\",\r\n type: \"single_use\",\r\n isViewAsCrypto: false,\r\n cryptoCurrency: \"\",\r\n tokenOut: {\r\n chainId: \"\",\r\n address: \"\"\r\n },\r\n style: {\r\n backgroundColor: '#28a745',\r\n borderRadius: '8px'\r\n }\r\n });\r\n\r\n // Render button\r\n if (buttonRef.current) {\r\n buttonRef.current.appendChild(buttonInstance.current.render());\r\n }\r\n } catch (err) {\r\n setError(err.message);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n };\r\n\r\n // Handle price change\r\n const handlePriceChange = (e) => {\r\n const newPrice = +e.target.value;\r\n setPrice(newPrice);\r\n if (buttonInstance.current) {\r\n buttonInstance.current.updatePrice(newPrice);\r\n }\r\n };\r\n\r\n // Cleanup on unmount\r\n useEffect(() => {\r\n return () => {\r\n if (buttonInstance.current) {\r\n buttonInstance.current.destroy();\r\n }\r\n };\r\n }, []);\r\n\r\n return (\r\n
\r\n \r\n \r\n {error &&
Error: {error}
}\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n### 5. Next.js Integration\r\n\r\n```jsx\r\nimport React, { useState, useEffect, useRef } from 'react';\r\n\r\nfunction NextJSPaymentComponent() {\r\n const [price, setPrice] = useState(100);\r\n const [isClient, setIsClient] = useState(false);\r\n const buttonRef = useRef(null);\r\n const buttonInstance = useRef(null);\r\n\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!isClient) return;\r\n\r\n // Import SDK dynamically\r\n import('kirapay-merchant-sdk').then(({ ButtonDynamicPrice }) => {\r\n // Create button instance\r\n buttonInstance.current = new ButtonDynamicPrice({\r\n price: price,\r\n apiKey: \"your-api-key\",\r\n title: `Pay $${price}`,\r\n name: \"My Link\",\r\n receiver: \"\",\r\n redirectUrl: \"https://merchant.example.com/thank-you\",\r\n type: \"single_use\",\r\n isViewAsCrypto: false,\r\n cryptoCurrency: \"\",\r\n tokenOut: {\r\n chainId: \"\",\r\n address: \"\"\r\n },\r\n style: {\r\n backgroundColor: \"#007bff\",\r\n borderRadius: \"8px\"\r\n }\r\n });\r\n\r\n // Render button\r\n if (buttonRef.current) {\r\n buttonRef.current.appendChild(buttonInstance.current.render());\r\n }\r\n }).catch(error => {\r\n console.error('Failed to load KiraPay SDK:', error);\r\n });\r\n\r\n // Cleanup\r\n return () => {\r\n if (buttonInstance.current) {\r\n buttonInstance.current.destroy();\r\n }\r\n };\r\n }, [isClient, price]);\r\n\r\n // Handle price change\r\n const handlePriceChange = (e) => {\r\n const newPrice = +e.target.value;\r\n setPrice(newPrice);\r\n if (buttonInstance.current) {\r\n buttonInstance.current.updatePrice(newPrice);\r\n }\r\n };\r\n\r\n if (!isClient) {\r\n return
Loading...
;\r\n }\r\n\r\n return (\r\n
\r\n \r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### ButtonDynamicPrice\r\n\r\nCreates a payment button that generates checkout URLs dynamically based on price.\r\n\r\n#### Constructor Options\r\n\r\n```typescript\r\ninterface TokenOut {\r\n chainId: string; // Chain identifier (e.g. \"sol\", \"eth\")\r\n address: string; // Token contract address\r\n}\r\n\r\ninterface ButtonDynamicPriceConfig {\r\n price: number; // Payment amount\r\n apiKey: string; // Your KiraPay API key\r\n customOrderId?: string; // Custom order ID (optional)\r\n name?: string; // Payment link name\r\n receiver?: string; // Receiver wallet address\r\n redirectUrl?: string; // URL to redirect after payment\r\n type?: string; // Link type (e.g. \"single_use\")\r\n isViewAsCrypto?: boolean; // Display price as crypto\r\n cryptoCurrency?: string; // Crypto currency symbol (e.g. \"ETH\")\r\n tokenOut?: TokenOut; // Output token config\r\n title?: string; // Button text (default: \"Pay with KiraPay\")\r\n className?: string; // CSS class name\r\n style?: object; // Inline styles\r\n loading?: boolean; // Initial loading state\r\n}\r\n\r\nnew ButtonDynamicPrice(config: ButtonDynamicPriceConfig)\r\n```\r\n\r\n#### Methods\r\n\r\n- `render()`: Returns the DOM element to insert into your page\r\n- `destroy()`: Cleans up the button and closes any open modals\r\n- `setLoading(loading: boolean)`: Updates the loading state\r\n- `updatePrice(price: number)`: Updates the payment amount\r\n\r\n## Example Implementations\r\n\r\nWe provide several example implementations in the `/examples` directory:\r\n\r\n1. Basic Integration:\r\n - `/examples/static-import.html`: Traditional script tag import\r\n - `/examples/dynamic-import.html`: Lazy loading examples\r\n - `/examples/module-import.html`: ES Module import\r\n\r\n2. React Examples:\r\n - `/examples/react-static-import.jsx`: React with static import\r\n - `/examples/react-dynamic-import.jsx`: React with dynamic import\r\n\r\n3. Next.js Examples:\r\n - `/examples/nextjs-example.jsx`: Next.js integration with SSR support\r\n\r\n4. E-commerce Examples:\r\n - `/src/example.html`: Complete e-commerce checkout page with:\r\n - Product selection\r\n - Dynamic pricing\r\n - Shopping cart\r\n - Custom styling\r\n\r\nTo run the examples:\r\n```bash\r\npython3 -m http.server 8000\r\n\r\n# Then open in browser:\r\n# http://localhost:8000/examples/static-import.html\r\n# http://localhost:8000/examples/dynamic-import.html\r\n# http://localhost:8000/examples/module-import.html\r\n# http://localhost:8000/src/example.html\r\n```\r\n\r\n## Styling\r\n\r\n### Default Styling\r\n\r\nThe SDK comes with default styling that you can override:\r\n\r\n```css\r\n.kirapay-button {\r\n padding: 12px 24px;\r\n background-color: #007bff;\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n}\r\n```\r\n\r\n### Custom Styling\r\n\r\nYou can customize the button in two ways:\r\n\r\n1. Using inline styles:\r\n```javascript\r\nconst button = new ButtonDynamicPrice({\r\n // ... other options\r\n style: {\r\n backgroundColor: '#28a745',\r\n color: 'white',\r\n padding: '15px 30px',\r\n fontSize: '18px',\r\n borderRadius: '12px',\r\n border: '2px solid #28a745'\r\n }\r\n});\r\n```\r\n\r\n2. Using CSS classes:\r\n```javascript\r\nconst button = new ButtonDynamicPrice({\r\n // ... other options\r\n className: 'my-custom-button'\r\n});\r\n```\r\n\r\n## Development\r\n\r\n```bash\r\n# Install dependencies\r\nnpm install\r\n\r\n# Build the SDK\r\nnpm run build\r\n\r\n# Watch for changes during development\r\nnpm run dev\r\n\r\n# Run examples\r\npython3 -m http.server 8000\r\n```\r\n\r\n## Publishing\r\n\r\n```bash\r\n# Update version\r\nnpm version patch # for bug fixes (1.0.0 -> 1.0.1)\r\nnpm version minor # for new features (1.0.0 -> 1.1.0)\r\nnpm version major # for breaking changes (1.0.0 -> 2.0.0)\r\n\r\n# Build and publish\r\nnpm run build\r\nnpm publish\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome 60+\r\n- Firefox 55+\r\n- Safari 12+\r\n- Edge 79+\r\n\r\n## TypeScript Support\r\n\r\nThe SDK includes built-in TypeScript definitions. No need to install additional @types packages.\r\n\r\n```typescript\r\nimport { ButtonDynamicPrice } from 'kirapay-merchant-sdk';\r\n\r\nconst button = new ButtonDynamicPrice({\r\n price: 100,\r\n apiKey: \"your-api-key\",\r\n name: \"My Link\",\r\n receiver: \"\",\r\n redirectUrl: \"https://merchant.example.com/thank-you\",\r\n type: \"single_use\",\r\n isViewAsCrypto: false,\r\n cryptoCurrency: \"\",\r\n tokenOut: {\r\n chainId: \"\",\r\n address: \"\"\r\n }\r\n});\r\n```\r\n\r\n## License\r\n\r\nMIT License - see LICENSE file for details.\r\n\r\n## Support\r\n\r\nFor support and questions:\r\n- Documentation: https://docs.kirapay.com\r\n- GitHub Issues: https://github.com/kirapay/kirapay-merchant-sdk/issues","readmeFilename":"README.md"}