Plugin WordPress

Panduan lengkap plugin WordPress TransX402 — pasang paywall IDRX di situs WordPress tanpa coding.

Overview

Plugin TransX402 untuk WordPress memungkinkan pemilik situs memonetisasi konten dengan pembayaran mikro IDRX — tanpa perlu menulis kode. Cukup pasang plugin, masukkan API key dan wallet merchant, tentukan harga dalam IDR, dan aktifkan paywall pada post atau page yang diinginkan.

Plugin ini berada di repositori terpisah dari monorepo TransX402: transx402-wordpress.

Plugin ini merupakan yang pertama di ekosistem x402 — belum ada plugin WordPress x402 lain yang tersedia.

Requirements

WordPress 6.0+
PHP 8.0+
Akun TransX402 dengan API key (daftar di dashboard.transx402.com)

Installation

Dari GitHub Release

Unduh ZIP plugin dari GitHub releases
Buka Plugins > Add New > Upload Plugin
Pilih file ZIP dan klik Install Now
Aktifkan plugin

Upload Manual

Clone atau salin plugin ke wp-content/plugins/transx402-wordpress/
Aktifkan TransX402 Paywall dari halaman Plugins

Configuration

Pengaturan Utama

Buka Settings > TransX402 di admin WordPress:

Setting	Description
API Key	API key TransX402 (`ipk_sandbox_...` atau `ipk_live_...`) — disimpan di server saja
Merchant Wallet	Wallet penerima dari dashboard TransX402 (terdeteksi otomatis setelah pembayaran pertama)
Facilitator URL (opsional)	Override untuk pengembangan lokal (mis. `http://localhost:3402`)
Default Price (IDR)	Harga default untuk konten berbayar (mis. 5000)
Preview Length	Paragraf pertama / N kata pertama / Excerpt post
Paywall Style	Overlay / Inline / Blur
Custom Message	Pesan kustom di paywall
Enable for	Posts / Pages / Custom post types

Catatan: Konfigurasi jaringan dan token berasal dari facilitator TransX402 (GET /config). Plugin menggunakan server settlement — PHP memanggil POST /facilitate dengan API key Anda; browser tidak pernah melihat key tersebut.

Konfigurasi Per-Post/Page

Di sidebar editor post/page, Anda akan melihat metabox TransX402:

Setting	Description
Enable Paywall	Aktifkan paywall untuk konten ini
Price (IDR)	Override harga default (opsional)
Preview Content	Teks preview kustom (opsional)

Cara Kerja

Mode Settlement: Server (Canonical)

Plugin menggunakan server settlement — alur canonical yang sama dengan contoh Next.js paid-content:

Browser meminta konten penuh via REST (GET /wp-json/transx402/v1/content/:postId)
PHP mengembalikan 402 Payment Required dengan instruksi pembayaran x402
Pengunjung menghubungkan wallet (MetaMask, dll.) dan menandatangani otorisasi Permit2
Browser mengulang permintaan dengan header PAYMENT-SIGNATURE
PHP memanggil POST /facilitate dengan API key server Anda
PHP memverifikasi pembayaran via GET /payments/:txHash
Pembayaran dicatat di database WordPress dan konten dikembalikan

Browser memuat @transx402/client dari CDN dengan settlement: "server" — menandatangani dan mengulang permintaan, tetapi tidak pernah memanggil /facilitate langsung.

Untuk Pengunjung (Frontend)

Pengunjung membuka artikel berbayar
Melihat preview artikel plus kartu paywall
Klik "Pay with IDRX"
Menghubungkan wallet dan menyelesaikan approval Permit2 (sekali saja)
Menandatangani otorisasi pembayaran (settlement tanpa gas)
Artikel langsung terbuka
Kunjungan ulang gratis — akses dipulihkan dari database WordPress menggunakan cookie payer

Content Gating

Plugin menggunakan filter the_content WordPress:

// Konten penuh TIDAK PERNAH dikirim ke browser untuk post berbayar
// PHP memotong konten di batas preview dan menyuntikkan UI paywall
// Setelah pembayaran, JS mengambil konten penuh via REST API

Konten premium aman — tidak dapat diakses dengan menonaktifkan JavaScript atau melihat sumber HTML.

Riwayat Pembayaran (Database WordPress)

Pembayaran terverifikasi disimpan di {prefix}transx402_payments:

Kontrol akses — kunjungan ulang memeriksa (post_id, payer_address) di DB
Laporan admin — lihat pembayaran di Settings > TransX402 Payments

Setiap baris mencatat: hash transaksi, wallet payer, jumlah (IDR), ID post, jaringan, URL resource, dan timestamp verifikasi.

Setelah pembayaran pertama berhasil, wallet merchant juga di-cache di pengaturan plugin.

