Docs/Getting started/Universal JS Button

Universal JS Button

Drop one script tag into any site and send customers to Apa hosted checkout. The button is for simple fixed-amount payments, landing pages, CMS sites, and no-code embeds. For carts and inventory, create checkout sessions from your backend.

No secret key in the browser
The button uses an Apa-owned bridge route to create an accountless public checkout from public payout details. Never put a sk_live_ API key in HTML, JavaScript, Webflow, Wix, Squarespace, or any other client-side surface.

Copy-paste button

Add the script where you want the button to appear. The customer clicks it, Apa creates a hosted checkout, and the customer pays on apa.app.

Visual preview
Example product
Creator membership

Access unlocks instantly after payment.

Total$25.00
Dark

Default checkout action

Light

For white surfaces

HTML
<script
  src="https://apa.app/button.js"
  data-apa-amount="25.00"
  data-apa-currency="USD"
  data-apa-payout-asset="USDC"
  data-apa-payout-network="solana"
  data-apa-payout-address="8dK3...p91A"
  data-apa-display-name="My shop"
  data-apa-description="Order #1042"
  data-apa-success-url="https://store.example/thanks"
  data-apa-cancel-url="https://store.example/cart"
></script>

Embed a payment link

If you already created a payment link in the dashboard, embed that link directly. The link keeps its fixed amount or customer-entered amount, promotion-code setting, payout wallet, and return URLs.

HTML
<script
  src="https://apa.app/button.js"
  data-apa-payment-link="pl_123"
></script>

Manual mount

Use manual mount when your site builder gives you a fixed container, or when the amount comes from a product selector on the page.

HTML
<div id="apa-button"></div>
<input id="amount" value="25.00" />

<script src="https://apa.app/button.js" data-apa-render="false"></script>
<script>
  ApaCheckout.mount(document.querySelector("#apa-button"), {
    amount: document.querySelector("#amount").value,
    currency: "USD",
    payoutAsset: "USDC",
    payoutNetwork: "solana",
    payoutAddress: "8dK3...p91A",
    displayName: "My shop",
    description: "Custom order",
    successUrl: "https://store.example/thanks",
    cancelUrl: "https://store.example/cart"
  });
</script>

Dynamic amount

If another input owns the amount, point the button at it. The script reads the current value when the customer clicks.

HTML
<input id="tip-amount" type="number" min="1" step="0.01" value="10.00" />

<script
  src="https://apa.app/button.js"
  data-apa-amount-selector="#tip-amount"
  data-apa-payout-asset="USDC"
  data-apa-payout-network="base"
  data-apa-payout-address="0x1234..."
  data-apa-display-name="Creator tips"
  data-apa-description="Tip"
></script>

Supported attributes

data-apa-payment-linkstringoptional
Existing payment link id, e.g. pl_123. Use this instead of raw payout attributes when embedding a link from the dashboard.
data-apa-amountstringrequired
USD amount for raw payout buttons, e.g. 25 or 25.00. Not needed with data-apa-payment-link.
data-apa-payout-addressstringrequired
Merchant wallet that receives settlement for raw payout buttons. Not needed with data-apa-payment-link.
data-apa-payout-assetstringrequired
Settlement asset for raw payout buttons, e.g. USDC, USDT, ETH, or SOL.
data-apa-payout-networkstringrequired
Settlement network for raw payout buttons, e.g. solana, base, ethereum, polygon, or arbitrum.
data-apa-display-namestringoptional
Merchant name shown on hosted checkout.
data-apa-descriptionstringoptional
What the customer is paying for.
data-apa-order-idstringoptional
Your reference. Echoed into checkout metadata/history.
data-apa-success-urlstringoptional
Where the customer returns after successful payment.
data-apa-cancel-urlstringoptional
Where the customer returns after abandoning checkout.
data-apa-accepted-assetsstringoptional
Optional comma-separated Safe List filter, e.g. USDC_SOLANA,SOL_SOLANA.
data-apa-labelstringoptional
Button text. Defaults to Pay with crypto.
data-apa-themestringoptional
dark or light.
data-apa-sizestringoptional
sm, md, or lg.
data-apa-containerstringoptional
CSS selector to render the button into instead of inserting after the script tag.
data-apa-renderstringoptional
Set to false when you only want window.ApaCheckout manual methods.

When to use backend sessions

Use the JS button for simple public payments where the final amount and payout wallet can safely live in the page. Use POST /v1/checkout/sessions from your backend for carts, coupons, inventory holds, customer accounts, fraud checks, or any order that must be created from trusted server state.

Ecommerce rule
A store plugin should calculate the final order total inside WooCommerce, Shopify, WHMCS, Magento, or your backend first. Then it creates an Apa checkout session and redirects the buyer. The browser should not decide the cart total.