{"_id":"@apiosk/checkout-react","_rev":"2-954f0040e516ea4d627816e70fe59e8f","name":"@apiosk/checkout-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@apiosk/checkout-react","version":"0.1.0","keywords":["apiosk","checkout","react","nextjs","payments"],"author":{"name":"Apiosk"},"license":"MIT","_id":"@apiosk/checkout-react@0.1.0","maintainers":[{"name":"olivierbrinkman","email":"ollybrinkman@gmail.com"}],"homepage":"https://docs.apiosk.com","dist":{"shasum":"a1102ca51570cefbd5b350dcacffd3e2adc43db7","tarball":"https://registry.npmjs.org/@apiosk/checkout-react/-/checkout-react-0.1.0.tgz","fileCount":4,"integrity":"sha512-b2cx7YSmwvZiDaVy/uJ4iK8zeovSyyZYZIbwjhgLg0k1ME5fcEFCrMYTabiy4ueKcq7Z8LGtJzPFMdp0Uv855g==","signatures":[{"sig":"MEQCIHwKAqqkoOwNqUHLRZDBYgD+Zx/7mtLH69yt/T8uEvRZAiAgA4oSb/RAeL5YwCIzF4Z5Qk/y9pqGSHxanjCoBTTU9Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5283},"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":"React wrapper for the Apiosk four-layer checkout button","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@apiosk/checkout-web":"^0.1.0","@apiosk/checkout-core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/checkout-react_0.1.0_1775835591361_0.42760640664411276","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-04-10T15:39:51.249Z","modified":"2026-08-16T19:44:08.074Z","0.1.0":"2026-04-10T15:39:51.528Z"},"author":{"name":"Apiosk"},"license":"MIT","homepage":"https://docs.apiosk.com","keywords":["apiosk","checkout","react","nextjs","payments"],"description":"React wrapper for the Apiosk four-layer checkout button","maintainers":[{"email":"ollybrinkman@gmail.com","name":"olivierbrinkman"},{"email":"olivier@apiosk.com","name":"apiosk-packages"}],"readme":"# `@apiosk/checkout-react`\n\nReact and Next.js wrapper for the Apiosk four-layer checkout button.\n\nThis package does not reimplement the UI logic. It mounts the shared\n`@apiosk/checkout-web` custom element and passes the normalized config through\nto that runtime.\n\n## Install\n\nAfter publish:\n\n```bash\nnpm install @apiosk/checkout-react @apiosk/checkout-web @apiosk/checkout-core\n```\n\nBefore publish:\n\n```bash\nnpm install ./subs/checkout-react ./subs/checkout-web ./subs/checkout-core\n```\n\n## Quick start\n\n```tsx\nimport { PayWithApioskButton } from \"@apiosk/checkout-react\";\n\nexport function MerchantCheckout() {\n  return (\n    <PayWithApioskButton\n      merchantName=\"Northstar Marketplace\"\n      productName=\"Automation bundle\"\n      amountLabel=\"24.95 EUR\"\n      orderReference=\"ord_2048\"\n      subtitle=\"One trigger for humans, agents, and programmable rails.\"\n      rails={[\n        {\n          id: \"credits\",\n          status: \"live\",\n          launchUrl: \"https://gateway.apiosk.com/geocode/forward\",\n        },\n        {\n          id: \"x402\",\n          status: \"live\",\n          launchUrl: \"https://gateway.apiosk.com/geocode/forward\",\n        },\n        {\n          id: \"agent\",\n          status: \"pilot\",\n        },\n      ]}\n      callbacks={{\n        successUrl: \"https://merchant.example/success\",\n        cancelUrl: \"https://merchant.example/cancel\",\n        webhookUrl: \"https://merchant.example/webhooks/apiosk\",\n      }}\n    />\n  );\n}\n```\n\n## Ref API\n\n```tsx\nimport { useRef } from \"react\";\nimport { PayWithApioskButton } from \"@apiosk/checkout-react\";\n\nconst checkoutRef = useRef(null);\n\n<PayWithApioskButton ref={checkoutRef} config={config} />;\n\ncheckoutRef.current?.openCheckout();\n```\n\nThe component exposes:\n\n- `openCheckout()`\n- `closeCheckout()`\n- `element`\n\n## Why this wrapper exists\n\nThe React package should stay thin. The DOM runtime belongs in\n`@apiosk/checkout-web`, and the shared schema belongs in\n`@apiosk/checkout-core`.\n\nThat keeps React, Vue, and plain HTML integrations aligned around one contract.\n","readmeFilename":"README.md"}