JavaScript/TypeScript 浏览器 SDK（Public Key）

在浏览器中使用 Public Key 创建与查询订单，无需后端服务。SDK 会自动换取短期 Token 并刷新。

如果你想快速查看配置，请查看Public Key 指南。

安装

npm install @ponponpay/sdk

Public Key 客户端

Public Key 仅支持创建和查询订单，不支持完整订单管理或后台管理接口。

初始化客户端

import { PonponPayClient } from '@ponponpay/sdk/browser';

const client = new PonponPayClient({
  publicKey: 'pub_your_public_key',
  // 可选：baseUrl: 'https://api.ponponpay.com'
});

创建订单

const order = await client.createOrder({
  currency: 'USDT',
  network: 'tron',
  amount: 100,
  orderId: 'ORDER_123456', // 可选
  notifyUrl: 'https://your-site.com/webhook',
  redirectUrl: 'https://your-site.com/success'
});

console.log(order.tradeId);
console.log(order.paymentUrl);

查询订单状态

const status = await client.getOrderStatus(order.tradeId);
console.log(status.status); // 'pending' | 'paid' | 'expired' | 'cancelled'

浏览器结账 UI

Checkout SDK 负责跳转、弹窗和状态轮询。

脚本引入（部署到你的域名）

<script src="https://ponponpay.com/sdk/ponponpay.min.js"></script>
<script>
  const checkout = new PonponPayCheckout();
  checkout.redirect(paymentUrl);
</script>

ES 模块

import { PonponPayCheckout } from '@ponponpay/sdk/browser';

const checkout = new PonponPayCheckout();

打开支付弹窗

checkout.openModal(paymentUrl, {
  width: '450px',
  height: '650px',
  onClose: () => {
    console.log('弹窗已关闭');
  }
});

轮询支付状态

checkout.pollStatus('PP202412110001', {
  interval: 3000,
  timeout: 1800000
});

checkout.on('paid', (data) => {
  console.log('支付成功！', data);
});

React 集成

// hooks/usePonponPay.ts
import { useEffect, useRef } from 'react';
import { PonponPayCheckout } from '@ponponpay/sdk/browser';

export function usePonponPay() {
  const checkoutRef = useRef<PonponPayCheckout | null>(null);

  useEffect(() => {
    checkoutRef.current = new PonponPayCheckout();
    return () => {
      checkoutRef.current?.stopPolling();
    };
  }, []);

  return checkoutRef.current;
}

// components/PayButton.tsx
function PayButton({ paymentUrl }: { paymentUrl: string }) {
  const checkout = usePonponPay();

  const handlePay = () => {
    checkout?.openModal(paymentUrl);
  };

  return <button onClick={handlePay}>立即支付</button>;
}