Implements KryptoGO Payment checkout integration including Payment Intent creation, React SDK usePayment hook, and Direct API integration. Use when integrating crypto payment, creating checkout flows, or building KryptoGO 穩定幣收款頁面.
你的任務是在用戶的專案中實作 KryptoGO Payment 穩定幣收款功能。
完成以下步驟即可完成串接:
詢問用戶:
:你要如何串接?
usePayment Hook)專案框架:你使用什麼框架?
用戶輸入: $ARGUMENTS
搜尋專案中的 .env 或設定檔,確認是否已設定:
KRYPTOGO_CLIENT_ID(或 CLIENT_ID)KRYPTOGO_STUDIO_API_KEY(或 STUDIO_API_KEY)KRYPTOGO_ORIGIN(或 ORIGIN)若未設定,引導用戶前往 KryptoGO Studio 取得金鑰。
安裝依賴:
npm install @kryptogo/kryptogokit-sdk-react wagmi [email protected] @tanstack/react-query
建立 Provider 設定:
import { WagmiProvider } from 'wagmi';
import { getDefaultConfig, KryptogoKitProvider } from '@kryptogo/kryptogokit-sdk-react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import '@kryptogo/kryptogokit-sdk-react/styles.css';
const queryClient = new QueryClient();
const clientId = process.env.NEXT_PUBLIC_KRYPTOGO_CLIENT_ID;
const config = getDefaultConfig();
function App({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<KryptogoKitProvider clientId={clientId}>
{children}
</KryptogoKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
建立支付元件(使用 usePayment Hook):
import { usePayment } from '@kryptogo/payment';
function PaymentButton() {
const {
openPaymentModal,
closePaymentModal,
data,
txHash,
error,
isLoading,
isSuccess,
isError
} = usePayment();
const handlePayment = () => {
openPaymentModal({
fiat_amount: '100',
fiat_currency: 'TWD',
callback_url: 'https://your-server.com/payment/callback',
order_data: {
orderId: '12345',
productName: 'Product Name',
},
group_key: 'product_purchase',
});
};
return (
<div>
<button onClick={handlePayment} disabled={isLoading}>
{isLoading ? '處理中...' : '立即付款'}
</button>
{isSuccess && <p>付款成功!TxHash: {txHash}</p>}
{isError && <p>付款失敗:{error?.message}</p>}
</div>
);
}
建立位置建議:
services/kryptogo-payment.jssrc/payment/payment.service.tsservices/kryptogo_payment.py核心功能:
createPaymentIntent(fiatAmount, fiatCurrency, options) - 建立 Payment IntentgetPaymentIntent(paymentIntentId) - 查詢單筆支付listPaymentIntents(filters) - 列出支付意圖handleWebhook(payload) - 處理 Webhook 回調const express = require('express');
const axios = require('axios');
const router = express.Router();
const KG_BASE_URL = 'https://wallet.kryptogo.app';
const headers = {
'Content-Type': 'application/json',
'X-Client-ID': process.env.KRYPTOGO_CLIENT_ID,
'Origin': process.env.KRYPTOGO_ORIGIN,
'X-STUDIO-API-KEY': process.env.KRYPTOGO_STUDIO_API_KEY,
};
// 建立 Payment Intent
router.post('/payment/intent', async (req, res) => {
const { fiat_amount, fiat_currency, callback_url, order_data, group_key } = req.body;
const response = await axios.post(
`${KG_BASE_URL}/v1/studio/api/payment/intent`,
{ fiat_amount, fiat_currency, callback_url, order_data, group_key },
{ headers }
);
res.json(response.data);
});
建立 Webhook 端點接收支付狀態更新:
router.post('/payment/callback', (req, res) => {
const payment = req.body;
switch (payment.status) {
case 'success':
// 更新訂單為已付款
break;
case 'expired':
// 標記訂單為過期
break;
case 'insufficient_not_refunded':
// 金額不足,等待退款
break;
case 'insufficient_refunded':
// 已退款處理
break;
}
res.status(200).send();
});
引導用戶進行測試:
| 方法 | 路徑 | 說明 |
|---|---|---|
| POST | /v1/studio/api/payment/intent | 建立 Payment Intent |
| GET | /v1/studio/api/payment/intent/{id} | 查詢單筆 Payment Intent |
| GET | /v1/studio/api/payment/intents | 列出 Payment Intents |
| POST | /v1/studio/api/asset_pro/transfer | 代幣轉帳/提領 |
| Header | 說明 |
|---|---|
X-Client-ID | KryptoGO Client ID |
X-STUDIO-API-KEY | Studio API Key |
Origin | 你的網域 |
Content-Type | application/json |
| 參數 | 類型 | 必填 | 說明 |
|---|---|---|---|
| fiat_amount | String | ✓ | 法幣金額(最低 0.01) |
| fiat_currency | String | ✓ | TWD 或 USD |
| callback_url | String | Webhook 回調 URL | |
| order_data | Object | 自訂訂單資料(最多 1000 字元) | |
| group_key | String | 支付分類標籤 |
| 狀態 | 說明 |
|---|---|
pending | 等待付款 |
success | 付款成功 |
expired | 付款逾時 |
insufficient_not_refunded | 金額不足,等待退款 |
insufficient_refunded | 金額不足,已退款 |