Clarety Widgets

13.0.6 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'clarety-widgets' ↓

cause Package not installed or version mismatch.

fix

Run 'npm install clarety-widgets@13.0.6'.

error TypeError: Cannot read properties of undefined (reading 'apiKey') ↓

cause Config prop not passed or missing required fields.

fix

Ensure you pass a config object with required apiKey, organizationId, and campaignId.

error React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object ↓

cause Default import instead of named import for a widget.

fix

Use named import: import { DonationWidget } from 'clarety-widgets'.

Warnings

breaking React 16.8+ required; will not work with older React versions. ↓

fix Upgrade React to 16.8 or later.

breaking ESM-only package; CommonJS require() will fail. ↓

fix Use import syntax or configure bundler to handle ESM.

deprecated Version 12.x branches are no longer receiving new features; only critical fixes. ↓

fix Upgrade to v13.x for latest features.

gotcha Bootstrap CSS must be imported separately; not included in the package. ↓

fix Add 'import "bootstrap/dist/css/bootstrap.min.css";' in your entry point.

gotcha Configuration object may be passed as `config` prop; other prop names might not work. ↓

fix Use `config` prop for configuration object.

breaking Node 22.11.0 or later required for build; lower Node versions may cause issues. ↓

fix Upgrade Node to v22.11.0+.

gotcha Loqate address autocomplete requires extra configuration and API key. ↓

fix Set Loqate API key in config under `loqate` key.

Install

npm install clarety-widgets

yarn add clarety-widgets

pnpm add clarety-widgets

Imports

DonationWidget

wrong

import DonationWidget from 'clarety-widgets'

correct

import { DonationWidget } from 'clarety-widgets'

Named export, not default export.

CheckoutWidget

wrong

const CheckoutWidget = require('clarety-widgets').CheckoutWidget

correct

import { CheckoutWidget } from 'clarety-widgets'

ESM-only package; CJS require not supported.

UpdatePaymentDetailsWidget

wrong

import { UpdatePaymentDetails } from 'clarety-widgets'

correct

import { UpdatePaymentDetailsWidget } from 'clarety-widgets'

Full component name is UpdatePaymentDetailsWidget, not shortened.

WidgetConfig

wrong

import { WidgetConfig } from 'clarety-widgets'

correct

import type { WidgetConfig } from 'clarety-widgets'

Type import recommended for TypeScript users; it is a type.

Quickstart

Basic setup of a DonationWidget with required config and Bootstrap CSS.

import React from 'react';
import { DonationWidget } from 'clarety-widgets';
import 'bootstrap/dist/css/bootstrap.min.css';

const config = {
  apiKey: process.env.CLARETY_API_KEY ?? '',
  organizationId: 'org_123',
  campaignId: 'camp_456',
  topCountries: ['US', 'CA', 'GB']
};

function App() {
  return (
    <div className="App">
      <h1>Donate Now</h1>
      <DonationWidget config={config} />
    </div>
  );
}

export default App;