One-off purchase button

<uc-pay-button> buys a catalog SKU. With JS it checks the catalog and disables itself, saying why, when the SKU is not purchasable yet.

$20 of credits as a single button

Markup

<uc-pay-button data-brand="uc" data-env="qa" data-kind="credits" data-sku="uc_credits_1usd" data-org="demo-org" data-quantity="20" data-label="Buy $20 of credits">
    <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">
    <input type="hidden" name="org" value="demo-org">
    <input type="hidden" name="quantity" value="20">
    <button type="submit" class="ucp-btn">Buy $20 of 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-pay-button>

A one-off SKU that is not sellable yet (shows the degraded state)

Markup

<uc-pay-button data-brand="bertis" data-env="qa" data-sku="bertis_album_once">
    <form class="ucp" method="post" action="https://pay-qa.undercurrent.ai/v1/checkout" accept-charset="utf-8">
    <input type="hidden" name="kind" value="one_time">
    <input type="hidden" name="brand" value="bertis">
    <input type="hidden" name="src" value="embed">
    <input type="hidden" name="sku" value="bertis_album_once">
    <input type="hidden" name="quantity" value="1">
    <button type="submit" class="ucp-btn">Buy</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-pay-button>

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.