Quickstart

Panduan langkah demi langkah untuk mulai menerima pembayaran IDRX — daftar, pilih stack (Next.js, WordPress, atau CDN), dan bawa pembayaran sandbox pertama ke production.

Panduan ini membawa Anda dari nol hingga pembayaran IDRX pertama, lalu ke production. Pilih satu stack dan salin resepnya. API lengkap ada di halaman integrasi.

Alur Onboarding Secara Garis Besar

Daftar — hubungkan wallet di dashboard.transx402.com dan buat profil merchant

Dapatkan key — key rahasia sandbox (ipk_sandbox_...) plus wallet merchant

Pilih stack — Next.js (kanonis), WordPress Paywall, atau paywall CDN

Uji coba di sandbox — isi wallet test dan bayar dengan IDRX di CAMP Testnet

Go live — ganti ke key live; kode sama, pembayaran nyata di Base

Sandbox dan production memakai https://api.transx402.com yang sama. Prefix key memilih CAMP Testnet vs Base. Resep hosted di bawah memakai environment: "camp".

Prasyarat

Akun merchant TransX402 (langkah berikutnya)
MetaMask (atau wallet EIP-1193 lain) untuk pembayaran di browser
Salah satu: aplikasi Next.js App Router (Node.js 20.19+), situs WordPress 6.2+, atau halaman HTML statis

Key rahasia (ipk_sandbox_, ipk_live_) tetap di server. Key publishable (ipk_pub_sandbox_, ipk_pub_live_) hanya untuk settlement CDN / langsung.

Langkah 1: Daftar di Dashboard

Buka dashboard.transx402.com dan hubungkan wallet Anda.

Klik "Connect Wallet" dan pilih MetaMask (atau wallet EIP-1193 lain)
Tanda tangani pesan verifikasi (SIWE — Sign-In with Ethereum)
Isi profil merchant: nama bisnis, email, dan URL website

Setelah registrasi, Anda otomatis menerima API key rahasia sandbox.

Langkah 2: Dapatkan Key dan Wallet Merchant

Di halaman API Keys Anda akan melihat key rahasia sandbox yang dibuat saat daftar:

ipk_sandbox_abc123def456...

Penting: Key rahasia lengkap hanya ditampilkan sekali. Simpan di env server / pengaturan WordPress — jangan masukkan ke JavaScript frontend untuk Next.js.

Salin juga wallet merchant dari dashboard. Setiap resep membutuhkannya sebagai payTo (server) atau merchantWallet (CDN). Wallet kosong membuat pembayaran pertama gagal.

Khusus CDN: buat key sandbox publishable (ipk_pub_sandbox_...) dan daftarkan origin halaman di Allowed Origins. Settlement langsung menolak key rahasia jika browser mengirim header Origin.

Langkah 3: Pilih Stack

A. Next.js (kanonis)

Backend merchant yang menyelesaikan pembayaran. Browser hanya menandatangani; tidak menyimpan API key dan tidak memanggil POST /facilitate.

npm install @transx402/server @transx402/client

Env (hanya server):

TRANSX402_API_KEY=ipk_sandbox_...
MERCHANT_WALLET=0xWalletMerchantAnda

Route berbayar (app/api/premium/route.ts):

import { TransX402 } from "@transx402/server";
 
const tx402 = new TransX402(process.env.TRANSX402_API_KEY!, {
  environment: "camp",
});
 
export async function GET(request: Request) {
  const gate = await tx402.payments.processGate({
    headers: request.headers,
    payTo: process.env.MERCHANT_WALLET!,
    priceIdr: "5000",
    resourceUrl: request.url,
  });
 
  if (gate.kind === "paymentRequired") {
    return Response.json(gate.body, { status: 402 });
  }
  if (gate.kind === "failed") {
    return Response.json(
      { error: gate.error, code: gate.code, details: gate.details },
      { status: gate.status }
    );
  }
 
  return Response.json({
    paid: true,
    txHash: gate.txHash,
    content: "Premium terbuka",
  });
}

Proxy config same-origin agar browser memuat parameter chain tanpa CORS fasilitator (app/api/transx402/config/route.ts):

