{"_id":"@apiosk/checkout-web","_rev":"2-b824c124635ba0ca18ba124b73bf074a","name":"@apiosk/checkout-web","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@apiosk/checkout-web","version":"0.1.0","keywords":["apiosk","checkout","web-component","payments","x402"],"author":{"name":"Apiosk"},"license":"MIT","_id":"@apiosk/checkout-web@0.1.0","maintainers":[{"name":"olivierbrinkman","email":"ollybrinkman@gmail.com"}],"homepage":"https://docs.apiosk.com","dist":{"shasum":"cc88338f3454de57e93e6422cfd378f7b5057c97","tarball":"https://registry.npmjs.org/@apiosk/checkout-web/-/checkout-web-0.1.0.tgz","fileCount":4,"integrity":"sha512-PxPh/9a2cxrLaHuuIXDpzxH5R83mIiaqeia7PUQwmTJSwj/U2tyUylh7nPUbigu8mBVzM7765aX1/WaAbfUE/g==","signatures":[{"sig":"MEUCIDLjyTYjkUkz2wmQwDbk+CycPjpbBCr1V0mKbKTIrzlXAiEAuyaRR8cT4+m2P4GJXrgUxh8HWRNvClBJqnXUmLjF0VA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29724},"main":"./index.mjs","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.mjs"}},"gitHead":"4ffab03f444d9b52946f9889916deb29488964da","scripts":{"check":"node --check index.mjs"},"_npmUser":{"name":"olivierbrinkman","email":"ollybrinkman@gmail.com"},"_npmVersion":"11.4.2","description":"Framework-agnostic Apiosk checkout button and custom element for HTML apps","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@apiosk/checkout-core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/checkout-web_0.1.0_1775835589279_0.7975556082459074","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-04-10T15:39:49.196Z","modified":"2026-08-16T19:44:09.203Z","0.1.0":"2026-04-10T15:39:49.430Z"},"author":{"name":"Apiosk"},"license":"MIT","homepage":"https://docs.apiosk.com","keywords":["apiosk","checkout","web-component","payments","x402"],"description":"Framework-agnostic Apiosk checkout button and custom element for HTML apps","maintainers":[{"email":"ollybrinkman@gmail.com","name":"olivierbrinkman"},{"email":"olivier@apiosk.com","name":"apiosk-packages"}],"readme":"# `@apiosk/checkout-web`\n\nFramework-agnostic checkout button for plain HTML, server-rendered websites, and\napps that want a custom element instead of a framework-specific SDK.\n\nThis package ships:\n\n- the `<apiosk-checkout-button>` custom element\n- a four-layer checkout flow\n- rail selection and hosted checkout launch handling\n- a thin contract on top of `@apiosk/checkout-core`\n\n## Install\n\nAfter publish:\n\n```bash\nnpm install @apiosk/checkout-web\n```\n\nBefore publish:\n\n```bash\nnpm install ./subs/checkout-web\n```\n\n## HTML quick start\n\n```html\n<apiosk-checkout-button id=\"checkout\"></apiosk-checkout-button>\n\n<script type=\"module\">\n  import { registerApioskCheckoutButton } from \"@apiosk/checkout-web\";\n\n  registerApioskCheckoutButton();\n\n  document.getElementById(\"checkout\").config = {\n    merchantName: \"Northstar Marketplace\",\n    productName: \"Automation bundle\",\n    amountLabel: \"24.95 EUR\",\n    orderReference: \"ord_2048\",\n    subtitle: \"One trigger for human checkout and programmable payment rails.\",\n    rails: [\n      { id: \"credits\", status: \"live\", launchUrl: \"https://gateway.apiosk.com/geocode/forward\" },\n      { id: \"x402\", status: \"live\", launchUrl: \"https://gateway.apiosk.com/geocode/forward\" },\n      { id: \"agent\", status: \"pilot\" }\n    ],\n    callbacks: {\n      successUrl: \"https://merchant.example/success\",\n      cancelUrl: \"https://merchant.example/cancel\",\n      webhookUrl: \"https://merchant.example/webhooks/apiosk\",\n      statusUrl: \"https://merchant.example/api/orders/ord_2048\"\n    }\n  };\n</script>\n```\n\n## JS API\n\n```js\nimport {\n  createCheckoutButton,\n  registerApioskCheckoutButton,\n} from \"@apiosk/checkout-web\";\n\nregisterApioskCheckoutButton();\n\nconst button = createCheckoutButton({\n  merchantName: \"Apiosk Checkout\",\n  productName: \"Geocode /forward\",\n  amountLabel: \"0.01 USDC\",\n  orderReference: \"intent_live_geocode_forward\",\n  rails: [\n    { id: \"credits\", status: \"live\", launchUrl: \"https://gateway.apiosk.com/geocode/forward\" },\n    { id: \"x402\", status: \"live\", launchUrl: \"https://gateway.apiosk.com/geocode/forward\" }\n  ]\n});\n\ndocument.body.append(button);\n```\n\n## Current contract\n\nThis package is intentionally opinionated:\n\n- Layer 1: intent\n- Layer 2: merchant review\n- Layer 3: rail selection\n- Layer 4: hosted launch\n\nThe launch step opens the configured rail `launchUrl` in a new tab. When the\nmerchant intent API lands, the button should keep the same config contract and\nonly change what the launch target points at.\n\n## When to use this package\n\nUse `@apiosk/checkout-web` when:\n\n- you want a plain HTML integration\n- you need a checkout element inside non-React apps\n- you want React and Vue wrappers to share the same runtime surface\n\nUse `@apiosk/checkout-core` directly when you only need the contract and no UI.\n","readmeFilename":"README.md"}