Embedded checkout

<script src="https://app.agentaos.ai/v1/agentaos.js"></script>
<div id="checkout"></div>
<script>
  const checkout = AgentaOS.checkout.open({
    link: 'https://app.agentaos.ai/pay/UID95sZlBqXrVKlUHKmLhQ',
    target: '#checkout', // leave out for the overlay
    onEvent: (e) => console.log(e.name, e.data),
  });
</script>

pnpm add @agentaos/checkout

import { loadAgentaOS } from '@agentaos/checkout';

const agentaos = await loadAgentaOS(); // null on the server
agentaos?.checkout.open({ link, target: '#checkout', onEvent });

import { AgentaOSCheckout, useAgentaOSCheckout } from '@agentaos/checkout/react';

// Inline: switching `link` (e.g. a Monthly/Yearly toggle) updates the open checkout.
<AgentaOSCheckout link={yearly ? YEARLY_LINK : MONTHLY_LINK} email={user.email} onEvent={onEvent} />

// Overlay, from a button: it lives as long as this component (unmounting closes it)
const { open } = useAgentaOSCheckout();
<button onClick={() => open({ link: STARTER_LINK })}>Buy</button>