React kit

Drop-in buttons and a live balance for any React app. They open our pages in a popup, so the user never leaves your app.

npm install kredo-react

import { BuyCreditsButton, ConnectCreditsButton, CreditsBalance, CreditsProvider } from "kredo-react";
 
<CreditsProvider endpoint="/api/credits" pagesUrl={PAGES_URL}>
  <CreditsBalance />
  <ConnectCreditsButton />
  <BuyCreditsButton />
</CreditsProvider>

Try it

These are the real components. Pick a user to see what each one shows.

Connected with a limit, and plenty of credits.

Your backend

The kit never holds a key. It asks your server, at endpoint, two things:

// What to show this visitor
app.get("/api/credits", async (req, res) => {
  res.json(await credits.session(req.session.creditsUser));
});
 
// Back from the connect popup: swap the code for the user's NEAR account
app.post("/api/credits", async (req, res) => {
  const { user } = await credits.exchangeCode(req.body.code);
  req.session.creditsUser = user;
  res.json(await credits.session(user));
});

Your own UI

useCredits() gives you the same state and actions:

const { state, connect, buy } = useCredits();
// state.user: { balance, connected, limit, spendable }

PreviousCharge NextWebhooks