{"_id":"@banxa-official/embedded-checkout-web-component","_rev":"2-ea6171c889c53d31d06942f51371059b","name":"@banxa-official/embedded-checkout-web-component","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@banxa-official/embedded-checkout-web-component","version":"0.1.0","keywords":["banxa","checkout","web-component","custom-element","embedded-checkout"],"license":"MIT","_id":"@banxa-official/embedded-checkout-web-component@0.1.0","maintainers":[{"name":"banxasystem","email":"system@banxa.com"}],"homepage":"https://gitlab.com/banxa/applications/embedded-checkout-web-component#readme","bugs":{"url":"https://gitlab.com/banxa/applications/embedded-checkout-web-component/-/issues"},"dist":{"shasum":"e101357d928c9c861c79c4348c2000122166a851","tarball":"https://registry.npmjs.org/@banxa-official/embedded-checkout-web-component/-/embedded-checkout-web-component-0.1.0.tgz","fileCount":5,"integrity":"sha512-07SVumKBTdTygvrttHXIfs3F4SblXTjSmNAjqlxQJP5OHDo1RTuVI+111gFCXXRIOe9/LN2KAakHTbIZvvthPw==","signatures":[{"sig":"MEUCIBGFOte2wL0dXBNy8aFXuV47RVdJoNw1yrK99wcgVcxPAiEAn/F4KotHDi0s0u0qLVQDumoDX40VThCTaHioo1doC7s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12782},"main":"dist/banxa-checkout.umd.cjs","type":"module","module":"dist/banxa-checkout.js","exports":{".":{"import":"./dist/banxa-checkout.js","require":"./dist/banxa-checkout.umd.cjs"}},"gitHead":"b999faae9ee71ef247c4d323448a61fa2cad826f","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","dev:examples":"vite --config vite.examples.config.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"banxasystem","email":"system@banxa.com"},"repository":{"url":"git+https://gitlab.com/banxa/applications/embedded-checkout-web-component.git","type":"git"},"_npmVersion":"11.6.4","description":"Web component for embedding Banxa checkout in any web application","directories":{},"_nodeVersion":"22.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10"},"_npmOperationalInternal":{"tmp":"tmp/embedded-checkout-web-component_0.1.0_1780297266146_0.2089706805212832","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@banxa-official/embedded-checkout-web-component","version":"0.1.1","description":"Web component for embedding Banxa checkout in any web application","type":"module","license":"MIT","keywords":["banxa","checkout","web-component","custom-element","embedded-checkout"],"repository":{"type":"git","url":"git+https://gitlab.com/banxa/applications/embedded-checkout-web-component.git"},"bugs":{"url":"https://gitlab.com/banxa/applications/embedded-checkout-web-component/-/issues"},"homepage":"https://gitlab.com/banxa/applications/embedded-checkout-web-component#readme","main":"dist/banxa-checkout.umd.cjs","module":"dist/banxa-checkout.js","exports":{".":{"import":"./dist/banxa-checkout.js","require":"./dist/banxa-checkout.umd.cjs"}},"publishConfig":{"access":"public"},"scripts":{"dev":"vite","dev:examples":"vite --config vite.examples.config.js","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"devDependencies":{"vite":"^8.0.10"},"gitHead":"cea27b07a1b54737f01942ad9e432b2e9d636b3b","_id":"@banxa-official/embedded-checkout-web-component@0.1.1","_nodeVersion":"22.17.0","_npmVersion":"11.6.4","dist":{"integrity":"sha512-RrG0LevLKYWomds4ykBMkLwmfxUMkPdqjyrpyJwQ7bj4ZRw7H5jW9+9CyTzI6vGIY5zYUH7YmT/ceVQgynT6RA==","shasum":"705b981ee917c5e892836b64e4a4ba33465516d5","tarball":"https://registry.npmjs.org/@banxa-official/embedded-checkout-web-component/-/embedded-checkout-web-component-0.1.1.tgz","fileCount":5,"unpackedSize":12732,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCO5BRmuQHV9E0Tx65qaZ2APTdDNdKW/ckYM0wgz0Vb+AIhAP0w6FTUTG2rOw5KZUJDZ0qEND12UOwY8+Ryj9ehedgs"}]},"_npmUser":{"name":"banxasystem","email":"system@banxa.com"},"directories":{},"maintainers":[{"name":"banxasystem","email":"system@banxa.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/embedded-checkout-web-component_0.1.1_1781671215144_0.7064774741272839"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T07:01:05.931Z","modified":"2026-06-17T04:40:15.443Z","0.1.0":"2026-06-01T07:01:06.288Z","0.1.1":"2026-06-17T04:40:15.299Z"},"bugs":{"url":"https://gitlab.com/banxa/applications/embedded-checkout-web-component/-/issues"},"license":"MIT","homepage":"https://gitlab.com/banxa/applications/embedded-checkout-web-component#readme","keywords":["banxa","checkout","web-component","custom-element","embedded-checkout"],"repository":{"type":"git","url":"git+https://gitlab.com/banxa/applications/embedded-checkout-web-component.git"},"description":"Web component for embedding Banxa checkout in any web application","maintainers":[{"name":"banxasystem","email":"system@banxa.com"}],"readme":"# Banxa Embedded Checkout Web Component\n\nEmbed Banxa checkout in any web application via the `<banxa-checkout>` custom element.\n\n## Install\n\n```bash\nnpm install @banxa-official/embedded-checkout-web-component\n```\n\n## Quick start\n\nImport the package once to register the custom element:\n\n```js\nimport '@banxa-official/embedded-checkout-web-component';\n```\n\n```html\n<banxa-checkout source=\"https://checkout.banxa.com/...\"></banxa-checkout>\n```\n\nThe module also exports the element class:\n\n```js\nimport { BanxaCheckout } from '@banxa-official/embedded-checkout-web-component';\n```\n\n## API\n\n### Attribute\n\n| Name | Description |\n|------|-------------|\n| `source` | Checkout iframe URL. When set or changed, the component mounts or reloads the iframe. Removing it unmounts the iframe. |\n\n### Callback properties\n\nAssign functions to these properties on the element instance. Each receives a `detail` object (not a DOM event).\n\n| Property | When called |\n|----------|-------------|\n| `onLoading` | Checkout reports loading (`banxa:loading`) |\n| `onReady` | Checkout is ready with dimensions (`banxa:ready`) |\n| `onPaymentPending` | Payment is pending (`banxa:payment-pending`) |\n| `onComplete` | Payment completed (`banxa:payment-complete`) |\n| `onError` | Checkout error (`banxa:error`) |\n\n### Custom events\n\nThe same lifecycle is also dispatched as DOM events. Listen with `addEventListener` or framework bindings (`@ready` in Vue, etc.).\n\n| Event | `event.detail` |\n|-------|----------------|\n| `loading` | `status` from iframe message |\n| `ready` | `{ width, height }` |\n| `paymentPending` | `status` from iframe message |\n| `complete` | `status` from iframe message |\n| `error` | `{ code, message }` |\n\nOn `banxa:ready`, numeric `width` and `height` resize the iframe and make it visible. Until then the iframe stays hidden.\n\n## Vanilla HTML\n\n```html\n<script type=\"module\">\n  import '@banxa-official/embedded-checkout-web-component';\n</script>\n\n<banxa-checkout id=\"checkout\" source=\"https://checkout.banxa.com/...\"></banxa-checkout>\n\n<script>\n  const el = document.getElementById('checkout');\n  el.onLoading = (detail) => console.log('loading', detail);\n  el.onReady = (detail) => console.log('ready', detail);\n  el.onPaymentPending = (detail) => console.log('payment pending', detail);\n  el.onComplete = (detail) => console.log('complete', detail);\n  el.onError = (detail) => console.log('error', detail);\n</script>\n```\n\n## React (use `ref` for callback properties)\n\n```jsx\nimport { useEffect, useRef } from 'react';\nimport '@banxa-official/embedded-checkout-web-component';\n\nexport function Checkout() {\n  const checkoutRef = useRef(null);\n\n  useEffect(() => {\n    const el = checkoutRef.current;\n    if (!el) return;\n\n    el.onLoading = (detail) => console.log('loading', detail);\n    el.onReady = (detail) => console.log('ready', detail);\n    el.onPaymentPending = (detail) => console.log('payment pending', detail);\n    el.onComplete = (detail) => console.log('complete', detail);\n    el.onError = (detail) => console.log('error', detail);\n  }, []);\n\n  return <banxa-checkout ref={checkoutRef} source=\"https://checkout.banxa.com/...\" />;\n}\n```\n\n## Vue\n\nUse camelCase for `paymentPending` — it matches the custom event name.\n\n```vue\n<template>\n  <banxa-checkout\n    source=\"https://checkout.banxa.com/...\"\n    @loading=\"onLoading\"\n    @ready=\"onReady\"\n    @paymentPending=\"onPaymentPending\"\n    @complete=\"onComplete\"\n    @error=\"onError\"\n  />\n</template>\n\n<script setup>\nimport '@banxa-official/embedded-checkout-web-component';\n\nconst onLoading = (event) => console.log('loading', event.detail);\nconst onReady = (event) => console.log('ready', event.detail);\nconst onPaymentPending = (event) => console.log('payment pending', event.detail);\nconst onComplete = (event) => console.log('complete', event.detail);\nconst onError = (event) => console.log('error', event.detail);\n</script>\n```\n\n## Checkout iframe integration\n\n> **Note:** This section is for teams building or hosting the checkout page loaded inside the iframe. Package consumers only need the API above.\n\nThe checkout page should `postMessage` objects with a `type` string and additional top-level fields. Messages are only handled when they originate from the component’s iframe.\n\n```js\n{ type: string, ...fields }\n```\n\n| `type` | Fields | Component behaviour |\n|--------|--------|---------------------|\n| `banxa:loading` | `status` | Emits `loading` |\n| `banxa:ready` | `width`, `height` (numbers) | Resizes iframe, emits `ready` with `{ width, height }` |\n| `banxa:payment-pending` | `status` | Emits `paymentPending` |\n| `banxa:payment-complete` | `status` | Emits `complete` |\n| `banxa:error` | `code`, `message` (optional) | Emits `error` with `{ code, message }`; `message` defaults to `Unknown error` |\n\nExample messages:\n\n```js\nwindow.parent.postMessage({ type: 'banxa:loading', status: 'loading' }, '*');\nwindow.parent.postMessage({ type: 'banxa:ready', width: 480, height: 640 }, '*');\nwindow.parent.postMessage({ type: 'banxa:payment-pending', status: 'pending' }, '*');\nwindow.parent.postMessage({ type: 'banxa:payment-complete', status: 'completed' }, '*');\nwindow.parent.postMessage(\n  { type: 'banxa:error', code: 'CHECKOUT_ERROR', message: 'Checkout failed' },\n  '*'\n);\n```\n\n## Development\n\n```bash\nnpm install\nnpm run dev          # smoke test (src)\nnpm run dev:examples # example app with mock checkout\nnpm run build\nnpm run preview\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}