uc-pay examples

Credits top-up

Prepaid LLM credits, one dollar per unit: the chosen chip is the quantity. Credits need an org to land in.

Ask for the org

Amount

Secure checkout on Stripe. Card details never touch this page.

Markup
<uc-credits data-brand="uc" data-env="qa">
    <form class="ucp" method="post" action="https://pay-qa.undercurrent.ai/v1/checkout" accept-charset="utf-8">
    <input type="hidden" name="kind" value="credits">
    <input type="hidden" name="brand" value="uc">
    <input type="hidden" name="src" value="embed">
    <input type="hidden" name="sku" value="uc_credits_1usd">
    <label>Organization<input name="org" required autocomplete="organization" placeholder="your-org"></label>
    <fieldset class="ucp-chips">
    <legend>Amount</legend>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="10">
    <span>$10</span></label>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="25" checked>
    <span>$25</span></label>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="50">
    <span>$50</span></label></fieldset>
    <button type="submit" class="ucp-btn">Add credits</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-credits>

Org known, bigger amounts

Amount

Secure checkout on Stripe. Card details never touch this page.

Markup
<uc-credits data-brand="uc" data-env="qa" data-org="demo-org" data-amounts="25,100,500" data-default="100">
    <form class="ucp" method="post" action="https://pay-qa.undercurrent.ai/v1/checkout" accept-charset="utf-8">
    <input type="hidden" name="kind" value="credits">
    <input type="hidden" name="brand" value="uc">
    <input type="hidden" name="src" value="embed">
    <input type="hidden" name="org" value="demo-org">
    <input type="hidden" name="sku" value="uc_credits_1usd">
    <fieldset class="ucp-chips">
    <legend>Amount</legend>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="25">
    <span>$25</span></label>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="100" checked>
    <span>$100</span></label>
    <label class="ucp-chip">
    <input type="radio" name="quantity" value="500">
    <span>$500</span></label></fieldset>
    <button type="submit" class="ucp-btn">Add credits</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-credits>

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.