Skip to content
Aller au contenu
Charitips

Integrate

Widgets

The ready-made blocks you can embed in your product, the key or token each one opens with, and how to install them for React, React Native or any web page.

Widgets are ready-made blocks of the Charitips interface that you embed in your product: choosing a charity, giving with a card, following a campaign, filling billing details. They load in a frame from Charitips and talk to the API for you. They are one way to integrate among others: use them whole, next to your own screens, or build everything yourself with the API.

In short

  • Install @charitips/embed-react, @charitips/embed-react-native or @charitips/embed, or load the script on any page.
  • Point them at https://embed.sandbox.charitips.com on the sandbox and https://embed.charitips.com on live.
  • The charity selection widget opens with the campaign's publicKey, which can be public. Admin and donor widgets need a token your server creates, valid one day.
  • Your API credentials never reach the browser: when a widget needs a donation created, it calls your server, which calls Charitips.

The widgets

WidgetWhat it doesOpens with
Charity selectionshows the campaign's charities and lets the person choose onethe campaign's publicKey
Donorthe person gives with their own card, once or every month (B2C)the publicKey, or a donor token from Create a donor widget token
Admincampaign metrics, fiscal receipts and the selection, for your customers or your teaman admin token from Create an admin widget token
Billinga business customer fills its billing details and payment methodthe secret of a shareable billing link

Find a campaign's publicKey in the create response or in its information tab in the dashboard.

Install

Shell
npm install @charitips/embed-react
tsx
import { CharitipsProvider } from '@charitips/embed-react'; export function App({ children }) {  return (    // https://embed.charitips.com on live    <CharitipsProvider baseUrl="https://embed.sandbox.charitips.com">      {children}    </CharitipsProvider>  );}

The libraries come with their TypeScript types.

Options every widget shares

  • size: fillContainer fills the parent element; fitContent grows with the content, for a widget inside a scrolling page. Admin and donor widgets default to fitContent, the others to fillContainer.
  • locale: fr (default) or en, on every widget but billing.
  • id: a name of your own, to tell apart several widgets on one page.

Related

Authentication, Charities and selections, Your users give their own money.