Gaya Paywall

Overlay (Default)

Konten blur di belakang kartu pembayaran di tengah.

Inline

Kartu paywall muncul inline setelah preview.

Blur

Preview terlihat blur dengan tombol pembayaran mengambang.

REST API WordPress

Namespace: transx402/v1

`GET /wp-json/transx402/v1/content/:postId`

Mengembalikan konten post penuh setelah verifikasi pembayaran atau grant akses DB.

Alur:

Jika cookie/header payer cocok dengan grant DB → 200 dengan konten
Jika tidak ada header PAYMENT-SIGNATURE → 402 dengan persyaratan pembayaran x402
Jika PAYMENT-SIGNATURE ada → PHP facilitate, verifikasi, catat ke DB → 200

Header:

PAYMENT-SIGNATURE — payload pembayaran base64 (retry settlement)
X-TransX402-Payer — wallet payer (kunjungan ulang)

Alur verifikasi (pembayaran pertama):

Lookup hash transaksi via API TransX402 (GET /payments/:txHash)
Pastikan verified === true dan status === "confirmed"
Verifikasi penerima pembayaran cocok dengan wallet merchant
Verifikasi jumlah pembayaran cocok dengan harga post
Verifikasi resource cocok dengan https://{site}/wp-json/transx402/v1/content/{postId}
Catat grant di database WordPress dan kembalikan konten penuh

Response (200):

{
  "content": "<p>Full article HTML...</p>",
  "paid": true,
  "txHash": "0x...",
  "payer": "0x..."
}

`GET /wp-json/transx402/v1/access/:postId`

Pemeriksaan akses ringan untuk boot frontend:

{
  "granted": true,
  "payer": "0x..."
}

`GET /wp-json/transx402/v1/config`

Konfigurasi facilitator TransX402 lengkap, diproksi server-side. Paywall meneruskan URL ini ke @transx402/client sebagai facilitatorUrl agar browser memuat parameter chain dan token same-origin (tanpa CORS facilitator, tanpa API key di browser):

{
  "sandbox": {
    "rpcUrl": "https://testnet-rpc.onchainfolio.com/rpc",
    "chainId": 1337,
    "network": "sandbox",
    "tokens": { "IDRX": "0x..." },
    "tokenDecimals": { "IDRX": 2 },
    "permit2Address": "0x000000000022D473030F116dDEE9F6B43aC78BA3",
    "x402": { "sponsorshipMode": "erc20ApprovalRelay", "caip2Network": "eip155:1337" },
    "nativeCurrency": { "name": "Ether", "symbol": "ETH", "decimals": 18 }
  },
  "production": { }
}

Settlement tetap server mode — PHP memanggil POST /facilitate; hanya GET /config yang dibaca browser.

`GET /wp-json/transx402/v1/config/public`

Pengaturan tingkat plugin untuk integrasi (tanpa API key):

{
  "environment": "camp",
  "configUrl": "https://example.com/wp-json/transx402/v1/config",
  "contentEndpointPattern": "https://example.com/wp-json/transx402/v1/content/{postId}",
  "defaultPriceIdr": 5000,
  "currency": "IDR",
  "paywallStyle": "overlay"
}

Verifikasi Pembayaran dan Akses

Setelah pembayaran, akses disimpan di:

Database WordPress — {prefix}transx402_payments (sumber kebenaran)
Cookie payer — transx402_payer (HttpOnly, 1 tahun) untuk kunjungan ulang instan

Pada pembayaran pertama, PHP memverifikasi via TransX402 GET /payments/:txHash dan memastikan penerima, jumlah, dan resource cocok. Kunjungan berikutnya melewati panggilan facilitator jika grant DB ada.

Compatibility

Component	Support
WordPress	6.0+
PHP	8.0+
Editor	Gutenberg, Classic Editor
Caching plugins	Kecualikan URL berbayar dari full-page cache; HTML preview aman di-cache
SEO	Konten preview dapat diindeks; konten penuh di belakang REST

Testing with Sandbox

Masukkan sandbox API key (ipk_sandbox_...) di pengaturan plugin
Tambahkan wallet merchant dari dashboard TransX402
Lakukan pembayaran uji dengan test IDRX gratis di CAMP Testnet
Ganti ke production API key (ipk_live_...) saat siap

Untuk pengembangan lokal, set Facilitator URL ke http://localhost:3402.

Security

API key disimpan di wp_options — tidak pernah diekspos ke browser
Konten post penuh tidak pernah ada di HTML awal untuk post berbayar
PAYMENT-SIGNATURE diproses di server saja
Verifikasi pembayaran ke TransX402 sebelum insert DB
Tidak ada private key atau tanda tangan Permit2 yang disimpan di WordPress

Plugin WordPress

On this page