From e70ae6c7c92c689f26071e542f16606240300a7e Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:14:47 +0700
Subject: [PATCH 01/13] Initialize production-grade React SDK structure

---
 production-grade React SDK | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 production-grade React SDK

diff --git a/production-grade React SDK b/production-grade React SDK
new file mode 100644
index 0000000..135a202
--- /dev/null
+++ b/production-grade React SDK	
@@ -0,0 +1,18 @@
+src/
+├── core/
+│   ├── pi-loader.ts
+│   ├── error.ts
+│   └── payment-validator.ts
+├── provider/
+│   └── PiProvider.tsx
+├── hooks/
+│   ├── usePiConnection.ts
+│   ├── usePiAuth.ts
+│   ├── usePiPayment.ts
+│   └── usePiServerHandshake.ts
+├── components/
+│   ├── PiPayButton.tsx
+│   └── PiAuthGuard.tsx
+├── mock/
+│   └── mockPi.ts
+└── index.ts

From b0315c9ae604e7b67a44198cd022a801116fef43 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:15:30 +0700
Subject: [PATCH 02/13] Add PiSdkErrorCode enum and PiSdkError class

---
 core/error.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 core/error.ts

diff --git a/core/error.ts b/core/error.ts
new file mode 100644
index 0000000..f3d6703
--- /dev/null
+++ b/core/error.ts
@@ -0,0 +1,16 @@
+export enum PiSdkErrorCode {
+  SDK_NOT_LOADED = "SDK_NOT_LOADED",
+  NOT_READY = "NOT_READY",
+  USER_REJECTED = "USER_REJECTED",
+  INVALID_PAYMENT = "INVALID_PAYMENT",
+  NETWORK_ERROR = "NETWORK_ERROR",
+  UNKNOWN = "UNKNOWN"
+}
+
+export class PiSdkError extends Error {
+  code: PiSdkErrorCode
+  constructor(code: PiSdkErrorCode, message?: string) {
+    super(message ?? code)
+    this.code = code
+  }
+}

From c2ec18bda14955b509528d644fdd2bc01e37d5ed Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:16:13 +0700
Subject: [PATCH 03/13] Add Pi SDK readiness check functions

---
 core/core/pi-loader.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 core/core/pi-loader.ts

diff --git a/core/core/pi-loader.ts b/core/core/pi-loader.ts
new file mode 100644
index 0000000..597f7e8
--- /dev/null
+++ b/core/core/pi-loader.ts
@@ -0,0 +1,9 @@
+export function isPiReady(): boolean {
+  return typeof window !== "undefined" && !!window.Pi
+}
+
+export function assertPiReady() {
+  if (!isPiReady()) {
+    throw new Error("Pi SDK not loaded. Ensure <script src='https://sdk.minepi.com/pi-sdk.js' />")
+  }
+}

From 1fefd3e49cf79aa7a251c9caef49b838e470753e Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:16:57 +0700
Subject: [PATCH 04/13] Create payment-validator.ts

---
 core/core/core/payment-validator.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 core/core/core/payment-validator.ts

diff --git a/core/core/core/payment-validator.ts b/core/core/core/payment-validator.ts
new file mode 100644
index 0000000..304cf90
--- /dev/null
+++ b/core/core/core/payment-validator.ts
@@ -0,0 +1,16 @@
+import type { PaymentData } from "pi-sdk-js"
+import { PiSdkError, PiSdkErrorCode } from "./error"
+
+export function validatePaymentData(data: PaymentData) {
+  if (!data.amount || data.amount <= 0) {
+    throw new PiSdkError(PiSdkErrorCode.INVALID_PAYMENT, "Invalid amount")
+  }
+  if (!data.memo) {
+    throw new PiSdkError(PiSdkErrorCode.INVALID_PAYMENT, "Memo is required")
+  }
+  try {
+    JSON.stringify(data.metadata ?? {})
+  } catch {
+    throw new PiSdkError(PiSdkErrorCode.INVALID_PAYMENT, "Metadata must be serializable")
+  }
+}

From 54cefb2b5638236fb4b97cafe88c036cadf41823 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:18:47 +0700
Subject: [PATCH 05/13] Create PiProvider.tsx

---
 provider/PiProvider.tsx | 46 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 provider/PiProvider.tsx

