# JavaScript SDK Reference

## Install

```bash
npm install @ponponpay/sdk
pnpm add @ponponpay/sdk
yarn add @ponponpay/sdk
```

## Environment

For browser frameworks, only expose the Public Key:

```dotenv
NEXT_PUBLIC_PONPONPAY_PUBLIC_KEY=pub_xxx
NEXT_PUBLIC_PONPONPAY_API_URL=https://api.ponponpay.com
```

Do not expose `PONPONPAY_API_KEY` in frontend bundles.

## Initialize

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

const client = new PonponPayClient({
  publicKey: process.env.NEXT_PUBLIC_PONPONPAY_PUBLIC_KEY!,
  baseUrl:
    process.env.NEXT_PUBLIC_PONPONPAY_API_URL || 'https://api.ponponpay.com'
});
```

## Create Order

```ts
const order = await client.createOrder({
  currency: 'USDT',
  network: 'tron',
  amount: 100,
  orderId: `ORDER_${Date.now()}`,
  notifyUrl: 'https://your-site.com/api/ponponpay/webhook',
  redirectUrl: 'https://your-site.com/payment/success'
});

window.location.href = order.paymentUrl;
```

## Query Status

```ts
const status = await client.getOrderStatus(order.tradeId);
console.log(status.status);
```

## Checkout Helper

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

const checkout = new PonponPayCheckout(client);
await checkout.pollStatus(order.tradeId, {
  interval: 3000,
  timeout: 30 * 60 * 1000
});
```

## Framework Notes

- Next.js App Router: keep checkout UI in a client component; add `NEXT_PUBLIC_` only for the Public Key.
- React/Vite: use `VITE_PONPONPAY_PUBLIC_KEY`.
- Static HTML: use the global browser build only if the project already relies on script tags.
- If the app has a backend, still implement webhook confirmation on the backend.