{"id":18210,"library":"clarety-widgets","title":"Clarety Widgets","description":"Clarety Widgets is a React component library for building donation, checkout, and payment widgets, currently at v13.0.6. It provides over 30 widgets including donation forms, checkout flows, payment method updates, and address autocomplete (Loqate). The library is maintained by Clarety and follows an aggressive release cadence. It requires React 16.8+, React Bootstrap 1.0+, and Bootstrap 4.3+, and is ESM-only, compatible with Node 22.11.","status":"active","version":"13.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/clarety/clarety-widgets","tags":["javascript"],"install":[{"cmd":"npm install clarety-widgets","lang":"bash","label":"npm"},{"cmd":"yarn add clarety-widgets","lang":"bash","label":"yarn"},{"cmd":"pnpm add clarety-widgets","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for styling","package":"bootstrap","optional":false},{"reason":"Peer dependency for React components","package":"react","optional":false},{"reason":"Peer dependency for React Bootstrap integration","package":"react-bootstrap","optional":false},{"reason":"Peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Named export, not default export.","wrong":"import DonationWidget from 'clarety-widgets'","symbol":"DonationWidget","correct":"import { DonationWidget } from 'clarety-widgets'"},{"note":"ESM-only package; CJS require not supported.","wrong":"const CheckoutWidget = require('clarety-widgets').CheckoutWidget","symbol":"CheckoutWidget","correct":"import { CheckoutWidget } from 'clarety-widgets'"},{"note":"Full component name is UpdatePaymentDetailsWidget, not shortened.","wrong":"import { UpdatePaymentDetails } from 'clarety-widgets'","symbol":"UpdatePaymentDetailsWidget","correct":"import { UpdatePaymentDetailsWidget } from 'clarety-widgets'"},{"note":"Type import recommended for TypeScript users; it is a type.","wrong":"import { WidgetConfig } from 'clarety-widgets'","symbol":"WidgetConfig","correct":"import type { WidgetConfig } from 'clarety-widgets'"}],"quickstart":{"code":"import React from 'react';\nimport { DonationWidget } from 'clarety-widgets';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nconst config = {\n  apiKey: process.env.CLARETY_API_KEY ?? '',\n  organizationId: 'org_123',\n  campaignId: 'camp_456',\n  topCountries: ['US', 'CA', 'GB']\n};\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <h1>Donate Now</h1>\n      <DonationWidget config={config} />\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Basic setup of a DonationWidget with required config and Bootstrap CSS."},"warnings":[{"fix":"Upgrade React to 16.8 or later.","message":"React 16.8+ required; will not work with older React versions.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Use import syntax or configure bundler to handle ESM.","message":"ESM-only package; CommonJS require() will fail.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Upgrade to v13.x for latest features.","message":"Version 12.x branches are no longer receiving new features; only critical fixes.","severity":"deprecated","affected_versions":">=12.0.0 <13.0.0"},{"fix":"Add 'import \"bootstrap/dist/css/bootstrap.min.css\";' in your entry point.","message":"Bootstrap CSS must be imported separately; not included in the package.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use `config` prop for configuration object.","message":"Configuration object may be passed as `config` prop; other prop names might not work.","severity":"gotcha","affected_versions":">=12.0.0"},{"fix":"Upgrade Node to v22.11.0+.","message":"Node 22.11.0 or later required for build; lower Node versions may cause issues.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Set Loqate API key in config under `loqate` key.","message":"Loqate address autocomplete requires extra configuration and API key.","severity":"gotcha","affected_versions":">=13.0.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install clarety-widgets@13.0.6'.","cause":"Package not installed or version mismatch.","error":"Error: Cannot find module 'clarety-widgets'"},{"fix":"Ensure you pass a config object with required `apiKey`, `organizationId`, and `campaignId`.","cause":"Config prop not passed or missing required fields.","error":"TypeError: Cannot read properties of undefined (reading 'apiKey')"},{"fix":"Use named import: import { DonationWidget } from 'clarety-widgets'.","cause":"Default import instead of named import for a widget.","error":"React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}