React

npm install @encorekit/web-sdk

// main.tsx
import ReactDOM from 'react-dom/client';
import { EncoreProvider } from '@encorekit/web-sdk/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <EncoreProvider apiKey={import.meta.env.VITE_ENCORE_API_KEY}>
    <App />
  </EncoreProvider>
);

import { useEncore } from '@encorekit/web-sdk/react';

function CancelButton() {
  const Encore = useEncore();

  const onCancel = async () => {
    Encore.identify(currentUser.id); // once you know the real user (see identify())

    const result = await Encore.placement('cancel_flow').show(); // never rejects
    if (result.status !== 'claimed') {
      proceedWithCancellation(); // 'dismissed' or 'unavailable': continue your flow
    }
  };

  return <button onClick={onCancel}>Cancel subscription</button>;
}