CDN Usage

Install and use @transx402/client via CDN script tag — no build step required, ideal for WordPress, static sites, and any HTML page.

Overview

The CDN build of @transx402/client lets you add IDRX payments to any HTML page with a single script tag — no npm, no bundler, no build step. It exposes a global TransX402 object with the same API as the npm package.

Use the CDN when:

You're working with static HTML, WordPress, or a CMS without a build pipeline
You want the fastest way to try TransX402 in sandbox
You don't need tree-shaking or a bundled build

Use the npm package instead if you're building a bundled app (Next.js, Vite, webpack, etc.) where tree-shaking and TypeScript types matter.

Adding the Script Tag

<script src="https://cdn.transx402.com/v1/transx402.min.js"></script>

Place this in the <head> or before the closing </body> tag. Once loaded, the global TransX402 object is available to any inline or subsequent <script> on the page.

Initializing the Client

<script src="https://cdn.transx402.com/v1/transx402.min.js"></script>
<script>
  const client = TransX402.create({
    apiKey: 'ipk_sandbox_abc123def456...',
  });
</script>

The ipk_sandbox_ / ipk_live_ prefix on your API key automatically determines whether the client routes to sandbox.transx402.com (free test IDRX) or api.transx402.com (Base mainnet) — no other configuration needed. See Sandbox for details on the sandbox environment.

Adding a Paywall

The CDN bundle includes the paywall component out of the box:

<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
  <script src="https://cdn.transx402.com/v1/transx402.min.js"></script>
</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>
    <!-- Full content here -->
  </div>
 
  <script>
    const client = TransX402.create({
      apiKey: 'ipk_sandbox_abc123def456...',
    });
 
    TransX402.paywall({
      selector: '#premium-content',
      price: 5000,
      currency: 'IDR',
      title: 'Premium Content',
      description: 'Pay Rp 5,000 to read the full article',
    });
  </script>
</body>
</html>

This automatically gates the #premium-content element behind a "Pay with IDRX" overlay, handling wallet connection, the one-time Permit2 approval, and payment confirmation.

Bundle Size

Variant	Target
CDN full bundle	< 60 KB gzipped

The CDN bundle includes the paywall UI and wallet connectors, so it's larger than the core npm package — this trade-off keeps zero-build integrations simple.

Next Steps

JavaScript Library — Full API reference (works the same via CDN or npm)
WordPress Plugin — A no-code wrapper built on this same CDN script
Quickstart — Full walkthrough from registration to first payment