Subscribe
Seat-based plans. With JS the tier table is priced live from GET /v1/catalog; without it, a plain plan picker posts the same fields.
Monthly tiers
Markup
<uc-subscribe data-brand="uc" data-env="qa" data-skus="uc_community_monthly,uc_pro_monthly">
<form class="ucp" method="post" action="https://pay-qa.undercurrent.ai/v1/checkout" accept-charset="utf-8">
<input type="hidden" name="kind" value="subscription">
<input type="hidden" name="brand" value="uc">
<input type="hidden" name="src" value="embed">
<label>Organization<input name="org" required autocomplete="organization" placeholder="your-org"></label>
<label>Seats<input name="quantity" type="number" min="1" max="500" step="1" required value="1"></label>
<label>Plan<select name="sku" required>
<option>uc_community_monthly</option>
<option>uc_pro_monthly</option></select></label>
<button type="submit" class="ucp-btn">Subscribe</button>
<div hidden>
<label>Company<input name="hp_company" tabindex="-1" autocomplete="off"></label></div>
<p class="ucp-status" aria-live="polite"></p>
<p class="ucp-note">Secure checkout on Stripe. Card details never touch this page.</p></form>
</uc-subscribe>Annual, org fixed by the host page
Markup
<uc-subscribe data-brand="uc" data-env="qa" data-skus="uc_community_annual,uc_pro_annual" data-org="demo-org" data-quantity="5">
<form class="ucp" method="post" action="https://pay-qa.undercurrent.ai/v1/checkout" accept-charset="utf-8">
<input type="hidden" name="kind" value="subscription">
<input type="hidden" name="brand" value="uc">
<input type="hidden" name="src" value="embed">
<input type="hidden" name="org" value="demo-org">
<label>Seats<input name="quantity" type="number" min="1" max="500" step="1" required value="5"></label>
<label>Plan<select name="sku" required>
<option>uc_community_annual</option>
<option>uc_pro_annual</option></select></label>
<button type="submit" class="ucp-btn">Subscribe</button>
<div hidden>
<label>Company<input name="hp_company" tabindex="-1" autocomplete="off"></label></div>
<p class="ucp-status" aria-live="polite"></p>
<p class="ucp-note">Secure checkout on Stripe. Card details never touch this page.</p></form>
</uc-subscribe>QA today: Stripe is not connected yet, so pressing the button
lands on the pay service's own "Payments aren't switched on yet — no charge was made" page
(HTTP 503). That is the designed degraded state, not a bug. Once Stripe test mode is connected
the same button lands on Stripe Checkout; pay with 4242 4242 4242 4242.
Works with JavaScript off: the element wraps a plain <form method="post">.
Turn JS off and reload — you get an unstyled form that still reaches checkout.