diff --git a/provider/PiProvider.tsx b/provider/PiProvider.tsx
new file mode 100644
index 0000000..141c549
--- /dev/null
+++ b/provider/PiProvider.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import React, { createContext, useContext, useEffect, useState } from "react"
+import { isPiReady } from "../core/pi-loader"
+import { setupMockPi } from "../mock/mockPi"
+
+type PiContextState = {
+  ready: boolean
+  user: any | null
+}
+
+const PiContext = createContext<PiContextState>({
+  ready: false,
+  user: null
+})
+
+export function PiProvider({
+  children,
+  mock = false
+}: {
+  children: React.ReactNode
+  mock?: boolean
+}) {
+  const [ready, setReady] = useState(false)
+  const [user, setUser] = useState<any>(null)
+
+  useEffect(() => {
+    if (mock) setupMockPi()
+    if (isPiReady()) {
+      setReady(true)
+      window.Pi.authenticate([], (auth) => {
+        setUser(auth.user)
+      })
+    }
+  }, [mock])
+
+  return (
+    <PiContext.Provider value={{ ready, user }}>
+      {children}
+    </PiContext.Provider>
+  )
+}
+
+export function usePiContext() {
+  return useContext(PiContext)
+}

From 670cff66d20383884819f632348df7719ea4c450 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:19:46 +0700
Subject: [PATCH 06/13] Create usePiConnection.ts

---
 provider/hooks/usePiConnection.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 provider/hooks/usePiConnection.ts

diff --git a/provider/hooks/usePiConnection.ts b/provider/hooks/usePiConnection.ts
new file mode 100644
index 0000000..c29feb6
--- /dev/null
+++ b/provider/hooks/usePiConnection.ts
@@ -0,0 +1,10 @@
+import { usePiContext } from "../provider/PiProvider"
+
+export function usePiConnection() {
+  const { ready, user } = usePiContext()
+  return {
+    ready,
+    connected: !!user,
+    user
+  }
+}

From 69570c4a58832e4ac3f7f16c3dfcb8fc01b931f5 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:20:23 +0700
Subject: [PATCH 07/13] Create usePiAuth.ts

---
 provider/hooks/hooks/usePiAuth.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 provider/hooks/hooks/usePiAuth.ts

diff --git a/provider/hooks/hooks/usePiAuth.ts b/provider/hooks/hooks/usePiAuth.ts
new file mode 100644
index 0000000..cee91b7
--- /dev/null
+++ b/provider/hooks/hooks/usePiAuth.ts
@@ -0,0 +1,30 @@
+import { useState, useCallback } from "react"
+import { PiSdkError, PiSdkErrorCode } from "../core/error"
+
+export function usePiAuth() {
+  const [user, setUser] = useState<any>(null)
+  const [authenticated, setAuthenticated] = useState(false)
+
+  const authenticate = useCallback(async () => {
+    if (!window.Pi) {
+      throw new PiSdkError(PiSdkErrorCode.SDK_NOT_LOADED)
+    }
+
+    return new Promise((resolve, reject) => {
+      window.Pi.authenticate([], (auth) => {
+        setUser(auth.user)
+        setAuthenticated(true)
+        resolve(auth.user)
+      }, (err) => {
+        reject(err)
+      })
+    })
+  }, [])
+
+  const logout = () => {
+    setUser(null)
+    setAuthenticated(false)
+  }
+
+  return { user, authenticated, authenticate, logout }
+}

From b9d9eecac9af4058bff3a552871b27105a53dd4a Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:21:04 +0700
Subject: [PATCH 08/13] Create usePiPayment.ts

---
 provider/hooks/hooks/hooks/usePiPayment.ts | 44 ++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 provider/hooks/hooks/hooks/usePiPayment.ts

diff --git a/provider/hooks/hooks/hooks/usePiPayment.ts b/provider/hooks/hooks/hooks/usePiPayment.ts
new file mode 100644
index 0000000..3eedd41
--- /dev/null
+++ b/provider/hooks/hooks/hooks/usePiPayment.ts
@@ -0,0 +1,44 @@
+import { useState, useCallback } from "react"
+import type { PaymentData } from "pi-sdk-js"
+import { validatePaymentData } from "../core/payment-validator"
+import { PiSdkErrorCode } from "../core/error"
+
+type PaymentStatus = "idle" | "pending" | "success" | "failed" | "cancelled"
+
+export function usePiPayment(paymentData: PaymentData) {
+  const [status, setStatus] = useState<PaymentStatus>("idle")
+  const [txid, setTxid] = useState<string | null>(null)
+  const [error, setError] = useState<any>(null)
+
+  const pay = useCallback(async () => {
+    try {
+      validatePaymentData(paymentData)
+      if (!window.Pi) throw { code: PiSdkErrorCode.SDK_NOT_LOADED }
+
+      setStatus("pending")
+
+      await window.Pi.createPayment(paymentData, {
+        onReadyForServerApproval(paymentId) {
+          // kirim paymentId ke backend
+        },
+        onReadyForServerCompletion(paymentId, txid) {
+          setTxid(txid)
+        },
+        onCancel() {
+          setStatus("cancelled")
+        },
+        onError(err) {
+          setError(err)
+          setStatus("failed")
+        }
+      })
+
+      setStatus("success")
+    } catch (e) {
+      setError(e)
+      setStatus("failed")
+    }
+  }, [paymentData])
+
+  return { pay, status, txid, error }
+}

