Web SDK

The Cesto Web SDK puts the whole invest flow on your own page. Your button opens a themed Cesto dialog, the visitor signs in, funds, and invests inside it, and your page gets the outcome as a callback. Nothing navigates away. The loader itself is deliberately thin: it holds no tokens, makes no requests, and stores no state. Everything sensitive happens on the Cesto origin inside the dialog.

Drop-in

A script tag and a data-cesto-invest attribute is a complete integration. No build step required.

Themed to your site

Eight color and shape tokens, applied to the dialog and to the bundled button, so the two never disagree.

Events you can act on

onSuccess, onScheduled, onError, onPositionClosed, and more — fired on your page, ready for your analytics.

React-native (the other kind)

<CestoProvider>, a styled <CestoInvestButton>, and useCestoInvest(). Client-only, Next.js App Router friendly.

The packages

Package	What it is
`@cesto/web-sdk`	Framework-agnostic browser loader. ESM, CJS, and an IIFE bundle for script tags. Zero runtime dependencies beyond the protocol package.
`@cesto/react`	React bindings: provider, styled button, hook. Ships a `'use client'` banner.
`@cesto/web-protocol`	The versioned `postMessage` types shared by the loader and the invest app. You rarely import this directly.

Not to be confused with @cesto/sdk, the Server SDK. That one runs on your backend with a secret key and gives you the full API. This one runs in the browser with a publishable key and gives you the invest flow. See Choose your integration.

What it looks like

<script src="https://cdn.jsdelivr.net/npm/@cesto/web-sdk/dist/cesto-invest.iife.js" defer></script>

<button data-cesto-invest="golden-age" data-cesto-pk="cesto_pk_your_key">
  Invest now
</button>

import { CestoProvider, CestoInvestButton } from '@cesto/react';

<CestoProvider apiKey="cesto_pk_your_key">
  <CestoInvestButton basket="golden-age" amountUsd={100}>
    Invest now
  </CestoInvestButton>
</CestoProvider>;

import { Cesto } from '@cesto/web-sdk';

const cesto = new Cesto({ apiKey: 'cesto_pk_your_key' });

button.addEventListener('click', () => {
  cesto.invest({ basket: 'golden-age', onSuccess: (e) => track(e) });
});

How the flow runs

Your CTA is clicked

The loader opens the invest surface — by default an in-page dialog: a full-viewport transparent iframe onto app.cesto.co/invest/<basket>. A popup window is available as an option and as an automatic fallback.

Cesto verifies your key

The backend matches your publishable key against the page’s origin and onVerified fires with { partner }, switching on your branding and attribution.

The user signs in, funds, and invests

All inside the dialog, on the Cesto origin. Some sign-in methods cannot be framed and move to a top-level window — the dialog stays on your page and waits. See Modes.

You get the outcome

onSuccess with { basket, amountUsd, status }, or onScheduled if the market is closed, or onError. See Events.

Requirements

A publishable key (cesto_pk_…) and the origins you will embed from — see API keys.
A basket slug (the last path segment of app.cesto.co/product/<slug>) or product UUID.
A modern browser. React bindings need React 18 or later.

Call invest() synchronously inside the click handler — no await, no timer before it. Browsers block popups that are not tied to a user gesture, and even in dialog mode the popup fallback can kick in.

Next steps

Quickstart

A working invest button in three flavours.

Script tag

The no-build path: data attributes and bindInvestButtons.

JavaScript API

The Cesto class, invest(), and the session handle.

React

Provider, button, and hook reference.

Modes

Dialog vs popup, the fallback, and the login handoffs.

Theming

Eight tokens, and how they reach the dialog.

Events

Every callback, when it fires, and how often.

Security

Why a public key is safe, and what the loader refuses to do.

Troubleshooting

Popup blockers, COOP, CSP, and local testing.

Get started

Widgets

Server SDK

Web SDK

Drop-in

Themed to your site

Events you can act on

React-native (the other kind)

The packages

What it looks like

How the flow runs

Requirements

Next steps

Quickstart

Script tag

JavaScript API

React

Modes

Theming

Events

Security

Troubleshooting

Drop-in

Themed to your site

Events you can act on

React-native (the other kind)

​The packages

​What it looks like

​How the flow runs

​Requirements

​Next steps

Quickstart

Script tag

JavaScript API

React

Modes

Theming

Events

Security

Troubleshooting

The packages

What it looks like

How the flow runs

Requirements

Next steps