{"_id":"@billmyagent/payments-elements","_rev":"6-3f3f9303e4bc4b5d3585d14f646943eb","name":"@billmyagent/payments-elements","dist-tags":{"latest":"4.0.0"},"versions":{"2.1.0":{"name":"@billmyagent/payments-elements","version":"2.1.0","_id":"@billmyagent/payments-elements@2.1.0","maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"dist":{"shasum":"31aee1f58455f6362bf1a2c4f3d55705dd8b7800","tarball":"https://registry.npmjs.org/@billmyagent/payments-elements/-/payments-elements-2.1.0.tgz","fileCount":10,"integrity":"sha512-tYKDiuZbBNThBMkC+1B6O+t85vmnq2qX/74ce0PiF3bOvIvZ9lTot+bvlIdoR8BKeaWfeQU+2oI24ow/MuQ3aw==","signatures":[{"sig":"MEUCIAIx748WnqVbwWhNfcdt1tjoA3ME3LwF15nnxr8jx9s+AiEAuNb9rQzJs/W2HLeau/xjYPh+mnbFuq3uhLkLTL3xvZo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12051},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"cc32d76b234dd10ecbfe465c2da6edc70935301a","scripts":{"test":"jest","build":"tsc"},"_npmUser":{"name":"billmyagentadmin","email":"admin@billmyagent.ai"},"overrides":{"js-yaml@<4.2.0":"^4.2.0"},"deprecated":"Broken deps; use >=2.1.2","_npmVersion":"10.8.2","description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@billmyagent/payments-core":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.5","typescript":"^5.7.3","@types/jest":"^29.5.14","@types/node":"^22.10.5","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/payments-elements_2.1.0_1782746336868_0.99064907069275","host":"s3://npm-registry-packages-npm-production"}},"2.1.1":{"name":"@billmyagent/payments-elements","version":"2.1.1","_id":"@billmyagent/payments-elements@2.1.1","maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"dist":{"shasum":"3492a000888aa02a83297111e5eb132fb6602e41","tarball":"https://registry.npmjs.org/@billmyagent/payments-elements/-/payments-elements-2.1.1.tgz","fileCount":10,"integrity":"sha512-wnB/UI6qmWNt/93gw+6LtzXxA/5UA390DCkPlbNZQbJ8xOR4mh5rolcMamo8shBLhI0NCrq+6Y3uBcnVz/4yrQ==","signatures":[{"sig":"MEUCIQDwTVdyWK7LjeqtelPE32M1BlMCZb0IR7w+Duu29lIE6QIgFgoxp8G8Pgv4xIu5VJ05Skglnid1zjIvSssdACOtsVU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12051},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d802171578bd411e0af14bae73473c0addf71561","scripts":{"test":"jest","build":"tsc"},"_npmUser":{"name":"billmyagentadmin","email":"admin@billmyagent.ai"},"overrides":{"js-yaml@<4.2.0":"^4.2.0"},"_npmVersion":"10.8.2","description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@billmyagent/payments-core":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.5","typescript":"^5.7.3","@types/jest":"^29.5.14","@types/node":"^22.10.5","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/payments-elements_2.1.1_1782748737104_0.47858017302224387","host":"s3://npm-registry-packages-npm-production"}},"2.1.2":{"name":"@billmyagent/payments-elements","version":"2.1.2","license":"Apache-2.0","_id":"@billmyagent/payments-elements@2.1.2","maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"homepage":"https://developer.billmyagent.ai","bugs":{"url":"https://github.com/RealMaxPower/payment-processing/issues"},"dist":{"shasum":"2ff085e1c428b2506b1b5952dd67374d0bc19fc2","tarball":"https://registry.npmjs.org/@billmyagent/payments-elements/-/payments-elements-2.1.2.tgz","fileCount":10,"integrity":"sha512-7gvb8aQcTk/ZJBFQr2LVX03GZG1WGtdlWdqinm/0zpIImJhMKbhXIVn1FEat99SkW8eEyAeeOjtaZPtoHQF8PA==","signatures":[{"sig":"MEUCIG5v8df/AORggNYzajeaOnetyEulAmKQ6hA1dDsyMKkzAiEApuQ8oe1TpoT9GEeNn0SkpmPhwMfhJLByE18eILuSl+4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12275},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"234016b07c1e9e790a6f47346c48adf0b5509568","scripts":{"test":"jest","build":"tsc"},"_npmUser":{"name":"billmyagentadmin","email":"admin@billmyagent.ai"},"overrides":{"js-yaml@<4.2.0":"^4.2.0"},"repository":{"url":"git+https://github.com/RealMaxPower/payment-processing.git","type":"git","directory":"sdk/elements"},"_npmVersion":"10.8.2","description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@billmyagent/payments-core":"^2.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.5","typescript":"^5.7.3","@types/jest":"^29.5.14","@types/node":"^22.10.5","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/payments-elements_2.1.2_1782759659784_0.30648186449762416","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"@billmyagent/payments-elements","version":"2.2.0","license":"Apache-2.0","_id":"@billmyagent/payments-elements@2.2.0","maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"homepage":"https://developer.billmyagent.ai","bugs":{"url":"https://github.com/RealMaxPower/payment-processing/issues"},"dist":{"shasum":"abfa872310e9f4ea4866caeb080f2117bd5464ec","tarball":"https://registry.npmjs.org/@billmyagent/payments-elements/-/payments-elements-2.2.0.tgz","fileCount":10,"integrity":"sha512-iExPYKSsU/zVD43M0k9xIpOhqRQIqjr8r81RjFvKslLqX5KroAEdy0I/D//TmeCgPwt5qHyVA58lsOpxIXfP1A==","signatures":[{"sig":"MEYCIQDNEAG7+sERhKNy8d17AdhEd8GXMPEMeIwFcIvRZmQ8hAIhAL73nOATIKJ4l2kWWKphp6wqvg2rZkQQA8CGrn92AUcY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQDF9FUoIvhkZf2WQ3lgCE20Vh0+ZpcpBQG0L6qQ4pSOYwIhAKAb3ArvEPO9Ndqm1T1ej2DpU3BQed8m278GUOVvyw+9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12506},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a36b3207f9e79b526a6bd22a15d7ed831f5eb5da","scripts":{"test":"jest","build":"tsc"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4fbfd8c5-c3f7-44b8-a1ab-d24bb3f22aa1"}},"overrides":{"brace-expansion":"^5.0.9","js-yaml@<=4.3.1":"^4.3.2","browserslist@<=4.28.6":"^4.28.7"},"repository":{"url":"git+https://github.com/RealMaxPower/payment-processing.git","type":"git","directory":"sdk/elements"},"_npmVersion":"11.19.1","description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@billmyagent/payments-core":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.5","typescript":"^5.7.3","@types/jest":"^29.5.14","@types/node":"^22.10.5","jest-environment-jsdom":"^30.4.1"},"_npmOperationalInternal":{"tmp":"tmp/payments-elements_2.2.0_1789274483490_0.9353141712242934","host":"s3://npm-registry-packages-npm-production"}},"4.0.0":{"_id":"@billmyagent/payments-elements@4.0.0","bugs":{"url":"https://github.com/RealMaxPower/payment-processing/issues"},"dist":{"shasum":"10b8c46d81941866c1c8a6490006fd1b26b226cb","tarball":"https://registry.npmjs.org/@billmyagent/payments-elements/-/payments-elements-4.0.0.tgz","fileCount":10,"integrity":"sha512-EcLJfOPBCgZVgnm/elXyJTy+xWkRNwIhR7q+B7DPEnwpVlmYkDZ/Nf9k0r8apnTFR2DvcVcq/92iiP7tQZAT+Q==","signatures":[{"sig":"MEUCIFJ1F6uc+zuWOMDVqZ2VsoesojE2+hgEQZpgTAU6++eoAiEA66zubW+nZd6T9xoTqaeOixuSycE4khB0kJYokk2JlQw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDEHMsYzP1xZD+Ug849FLTNFFVoldp32J+4h9Ub9tyqtgIgC75F7C7S93+TntsTNjoC8GejZEty0mheen7U1awdUI4="}],"unpackedSize":12506},"main":"dist/index.js","name":"@billmyagent/payments-elements","types":"dist/index.d.ts","gitHead":"b8e62639f594cd3f9bf0363ea3ff5493a9e55af6","license":"Apache-2.0","scripts":{"test":"jest","build":"tsc"},"version":"4.0.0","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4fbfd8c5-c3f7-44b8-a1ab-d24bb3f22aa1"}},"homepage":"https://developer.billmyagent.ai","overrides":{"brace-expansion":"^5.0.9","js-yaml@<=4.3.1":"^4.3.2","browserslist@<=4.28.6":"^4.28.7"},"repository":{"url":"git+https://github.com/RealMaxPower/payment-processing.git","type":"git","directory":"sdk/elements"},"_npmVersion":"11.20.0","description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","directories":{},"maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"_nodeVersion":"20.20.2","dependencies":{"@billmyagent/payments-core":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.2.5","typescript":"^5.7.3","@types/jest":"^29.5.14","@types/node":"^22.10.5","jest-environment-jsdom":"^30.4.1"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/payments-elements_4.0.0_1790531336452_0.2918913589951453"}}},"time":{"created":"2026-06-29T15:18:56.690Z","modified":"2026-09-27T17:48:56.739Z","2.1.0":"2026-06-29T15:18:57.006Z","2.1.1":"2026-06-29T15:58:57.258Z","2.1.2":"2026-06-29T19:00:59.927Z","2.2.0":"2026-09-13T04:41:23.576Z","4.0.0":"2026-09-27T17:48:56.549Z"},"bugs":{"url":"https://github.com/RealMaxPower/payment-processing/issues"},"license":"Apache-2.0","homepage":"https://developer.billmyagent.ai","repository":{"url":"git+https://github.com/RealMaxPower/payment-processing.git","type":"git","directory":"sdk/elements"},"description":"<x402-pay-button> web component for paying x402-gated APIs (viem signer)","maintainers":[{"name":"realmaxpower","email":"contactme@marshallcahill.com"},{"name":"billmyagentadmin","email":"admin@billmyagent.ai"}],"readme":"# @billmyagent/payments-elements\n\nA framework-free Web Component for the [x402 payment protocol](https://www.x402.org).\n\nWraps [@billmyagent/payments-core](../core) as a custom element,\n`<x402-pay-button>`, that calls an x402-gated URL and automatically pays the\nHTTP 402 challenge when one is returned (the core client signs an EIP-3009\n`transferWithAuthorization` and the facilitator settles it on-chain). Works in\nany HTML page or framework.\n\n## Install\n\n```bash\nnpm install @billmyagent/payments-elements @billmyagent/payments-core\n```\n\n## Usage\n\nPaying requires a viem `signer` — a JS object that can't be expressed as an HTML\nattribute — so the configured `PaymentClient` is assigned in JavaScript. The\n`url` and `label` are plain attributes.\n\n```html\n<x402-pay-button url=\"https://api.example.com/premium\" label=\"Read article\"></x402-pay-button>\n\n<script type=\"module\">\n  import { PaymentClient, createSigner } from '@billmyagent/payments-core';\n  import '@billmyagent/payments-elements'; // registers <x402-pay-button>\n\n  const el = document.querySelector('x402-pay-button');\n  // Browser: el.client = new PaymentClient({ signer: <viem wallet client> });\n  el.client = new PaymentClient({ signer: await createSigner('base', PRIVATE_KEY) });\n\n  el.addEventListener('payment-success', (e) => console.log(e.detail.data, e.detail.paid));\n  el.addEventListener('payment-error', (e) => console.error(e.detail));\n</script>\n```\n\n## API\n\n### Element: `<x402-pay-button>`\n\n| | | |\n|---|---|---|\n| **Attribute** `url` | `string` | the x402-gated URL to call (and pay, if challenged) |\n| **Attribute** `label` | `string` | button label; defaults to `\"Pay\"` |\n| **Property** `client` | `PaymentClient` | assign in JS; must be created with a `signer` |\n| **Event** `payment-success` | `CustomEvent<{ data, paid }>` | fired on success; `paid` is `true` if a payment was made |\n| **Event** `payment-error` | `CustomEvent<Error>` | fired on failure (including no `client` set) |\n\n## Supported networks\n\nEVM only, `exact` scheme: **Base** (and **Base Sepolia** for testing). Ethereum L1 and Polygon appear in the types for historic rows and are not settled.\n\n## Development\n\n```bash\n# from sdk/elements/\nnpm install\nnpm test\nnpm run build\n```\n\n## License\n\nApache 2.0 — see [LICENSE](../../LICENSE).\n</content>\n","readmeFilename":"README.md"}