From a98c15d1e18a6a1b1b077332ad214ad48a95385e Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:21:42 +0700
Subject: [PATCH 09/13] Create usePiServerHandshake.ts

---
 .../hooks/hooks/hooks/hooks/usePiServerHandshake.ts   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 provider/hooks/hooks/hooks/hooks/usePiServerHandshake.ts

diff --git a/provider/hooks/hooks/hooks/hooks/usePiServerHandshake.ts b/provider/hooks/hooks/hooks/hooks/usePiServerHandshake.ts
new file mode 100644
index 0000000..24058e8
--- /dev/null
+++ b/provider/hooks/hooks/hooks/hooks/usePiServerHandshake.ts
@@ -0,0 +1,11 @@
+export function usePiServerHandshake(handlers: {
+  onApprove?: (paymentId: string) => Promise<void>
+  onComplete?: (txid: string) => Promise<void>
+  onFail?: (reason: string) => void
+}) {
+  return {
+    approve: handlers.onApprove,
+    complete: handlers.onComplete,
+    fail: handlers.onFail
+  }
+}

From a44ad1f69fd9c11cc5a6e25634e0030514633d55 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:22:54 +0700
Subject: [PATCH 10/13] Create PiPayButton.tsx

---
 components/PiPayButton.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 components/PiPayButton.tsx

diff --git a/components/PiPayButton.tsx b/components/PiPayButton.tsx
new file mode 100644
index 0000000..f49a662
--- /dev/null
+++ b/components/PiPayButton.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { usePiPayment } from "../hooks/usePiPayment"
+import type { PaymentData } from "pi-sdk-js"
+
+export function PiPayButton({ paymentData }: { paymentData: PaymentData }) {
+  const { pay, status } = usePiPayment(paymentData)
+
+  return (
+    <button onClick={pay} disabled={status === "pending"}>
+      {status === "pending" ? "Processing..." : "Pay with Pi"}
+    </button>
+  )
+}

From 82dee0e5b892739804002e9374b5f044281c0c7d Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:23:26 +0700
Subject: [PATCH 11/13] Create PiAuthGuard.tsx

---
 components/components/PiAuthGuard.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 components/components/PiAuthGuard.tsx

diff --git a/components/components/PiAuthGuard.tsx b/components/components/PiAuthGuard.tsx
new file mode 100644
index 0000000..0ee0dc0
--- /dev/null
+++ b/components/components/PiAuthGuard.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { usePiConnection } from "../hooks/usePiConnection"
+
+export function PiAuthGuard({ children }: { children: React.ReactNode }) {
+  const { connected, ready } = usePiConnection()
+
+  if (!ready) return <p>Loading Pi SDK...</p>
+  if (!connected) return <p>Please authenticate with Pi</p>
+
+  return <>{children}</>
+}

From 82bcae2de8f3d30ca867fa5fb699d38a844d0f0a Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:24:12 +0700
Subject: [PATCH 12/13] Create mockPi.ts

---
 mock/mockPi.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 mock/mockPi.ts

diff --git a/mock/mockPi.ts b/mock/mockPi.ts
new file mode 100644
index 0000000..76edb62
--- /dev/null
+++ b/mock/mockPi.ts
@@ -0,0 +1,15 @@
+export function setupMockPi() {
+  if (window.Pi) return
+
+  window.Pi = {
+    authenticate(scopes, onSuccess) {
+      onSuccess({ user: { uid: "mock-user", username: "dev" } })
+    },
+    createPayment(data, callbacks) {
+      setTimeout(() => {
+        callbacks.onReadyForServerApproval("mock-payment-id")
+        callbacks.onReadyForServerCompletion("mock-payment-id", "mock-txid")
+      }, 1000)
+    }
+  }
+}

From ad8c07684f1dae6b0b8ce588ebbab3247c283fb5 Mon Sep 17 00:00:00 2001
From: Kapten boneng <iwak01bogo@gmail.com>
Date: Sat, 10 Jan 2026 15:24:50 +0700
Subject: [PATCH 13/13] Create index.ts

---
 mock/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 mock/index.ts

diff --git a/mock/index.ts b/mock/index.ts
new file mode 100644
index 0000000..8ecc4cb
--- /dev/null
+++ b/mock/index.ts
@@ -0,0 +1,6 @@
+export * from "./provider/PiProvider"
+export * from "./hooks/usePiConnection"
+export * from "./hooks/usePiAuth"
+export * from "./hooks/usePiPayment"
+export * from "./components/PiPayButton"
+export * from "./components/PiAuthGuard"