{"_id":"@djlemmor/djpaykit","name":"@djlemmor/djpaykit","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@djlemmor/djpaykit","version":"0.1.0","description":"Framework-independent QR payment widget for Philippine e-wallets.","homepage":"https://github.com/djlemmor/dj-paykit#readme","repository":{"type":"git","url":"git+https://github.com/djlemmor/dj-paykit.git","directory":"packages/core"},"bugs":{"url":"https://github.com/djlemmor/dj-paykit/issues"},"type":"module","main":"./dist/djpaykit.umd.cjs","module":"./dist/djpaykit.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/djpaykit.js","require":"./dist/djpaykit.umd.cjs"}},"scripts":{"dev":"vite","build":"tsc --noEmit && vite build","test":"vitest run","test:watch":"vitest","lint":"eslint .","format":"prettier --write .","format:check":"prettier --check ."},"keywords":["payments","qr-code","gcash","maya","maribank","philippines","web-component"],"author":{"name":"DJ Lemmor Nuique"},"license":"MIT","publishConfig":{"access":"public"},"engines":{"node":">=22"},"devDependencies":{"@eslint/js":"^10.0.1","eslint":"^10.9.1","globals":"^17.11.0","jsdom":"^30.0.1","prettier":"^3.9.6","typescript":"~6.0.0","typescript-eslint":"^8.68.0","vite":"^8.2.2","vite-plugin-dts":"^5.0.3","vitest":"^4.1.11"},"gitHead":"67470f433d882fcd81cfb46c2cc36f0c6d722e02","_id":"@djlemmor/djpaykit@0.1.0","_nodeVersion":"26.7.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-D0/MWmCRxS0W9MEBhv6p8cz2vTPKs7X0NK7/SCjtym+WFTI0OazraMsVbSTsJnKz1rlZjYJmajwQEc5SvPH7EQ==","shasum":"120c8d09112c820a13518f2afa75b4f047e129f5","tarball":"https://registry.npmjs.org/@djlemmor/djpaykit/-/djpaykit-0.1.0.tgz","fileCount":17,"unpackedSize":143115,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCouSElPhEfkaUddDt9CMtreXxXe+ynlNi6SRG1M5bFNQIgVD8jXfix6tXfvX1KwerEDe+OwvGk9hghUzfJ+dmjwwY="}]},"_npmUser":{"name":"djlemmor","email":"lemmornuique@gmail.com"},"directories":{},"maintainers":[{"name":"djlemmor","email":"lemmornuique@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/djpaykit_0.1.0_1787698273740_0.8044454219053654"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-25T22:51:13.429Z","0.1.0":"2026-08-25T22:51:13.878Z","modified":"2026-08-25T22:51:14.138Z"},"maintainers":[{"name":"djlemmor","email":"lemmornuique@gmail.com"}],"description":"Framework-independent QR payment widget for Philippine e-wallets.","homepage":"https://github.com/djlemmor/dj-paykit#readme","keywords":["payments","qr-code","gcash","maya","maribank","philippines","web-component"],"repository":{"type":"git","url":"git+https://github.com/djlemmor/dj-paykit.git","directory":"packages/core"},"author":{"name":"DJ Lemmor Nuique"},"bugs":{"url":"https://github.com/djlemmor/dj-paykit/issues"},"license":"MIT","readme":"# @djlemmor/djpaykit\n\nA framework-independent QR-payment web component for Philippine e-wallets.\n\nDJPayKit lets customers select an enabled payment provider, view its account details and QR code, copy an account number, and download a QR image without reloading the page.\n\n## Installation\n\n```bash\n# Installs the frontend widget.\nnpm install @djlemmor/djpaykit\n```\n\n## Register the component\n\n```typescript\nimport { defineDJPayKitWidget } from '@djlemmor/djpaykit';\n\n// Safely registers <djpaykit-widget> once.\ndefineDJPayKitWidget();\n```\n\n## Add the widget\n\n```html\n<djpaykit-widget\n  api-url=\"/api/djpaykit/payment-methods\"\n  order-reference=\"ORDER-1001\"\n  amount=\"500.00\"\n  currency=\"PHP\"\n></djpaykit-widget>\n```\n\n## Attributes\n\n| Attribute         | Required | Description                                       |\n| ----------------- | -------- | ------------------------------------------------- |\n| `api-url`         | Yes      | Endpoint used to retrieve enabled payment methods |\n| `order-reference` | No       | Public order reference displayed to the customer  |\n| `amount`          | No       | Payment amount displayed by the widget            |\n| `currency`        | No       | ISO currency code, such as `PHP`                  |\n\n## API response\n\nThe URL supplied through `api-url` should return JSON in this format:\n\n```json\n{\n  \"data\": [\n    {\n      \"id\": \"pm_01\",\n      \"provider\": \"gcash\",\n      \"displayName\": \"GCash\",\n      \"accountName\": \"DJ Business\",\n      \"accountNumber\": \"0917 123 4567\",\n      \"qrImageUrl\": \"/api/djpaykit/payment-methods/pm_01/qr\",\n      \"instructions\": \"Include your order number in the payment note.\"\n    }\n  ]\n}\n```\n\nThe first available payment method is selected automatically. Selecting another method updates the displayed details without requesting the payment-method list again.\n\n## Events\n\n### Provider selected\n\nThe widget dispatches `djpaykit:provider-selected` when the customer changes providers:\n\n```typescript\nconst widget = document.querySelector('djpaykit-widget');\n\nwidget?.addEventListener('djpaykit:provider-selected', (event) => {\n  const selection = event as CustomEvent<{\n    paymentMethodId: string;\n    provider: string;\n  }>;\n\n  // Only public identifiers are included in the event.\n  console.log(selection.detail);\n});\n```\n\n### QR downloaded\n\nThe widget dispatches `djpaykit:qr-downloaded` after a QR image is downloaded successfully:\n\n```typescript\nconst widget = document.querySelector('djpaykit-widget');\n\nwidget?.addEventListener('djpaykit:qr-downloaded', (event) => {\n  const download = event as CustomEvent<{\n    paymentMethodId: string;\n    provider: string;\n  }>;\n\n  // This can be used for checkout analytics.\n  console.log(download.detail);\n});\n```\n\nNeither event exposes account numbers or private storage paths.\n\n## Color customization\n\nSet the primary-color custom property on the component:\n\n```html\n<djpaykit-widget\n  api-url=\"/api/djpaykit/payment-methods\"\n  style=\"--djpaykit-primary-color: #7c3aed\"\n></djpaykit-widget>\n```\n\n## Browser utilities\n\nThe package also exports its tested copy and download utilities:\n\n```typescript\nimport { copyTextToClipboard, downloadQrImage } from '@djlemmor/djpaykit';\n\n// Copies normalized text with a textarea fallback.\nawait copyTextToClipboard('0917 123 4567');\n\n// Downloads a supported PNG, JPEG, or WebP QR image.\nawait downloadQrImage('/payment-methods/pm_01/qr', 'gcash');\n```\n\n## Laravel backend\n\nThe official Laravel adapter provides compatible public API routes, administrator routes, validation, migrations, and private QR-image storage:\n\n```bash\n# Installs the official Laravel 12 adapter.\ncomposer require djlemmor/djpaykit-laravel:^0.1\n```\n\nDocumentation: [DJPayKit Laravel](https://github.com/djlemmor/dj-paykit-laravel)\n\n## Payment verification\n\nDJPayKit does not automatically confirm that a payment was completed. The host checkout should keep the payment pending until it is manually reviewed or verified by another payment system.\n\n## License\n\nReleased under the [MIT License](LICENSE).\n","readmeFilename":"README.md","_rev":"1-17209401cae6c4e14761ff1b116795d4"}