{"_id":"@affiliateo/elements-react","_rev":"10-f7a69b63bba4f6fad7243bf44cb7e2ad","name":"@affiliateo/elements-react","dist-tags":{"latest":"1.2.1"},"versions":{"0.1.0":{"name":"@affiliateo/elements-react","version":"0.1.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.1.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"url":"https://github.com/affiliateo/affiliateo/issues"},"dist":{"shasum":"4e62abd773a71af5ed863bb8ccd348f4e101ba7d","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.1.0.tgz","fileCount":12,"integrity":"sha512-s7m3GhN6861dD/IhVQ9GJU0lHFu/jKdqgjq2W95Od3rUvCNkmoTnH+UBVuThhq0NSQv6boU5pUMk34loV/sL5A==","signatures":[{"sig":"MEYCIQCsN2D456zLFh4uxf5njtZ7uWgY4JvEjZmNzJ6wgTRg/wIhAJvat23owQJfGLw/g02fvhQloGLj0tyCSuEg80rqGxds","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21512},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"repository":{"url":"git+https://github.com/affiliateo/affiliateo.git","type":"git","directory":"packages/elements-react"},"_npmVersion":"10.9.2","description":"React components for embedding Affiliateo Elements — referral link, balance, payouts and identity — inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.1.0_1784513629562_0.907832767005254","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@affiliateo/elements-react","version":"0.2.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.2.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"url":"https://github.com/affiliateo/affiliateo/issues"},"dist":{"shasum":"18aee8a6ddc3d7702f2ff168f9f2df21bbba3ed4","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.2.0.tgz","fileCount":12,"integrity":"sha512-WAQNrM6j+L14BIj1FyCP0Sv4frq166yVeAMtLs2vivSCkHEmRQ3sXvwQV45ycwLj5bdO1LMOU/QesnD75N1uLA==","signatures":[{"sig":"MEQCIHFqwJbObKE+WeUAeFCwTNj8d6g2r6SXA2B/FGPdyEW3AiAlfUW2LCPaCyiO/WdKO3lFivvHYyq/3lAYxMaQWdX9vw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25249},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"8b1f5878f75b2dec0f4445a43306623fa94139a3","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"repository":{"url":"git+https://github.com/affiliateo/affiliateo.git","type":"git","directory":"packages/elements-react"},"_npmVersion":"11.8.0","description":"React components for embedding Affiliateo Elements — referral link, balance, payouts and identity — inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"24.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.2.0_1784860713329_0.36710836742995134","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@affiliateo/elements-react","version":"0.2.1","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.2.1","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"url":"https://github.com/affiliateo/affiliateo/issues"},"dist":{"shasum":"05708a1eb95a064b69f89e6d9996b95aed20a156","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.2.1.tgz","fileCount":12,"integrity":"sha512-KVsB4V6Tkn98qKKaaPiH1CM2Jo5kfkMI9D1hMIpg4w8LfdK6g0NjgSqSSTJ0k8B+UiZ3nslpsa6LA27OrekU+w==","signatures":[{"sig":"MEUCIQDNxRa1Li+aS0uyZ/PkZi6iXb3wUFwlJ5WGfP3pRzet7QIgZjJFJOsrOUjhw31h7JW2huNponEuarpW7SozzUaZ9HM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25596},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"78476d61c50b454c7a7a0b65df52a1d593bf39ba","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"repository":{"url":"git+https://github.com/affiliateo/affiliateo.git","type":"git","directory":"packages/elements-react"},"_npmVersion":"11.8.0","description":"React components for embedding Affiliateo Elements — referral link, balance, payouts and identity — inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"24.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.2.1_1784897352981_0.00020547143577487326","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@affiliateo/elements-react","version":"0.3.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.3.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"url":"https://github.com/affiliateo/affiliateo/issues"},"dist":{"shasum":"7a0cbb600c1adddffbe2decda4dc748bfa3ae4c0","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.3.0.tgz","fileCount":12,"integrity":"sha512-fHn+A303vi533iIVkWu7rS2NVkbXvGz97UXCartjISTl1DnkxknCzUlxHv+3KNYC26g4+1061V0/8B1NvKso0g==","signatures":[{"sig":"MEQCIELkfZj/ZJu8YjGmKXh9F9BR4MYWN7fotgHGsoM2kxAkAiBTRbxoIxS9n4RGkUZZpQ4v7rUzLjGdV9AE5cXO2CCNrw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27383},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"d41d3249c2b3797c59ead1cdb53ffd64564fd1c7","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"repository":{"url":"git+https://github.com/affiliateo/affiliateo.git","type":"git","directory":"packages/elements-react"},"_npmVersion":"11.8.0","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"24.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.3.0_1785121339569_0.5120543400904425","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@affiliateo/elements-react","version":"0.4.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.4.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"url":"https://github.com/affiliateo/affiliateo/issues"},"dist":{"shasum":"f92897225bdc38010a2714a33f4ff9c26c3129e0","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.4.0.tgz","fileCount":12,"integrity":"sha512-L9BcupcYYGXWh7FkdKQlujACXYT5oyfOb23WZxBGXc4iw78im9Tdc3e/z6mk3/kAT21V+2i2c8Dntr6lEAQQCQ==","signatures":[{"sig":"MEQCIDkKRhIvckkULy2wLwgXgQBAdDe5EgcjbRa7NZyUh8eqAiBiew+p0DaIx1kXMgjoCcqGzKkM5Tmeesgir5fUq+FBsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29132},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"190348e9bcad95231a8cf6e176017f6a20fb0adf","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"repository":{"url":"git+https://github.com/affiliateo/affiliateo.git","type":"git","directory":"packages/elements-react"},"_npmVersion":"10.9.2","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.4.0_1785296893964_0.8382322123182002","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@affiliateo/elements-react","version":"0.4.1","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.4.1","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"email":"support@affiliateo.com"},"dist":{"shasum":"aafbf8774ffb732a7fa8965bc8585a3d59436f12","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.4.1.tgz","fileCount":12,"integrity":"sha512-4j7pdtG7vriQsjhS4BCqm0cRbllKg8lJEyxF7ATXOqg1vu9vlzuab2NG02SSWPQA0VCD9pAtrSsYpHZmLrKoQg==","signatures":[{"sig":"MEUCIQDUhfKZGBgWW7kUxolIZUUnIZ4xxultW+0FZef5KdS6gAIgVQ8XTP49vjIWumqdT5PEhvgoKR2lqRuCdJO1nl7N8mE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28911},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"eefeb1f7f88efdda71742206720d36a3d0b12d14","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"_npmVersion":"10.9.2","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.4.1_1785298396308_0.3140121587936764","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@affiliateo/elements-react","version":"0.5.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@0.5.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"email":"support@affiliateo.com"},"dist":{"shasum":"55f8b782bc871ce7632866f4d9b145b735e69685","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-0.5.0.tgz","fileCount":12,"integrity":"sha512-aPqFCJUTLyrPcdUr0+zEWM+CehE7xIPJfcMWQKHe2tE2Bdsh40bEvDtB9W7CBu3URj99WzZZ2Z1PPzZx5AIJ3g==","signatures":[{"sig":"MEUCIHEBPOOREdHqJ4bRby5ON60YD9s6E8ibaVttf+4K70PRAiEAkG4vBUJkM9df2r9WTkoYuPGaH5dj1XWTVxwlb6lEnQ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29609},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"fd3068e48ab53a6da7b30e05828b0dfc59d00da4","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"_npmVersion":"10.9.2","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_0.5.0_1785378935160_0.8164121088147678","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@affiliateo/elements-react","version":"1.0.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@1.0.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"email":"support@affiliateo.com"},"dist":{"shasum":"9723b440b631b066289983014253874b63bcd6ef","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-1.0.0.tgz","fileCount":12,"integrity":"sha512-YI7bHhZ3m3exLDTymtzZGK2AwqTtvQtMz1mdvfSBwm9evs/A7GY4d5/mZe27E/+V3UCau3wotcrqOPHFTAJvHA==","signatures":[{"sig":"MEUCIQDTvrF7yPRhuRQBsOKcXw5QcglKMc5k+cOBBpUkhIGSOgIgfk37w58wV6PH9V75x2fnYhBmbgdaiynJJO4yxt6ddUg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31694},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"d6d874f96fc76898974b8797f436577f9c6c471e","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"_npmVersion":"11.8.0","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"24.8.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_1.0.0_1786066582138_0.5860763564598384","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@affiliateo/elements-react","version":"1.2.0","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","_id":"@affiliateo/elements-react@1.2.0","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"homepage":"https://affiliateo.com/docs/elements","bugs":{"email":"support@affiliateo.com"},"dist":{"shasum":"624371b0bb8f856bb21df823efb5bd6d53de1696","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-1.2.0.tgz","fileCount":12,"integrity":"sha512-Xa86e2WsLLXjTIHt9Ws6zlnEJwq0iyZ3mKhUTYxBPda5+hu4YXR9zMs/BuD5KNKLGTZnRz8R2mBfZtaFPpg8dA==","signatures":[{"sig":"MEQCID8b78wmGn9kzncFnn3xPl1lgvTwTnOh9nvpKvtDQmDnAiB2bCJ8vRhQSo3/5mx5V4/YL1PKupFcfZ1J9K++ZxA43g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36594},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"5219f86e7316243121db42c30734b95200626fd6","scripts":{"build":"tsc","prepack":"npm run build"},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"_npmVersion":"10.9.2","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/elements-react_1.2.0_1787285348969_0.2423661809273261","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@affiliateo/elements-react","version":"1.2.1","description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"sideEffects":false,"scripts":{"build":"tsc","prepack":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","typescript":"^5.0.0"},"keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"license":"MIT","homepage":"https://affiliateo.com/docs/elements","bugs":{"email":"support@affiliateo.com"},"_id":"@affiliateo/elements-react@1.2.1","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Tu2GXbZ2gQrmvEQRgGh83NDMaoXUpiB+TnR06IM4IGXtoIcGkzuqHimfxSXfytgPFanTgKOwNu9G9NNoAuvnWw==","shasum":"f7f96a25e5178d08630262a0975dd6afaf5c4b6c","tarball":"https://registry.npmjs.org/@affiliateo/elements-react/-/elements-react-1.2.1.tgz","fileCount":12,"unpackedSize":36462,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCKUHciisalE09N5dkezSwGG897xrlUaNSQ7glaMP/VrgIgLxh7Yju1GmFB8dQy4ukAbVCQySbG2ZoJlvLEI1v0oik="}]},"_npmUser":{"name":"nicograjales","email":"Grajalesn17@gmail.com"},"directories":{},"maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/elements-react_1.2.1_1788273753757_0.41055127642776656"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-20T02:13:49.456Z","modified":"2026-09-01T14:42:34.077Z","0.1.0":"2026-07-20T02:13:49.688Z","0.2.0":"2026-07-24T02:38:33.491Z","0.2.1":"2026-07-24T12:49:13.116Z","0.3.0":"2026-07-27T03:02:19.726Z","0.4.0":"2026-07-29T03:48:14.107Z","0.4.1":"2026-07-29T04:13:16.463Z","0.5.0":"2026-07-30T02:35:35.370Z","1.0.0":"2026-08-07T01:36:22.282Z","1.2.0":"2026-08-21T04:09:09.125Z","1.2.1":"2026-09-01T14:42:33.899Z"},"bugs":{"email":"support@affiliateo.com"},"license":"MIT","homepage":"https://affiliateo.com/docs/elements","keywords":["affiliateo","affiliate","elements","embedded","react","components","payouts","referral"],"description":"React components for embedding Affiliateo Elements (referral link, balance, payouts and identity) inside your own app.","maintainers":[{"name":"nicograjales","email":"Grajalesn17@gmail.com"}],"readme":"# @affiliateo/elements-react\n\nReact components for embedding [Affiliateo Elements](https://affiliateo.com/docs/elements) inside your own app. Your users get their referral link, watch their earnings, and cash out without ever leaving your product.\n\nThis is a thin, typed binding over the hosted `embed.js` script. The elements, security, and versioning live on the Affiliateo side, so a new element or theme token never means a package upgrade.\n\n## Install\n\n```bash\nnpm install @affiliateo/elements-react\n```\n\n`react` and `react-dom` (18+) are peer dependencies.\n\n## How it works\n\n1. Your **backend** mints a session with your secret `afk_` key.\n2. Your **frontend** hands the returned client secret to `<AffiliateoElements>`.\n3. Each element renders as an iframe on the Affiliateo domain, inside your page.\n\nYour secret key never reaches the browser, and the affiliate's data never passes through your servers.\n\n## 1. Mint a session (your backend)\n\nOne endpoint of your own that mints a session for the logged-in user. The `afk_` key stays on your server.\n\n```ts\n// POST /api/affiliateo-session\napp.post('/api/affiliateo-session', async (req, res) => {\n  const r = await fetch(\n    `https://affiliateo.com/api/v1/businesses/${SLUG}/apps/${APP_ID}/affiliates/embed-session`,\n    {\n      method: 'POST',\n      headers: {\n        Authorization: `Bearer ${process.env.AFFILIATEO_KEY}`,\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({\n        email: req.user.email, // who this session is for\n        components: ['affiliate', 'balance', 'withdraw'],\n        allowed_origins: ['https://app.example.com'], // pages allowed to frame it\n        // Optional: theme from first paint, and load a brand font.\n        appearance: { colorPrimary: '#1754D8', borderRadius: '12px' },\n        fonts: [{ family: 'Inter', src: 'https://cdn.example.com/inter.woff2' }],\n      }),\n    },\n  )\n  res.json({ client_secret: (await r.json()).client_secret })\n})\n```\n\n## 2. Mount (your frontend)\n\nWrap the part of your app that shows elements in one `<AffiliateoElements>` provider, then drop in the elements you want.\n\n```tsx\n'use client'\n\nimport {\n  AffiliateoElements,\n  AffiliateElement,\n  BalanceElement,\n  WithdrawElement,\n} from '@affiliateo/elements-react'\n\nexport function AffiliatePanel() {\n  return (\n    <AffiliateoElements\n      fetchClientSecret={() =>\n        fetch('/api/affiliateo-session')\n          .then((r) => r.json())\n          .then((d) => d.client_secret)\n      }\n    >\n      <AffiliateElement />\n      <BalanceElement />\n      <WithdrawElement />\n    </AffiliateoElements>\n  )\n}\n```\n\n`fetchClientSecret` is a function, not a string, so the SDK can call it again on its own: it re-mints shortly before each hourly session expiry (and on tab wake after a sleep) and swaps the element to the new session. A page left open keeps working — just make sure the function mints a fresh secret each call.\n\nYou never set the height. Each element measures itself and resizes its own frame; `initialHeight` is only the placeholder shown until the first measurement arrives.\n\n## Which to use, per screen\n\nElements and the REST API are designed to mix, and which side a screen belongs\non is mostly a performance question. Every element is its own iframe, so a page\nstacking four pays for four loads before it paints and your app cannot cache any\nof them. Anything the API already returns is faster built yourself and can be\ncached, so the screen renders on open.\n\nBuild `link`, `stats`, `products`, `activity` and `balance` from\n`GET /affiliates?email=` + `GET /apps/{appId}` + `GET /affiliates/conversions`.\nMount elements only for `withdraw`, `payouts` and `identity`: the three that\ncollect bank details, open the account-wide wallet, or run ID capture. Mounting\neverything still works, it is just slower and uncacheable.\n\n**The recurring figures are on the elements too.** `<StatsElement>` and\n`<AffiliateElement>` show MRR, ARR, subscriptions, in-trial and not-renewing beneath\nclicks/sales/earned whenever that affiliate has subscriptions or trials running, and render nothing\nat all when they do not. Same `GET /affiliates?email=` read through the same\ncode, so an element and a hand-built screen cannot report different MRR for one\nperson. Churn is on the elements too, and used not to be: the API always\nreturned an affiliate their own churn, so the element was the only surface\nwithholding it. The block derives the rate from the count, and shows a dash\nrather than a percentage until five people have ever subscribed.\n\n**The QR needs no building either.** `links.qr` on that same response is a plain\npublic image URL, so the whole thing is one `<img>`:\n\n```jsx\n<img src={affiliate.links.qr} alt=\"Referral QR code\" width={256} height={256} />\n```\n\n`https://affiliateo.com/qr/{short_code}.svg` (or `.png`, which is what email\nclients need — they strip inline SVG). No key, no session, no SDK, cached\nforever. It also sends `Access-Control-Allow-Origin: *`, which is what a\nDownload button actually requires: a cross-origin `<a download>` is ignored by\nbrowsers and navigates to the file instead, so you have to fetch it into a blob\nfirst.\n\n```jsx\nasync function download(url) {\n  const blob = await fetch(url).then((r) => r.blob())\n  const href = URL.createObjectURL(blob)\n  Object.assign(document.createElement('a'), { href, download: 'referral-qr.png' }).click()\n  URL.revokeObjectURL(href)\n}\n```\n\nOptional `?dark=` and `?light=` take hex colours, and `?size=` sizes the raster.\nThe pair must stay dark-on-light with real contrast or the request is a 400: a\nlow-contrast or inverted code is one that will not scan, and finding that out\nafter the flyers are printed is not a recoverable mistake. The image encodes the\nSHORT link tagged `?s=qr`, so scans separate from link taps in the affiliate's\nclick breakdown without you doing anything.\n\nThe `qr` ELEMENT is still there and still the right call when you want our\nstyled card with its copy-and-download affordances rather than a bare image.\n\nLists are the sharpest case. The embedded `activity` and `payouts` elements show\nthe 25 most recent and **neither paginate nor filter**, so an affiliate with a\nyear of sales cannot reach the 26th and cannot ask to see just their refunds,\nwhile `GET /affiliates/conversions` is cursor-paginated (`?limit=`,\n`?starting_after=`) and filterable by date (`?from=&to=`) and by type\n(`?type=refund,chargeback`, comma-separated, any of `subscription`, `one_time`,\n`renewal`, `trial`, `refund`, `chargeback`).\n\n**Filter on our side, not in yours.** Both filters are applied in the query,\nupstream of the cursor, so a filtered feed pages through matching rows only.\nFiltering rows you have already fetched looks equivalent and is not: it can only\nsearch what is on screen, so a Refunds chip finds nothing for someone whose\nsingle refund sits 300 rows down, and the chip reads as broken. An unknown\n`?type=` value comes back 400 rather than an empty page, so a typo can never be\nmistaken for \"this affiliate has no refunds\".\n\nIn our own apps that becomes one menu beside the list heading, five entries over\nsix raw types: **All types**, **Sales** (`?type=subscription,one_time`),\n**Renewals** (`renewal`), **Trials** (`trial`), **Refunds**\n(`?type=refund,chargeback`). Whether a first sale renews, and whether a reversal\nwas the customer asking or the bank taking, are not distinctions an affiliate\nfilters on: both mean money back. The rows still say Sale and Chargeback\nindividually, so the difference stays visible where it is useful.\n\nCopy is not the catch. The API returns data, never labels, but you do not have to\nwrite your own translations: the exact strings our elements use are published at\n`https://affiliateo.com/locales/{lang}.json` in all 16 languages. Lift\n`embed.appEarnings.*` for the buckets and their hint line, `embed.activity.*` for\nrow types and empty states, `embed.filter.preset.*` for the date chips, and\n`embed.link.format*` for the picker. The `embed.activity.*`\ntype words double as the labels for a Type menu, since a row reading \"Refund\"\nand a filter offering \"Refund\" should not be two different translations of the\nsame word. Copy the values into your own catalogue at\nbuild time rather than fetching live, since those files are the elements' runtime\nasset and not a versioned API. Keep the money words verbatim even if you reword\nthe rest: **Paid** means already in their Affiliateo balance and *not* yet in\ntheir bank, so \"Paid out\" is the wording to avoid.\n\n## Components\n\n| Component | Shows | Confirms identity |\n| --- | --- | --- |\n| `<AffiliateElement>` | Referral link + clicks, sales, earned, and MRR/subscriptions | No |\n| `<LinkElement>` | Just the referral link, with a format dropdown | No |\n| `<QrElement>` | A scannable QR code of the referral link | No |\n| `<StatsElement>` | Clicks, sales and total earned, plus MRR/ARR/subscriptions when they have any | No |\n| `<ProductsElement>` | Your catalogue with per-product commission | No |\n| `<ActivityElement>` | Recent sales; refunds as negatives | No |\n| `<BalanceElement>` | Wallet: ready, pending, settling | Yes |\n| `<WithdrawElement>` | Balance + a button to cash out | Yes |\n| `<IdentityElement>` | Get verified and paid-ready | Yes |\n\nThe three money/identity components open a small confirmation window on `affiliateo.com` before they render, because an Affiliateo wallet is per person and spans every program the affiliate is in. Withdrawing and identity checks continue in that same window, so your page never rebuilds bank collection or ID capture and never needs camera permission.\n\nEach accepts `initialHeight`, `title`, `className`, and `style`. For a component chosen at runtime, use `<AffiliateoElement component=\"balance\" />`.\n\n`<WithdrawElement>` additionally accepts `flow=\"inline\"`, which renders the full cash-out form in place (amount, payout speed, bank, fees) instead of the balance plus a button that opens the hosted portal in a popup. The popup stays the default because the sign-in confirm works best top-level; opt in when a popup would jar on your page.\n\n## When the sign-in lapses\n\nOne confirm covers every gated element and keeps covering it: confirming signs\nthe person in on Affiliateo's side, so the other gated elements on the page\nrecognise that session with no second email, and so does the next visit. The\nstep-up itself lasts an hour and lives only in the element's memory; the\nsign-in behind it outlives that.\n\nWhen it eventually lapses the element goes back to asking, and says so. Only\nworth handling if YOUR page remembers the signed-in state somewhere:\n\n```tsx\n<BalanceElement onLocked={() => setSignedIn(false)} />\n```\n\nWithout it, whatever you unhid on the strength of that memory keeps showing\nnext to a login form.\n\n## Make it feel instant\n\nMount every element when your page opens and show or hide them as tabs\nswitch, instead of mounting each one on tab-click. A hidden element still\nloads, so its tab opens already rendered with fresh data. This is safe for\nthe money elements too: pre-mounted, they simply show their confirm gate\nuntil the person uses them.\n\nShowing your own skeleton over an element? Hide it on `onReady`, not on the\niframe's `load` event: `load` fires when the document arrives, which is\nbefore the element has fetched its data and laid out, so a placeholder\nremoved there uncovers an empty box. `onReady` fires after layout, with your\nappearance already applied, and again after any reload (a finished\nwithdrawal, an hourly session refresh).\n\n```tsx\n<BalanceElement onReady={() => setLoading(false)} />\n```\n\n## Theming\n\nPass `appearance` at mint for a first paint already in your brand (no flash). To restyle live, for example on a dark-mode toggle, pass `appearance` to the provider and update it:\n\n**If your page is dark, send `colorBackground`.** An element paints a ground only\nwhen you give it one, and that ground covers the whole element. Leave it out and\nthe element stays transparent, which is supported, but the browser's own backdrop\nshows wherever your content does not reach, and that backdrop is white.\n\nThat is worth stating because it is invisible while you build. A white backdrop\nbehind a light page looks exactly like a correct element, so a dark theme can ship\nlooking perfect in development and render as a white slab for every real visitor.\nIf you theme dark at all, send the token.\n\n`colorScheme` (`light` or `dark`) is the companion and is usually unnecessary: it\nis inferred from your `colorText`, since light text means a dark page. Send it only\nwhen that inference is wrong.\n\nAnything unusable is dropped rather than failing the mint, and comes back in\n`ignored_appearance_keys`. Check that field first when a colour does not appear.\n\n```tsx\n<AffiliateoElements fetchClientSecret={...} appearance={{ colorBackground: '#191919', colorText: '#eee' }}>\n```\n\nColours, gradients, fonts, sizes, radii, spacing, and button and link styling are all tokens. `colorBackground`, `colorSurface`, and `buttonColor` also take a CSS gradient. The full list is in the [docs](https://affiliateo.com/docs/elements). Custom fonts are loaded at **mint** (the `fonts` array above), not through `appearance`.\n\n## Server components\n\nThe provider and elements are client components (they use browser APIs and the DOM). In Next.js App Router, render them from a file with `'use client'`, or import them into a client component. Mounting only happens in the browser.\n\n## Native apps (iOS / Android)\n\nFor a native app, do not use this package. Mint the session with `\"platform\": \"native\"` (omit `allowed_origins`) and open the returned `element_urls` entry top-level in a `WKWebView` or `android.webkit.WebView`. See the [docs](https://affiliateo.com/docs/elements).\n\n## Troubleshooting\n\n- **Blank element.** Your page's origin is probably not in `allowed_origins`. The browser console will say the frame was refused.\n- **\"Session expired\".** Make sure `fetchClientSecret` mints a fresh secret each call rather than returning a cached string.\n- **Confirmation window blocked.** It opens from a user tap; a pop-up blocker will stop one opened on load.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}