CDN Usage

Install @transx402/client via ESM CDN — no build step, for static HTML and CMS pages without a merchant backend.

Overview

The CDN build of @transx402/client adds IDRX payments to any HTML page with a module script — no npm, no bundler. It default-exports a TransX402 namespace (create, paywall).

Use the CDN when:

• You have static HTML or a CMS without a merchant settle endpoint
• You want the fastest sandbox paywall
• You will use direct settlement (browser calls POST /facilitate)

Use the npm package for bundled apps (Next.js, Vite) where types and tree-shaking matter. Use the WordPress Plugin for WordPress — the plugin bundles @transx402/client and uses server settlement; it is not a wrapper around this CDN script.

Adding the Script

<script type="module">
  import TransX402 from "https://cdn.transx402.com/v1/transx402.browser.min.js";
  // TransX402.create / TransX402.paywall
</script>

Debug (unminified): https://cdn.transx402.com/v1/transx402.browser.js.

Classic <script src="…/transx402.min.js"> is not the published filename.

Publishable keys

Direct settlement needs a publishable key (ipk_pub_sandbox_ / ipk_pub_live_) and the page origin registered under Dashboard Allowed Origins. Secret keys are rejected when the browser sends Origin.

Also set environment ("camp" sandbox, "base" production) and merchantWallet.

Adding a Paywall

<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>Crypto Investment Guide 2026</h1>
 
  <p>Here is the article preview...</p>
 
  <div id="premium-content">
    <p>This premium content will unlock after payment.</p>
  </div>
 
  <script type="module">
    import TransX402 from "https://cdn.transx402.com/v1/transx402.browser.min.js";
 
    TransX402.paywall({
      apiKey: "ipk_pub_sandbox_...",
      environment: "camp",
      selector: "#premium-content",
      price: 5000,
      currency: "IDR",
      merchantWallet: "0xYourMerchantWallet",
      title: "Premium Content",
      description: "Pay Rp 5,000 to read the full article",
    });
  </script>
</body>
</html>

price is whole IDR (5000 = Rp 5,000). This gates #premium-content behind Pay with IDRX (wallet connect, Permit2, signature).

Optional: TransX402.create

<script type="module">
  import TransX402 from "https://cdn.transx402.com/v1/transx402.browser.min.js";
 
  const client = TransX402.create({
    apiKey: "ipk_pub_sandbox_...",
    environment: "camp",
    settlement: "direct",
  });
 
  await client.pay({
    to: "0xYourMerchantWallet",
    amount: "5000",
    currency: "IDR",
    resource: window.location.href,
  });
</script>

Same API as createBrowserClient / createPaywall.

Bundle Size

The CDN bundle includes paywall UI and the Path 4 wallet flow.

Next Steps

• JavaScript Library — npm API (createBrowserClient, agents)
• WordPress Plugin — no-code server settlement
• Quickstart — register → pick a stack