import { TransX402 } from "@transx402/server";
 
const tx402 = new TransX402(process.env.TRANSX402_API_KEY!, {
  environment: "camp",
});
 
export async function GET(request: Request) {
  return tx402.config.handleRequest(request, {
    isConfigured: () => Boolean(process.env.TRANSX402_API_KEY?.trim()),
  });
}

Browser (tanpa API key):

import { createBrowserClient } from "@transx402/client/browser";
 
const client = createBrowserClient({
  environment: "camp",
  settlement: "server",
  configProxyPath: "/api/transx402",
});
 
const response = await client.fetch("/api/premium");

Lihat Server Library dan Library JavaScript untuk API lengkap.

B. WordPress Paywall

Tanpa kode aplikasi. Plugin menyelesaikan pembayaran di PHP dengan key rahasia Anda.

Di admin WordPress: Plugins → Add New → cari TransX402 Paywall → Install dan aktifkan (wordpress.org)
Settings → TransX402 — paste key rahasia sandbox dan wallet merchant (keduanya wajib sebelum pembayaran pertama)
Edit post → panel dokumen TransX402 Paywall → aktifkan, atur harga IDR, terbitkan
Buka post saat logout, atau sebagai editor dengan ?transx402_as_visitor=1

Cadangan: unggah ZIP dengan folder transx402-paywall/ dari rilis GitHub.

Ini bukan shortcode atau blok Gutenberg. Lihat Plugin WordPress.

C. Paywall CDN (settlement langsung)

Tanpa backend. Browser memanggil POST /facilitate dengan key publishable.

<div id="konten-premium">
  <p>Konten premium ini terbuka setelah pembayaran.</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: "#konten-premium",
    price: 5000,
    currency: "IDR",
    merchantWallet: "0xWalletMerchantAnda",
    title: "Artikel Premium",
    description: "Bayar Rp 5.000 untuk membaca artikel ini",
  });
</script>

Daftarkan origin ini di dashboard sebelum testing. Harga adalah IDR utuh (5000 = Rp 5.000). Lihat Penggunaan CDN.

Langkah 4: Uji Coba di Sandbox

Fund wallet test

Gunakan halaman Sandbox di dashboard (Fund IDRX, dan Fund ETH untuk approve Permit2 MetaMask pertama). Atau panggil faucet dengan key sandbox rahasia:

curl -X POST https://api.transx402.com/sandbox/fund \
  -H "X-API-Key: ipk_sandbox_abc123def456..." \
  -H "Content-Type: application/json" \
  -d '{"address": "0xAlamatWalletAnda...", "amount": "10000"}'

Lakukan pembayaran test

Buka halaman berpaywall atau panggil client.fetch("/api/premium")
Klik "Pay with IDRX" (atau konfirmasi prompt wallet dari fetch)
Hubungkan MetaMask di CAMP Testnet
Setujui Permit2 (hanya pertama kali — butuh ETH test)
Tanda tangani pembayaran
Konten terbuka

Periksa di dashboard

Di Payments: hash transaksi, pembayar, jumlah IDRX, konfirmasi, waktu.

Detail lebih lanjut: Sandbox.

Langkah 5: Go Live

Stack	Yang diganti
Next.js	`TRANSX402_API_KEY=ipk_live_...` dan `environment: "base"` di server serta `createBrowserClient`
WordPress	Settings → key rahasia production (`ipk_live_...`) dan wallet merchant production; hapus URL fasilitator lokal
CDN	Publishable `ipk_pub_live_...`, `environment: "camp"` → `"base"`, Allowed Origins untuk origin production

Host fasilitator tetap https://api.transx402.com. Tidak ada perubahan protokol lain.

Langkah Selanjutnya

Library JavaScript — createBrowserClient, paywall, agen
Server Library — @transx402/server 0.3 (processGate, proxy config)
Penggunaan CDN — bundle ESM, key publishable
Plugin WordPress — TransX402 Paywall 1.0
Referensi API — GET /config, POST /facilitate
Sandbox — faucet, CAMP vs Anvil
Webhooks — notifikasi pembayaran
Mencairkan Dana — IDRX ke Rupiah di rekening bank

Quickstart

On this page