JavaScript/TypeScript Browser SDK (Public Key)

Use Public Key in the browser to create and query orders without a backend. It automatically exchanges a short-lived token and manages refresh.

If you prefer a quick reference, check Public Key Guide.

Installation

npm install @ponponpay/sdk

Public Key Client

Public Key can only create and query orders. It does not support full order management or admin APIs.

Initialize Client

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

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

Create Order

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

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

Query Order Status

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

Browser Checkout UI

The Checkout SDK handles redirects, modal payment, and status polling.

Script Tag (host under your domain)

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

ES Modules

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

const checkout = new PonponPayCheckout();

Open Payment Modal

checkout.openModal(paymentUrl, {
  width: '450px',
  height: '650px',
  onClose: () => {
    console.log('Modal closed');
  }
});

Poll Payment Status

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

checkout.on('paid', (data) => {
  console.log('Payment successful!', data);
});

React Integration

// 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}>Pay Now</button>;
}