Payment gateway integration

CREATE TABLE payment_orders (
  id TEXT PRIMARY KEY,
  user_id TEXT NOT NULL,
  product_id INTEGER NOT NULL REFERENCES products(id),
  amount INTEGER NOT NULL CHECK(amount > 0),
  status TEXT NOT NULL DEFAULT 'pending' CHECK(status IN ('pending','paid','cancelled')),
  created_at INTEGER NOT NULL
);
CREATE INDEX idx_payment_orders_user ON payment_orders(user_id,created_at,id);
CREATE INDEX idx_payment_orders_pending ON payment_orders(status,created_at,id);

import { Hono } from 'hono';
import { bodyLimit } from 'hono/body-limit';
import { requireSession } from '../middleware/session';
import type { AppEnv } from '../types';
type PaymentEnv = AppEnv & {
  Bindings: AppEnv['Bindings'] & { TOSS_SECRET_KEY: string };
};
type Order = { id: string; user_id: string; amount: number; status: string };
export const payments = new Hono<PaymentEnv>();
payments.use('*', requireSession);
payments.use('*', bodyLimit({ maxSize: 4096 }));

// Resolve the price from the database, not from an amount supplied by the browser.
payments.post('/orders', async (c) => {
  const input = await c.req.json().catch(() => null);
  if (!input || !Number.isSafeInteger(input.productId))
    return c.json({ error: 'invalid_product' }, 400);
  const product = await c.env.DB.prepare(
    'SELECT id,name,price FROM products WHERE id=? AND published=1'
  ).bind(input.productId).first<{ id: number; name: string; price: number }>();
  if (!product) return c.json({ error: 'not_found' }, 404);
  const orderId = crypto.randomUUID();
  await c.env.DB.prepare(
    'INSERT INTO payment_orders(id,user_id,product_id,amount,created_at) VALUES(?,?,?,?,?)'
  ).bind(orderId, c.get('identity').user_id, product.id, product.price, Date.now()).run();
  return c.json({ orderId, orderName: product.name, amount: product.price });
});

payments.post('/confirm', async (c) => {
  const input = await c.req.json().catch(() => null);
  if (!input || typeof input.orderId !== 'string' || input.orderId.length > 64 ||
      typeof input.paymentKey !== 'string' || input.paymentKey.length > 200 ||
      !input.paymentKey || !Number.isSafeInteger(input.amount))
    return c.json({ error: 'invalid_payment' }, 400);
  const order = await c.env.DB.prepare(
    'SELECT id,user_id,amount,status FROM payment_orders WHERE id=? AND user_id=?'
  ).bind(input.orderId, c.get('identity').user_id).first<Order>();
  if (!order) return c.json({ error: 'not_found' }, 404);
  if (input.amount !== order.amount) return c.json({ error: 'amount_mismatch' }, 400);
  if (order.status === 'paid') return c.json({ ok: true });
  if (order.status !== 'pending') return c.json({ error: 'order_conflict' }, 409);
  const headers = { Authorization: 'Basic ' + btoa(c.env.TOSS_SECRET_KEY + ':') };
  try {
    let result = await fetch('https://api.tosspayments.com/v1/payments/confirm', {
      method: 'POST',
      headers: { ...headers, 'Content-Type': 'application/json', 'Idempotency-Key': order.id },
      body: JSON.stringify({ orderId: order.id, paymentKey: input.paymentKey, amount: order.amount }),
    });
    // After a duplicate confirmation or lost response, recheck the payment provider using the order ID.
    if (!result.ok) result = await fetch(
      'https://api.tosspayments.com/v1/payments/orders/' + encodeURIComponent(order.id), { headers });
    if (!result.ok) return c.json({ error: 'payment_verification_pending' }, 503);
    const payment = await result.json() as { orderId: string; totalAmount: number; currency: string; status: string };
    if (payment.orderId !== order.id || payment.totalAmount !== order.amount || payment.currency !== 'KRW')
      return c.json({ error: 'payment_verification_failed' }, 409);
    if (payment.status !== 'DONE') return c.json({ status: 'pending' }, 202);
    await c.env.DB.prepare("UPDATE payment_orders SET status='paid' WHERE id=? AND status='pending'")
      .bind(order.id).run();
    const saved = await c.env.DB.prepare('SELECT status FROM payment_orders WHERE id=?')
      .bind(order.id).first<{ status: string }>();
    if (saved?.status !== 'paid') return c.json({ error: 'order_conflict' }, 409);
    return c.json({ ok: true });
  } catch {
    // The confirmation result is uncertain. Do not mark it failed or create another order or payment.
    return c.json({ error: 'payment_verification_pending' }, 503);
  }
});

import { payments } from './routes/payments';
app.route('/api/payments', payments);

// Add the following element and SDK to the checkout page first.
// <div id="payment-method"></div><div id="agreement"></div>
// <button id="pay" disabled>Pay</button>
// <script src="https://js.tosspayments.com/v2/standard"></script>
const response = await fetch('/api/payments/orders', {
  method: 'POST', credentials: 'same-origin',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 1 }),
});
if (!response.ok) throw new Error('Check the login session and order information.');
const order = await response.json();
// Use only the client key in the browser. Never include a secret key.
const toss = TossPayments('YOUR_TOSS_CLIENT_KEY');
const widgets = toss.widgets({ customerKey: TossPayments.ANONYMOUS });
await widgets.setAmount({ currency: 'KRW', value: order.amount });
await widgets.renderPaymentMethods({ selector: '#payment-method', variantKey: 'DEFAULT' });
await widgets.renderAgreement({ selector: '#agreement', variantKey: 'AGREEMENT' });
const button = document.querySelector('#pay');
button.disabled = false;
button.addEventListener('click', async () => {
  button.disabled = true;
  try {
    await widgets.requestPayment({
      orderId: order.orderId, orderName: order.orderName,
      successUrl: location.origin + '/payments/success',
      failUrl: location.origin + '/payments/fail',
    });
  } catch {
    document.querySelector('#payment-method').insertAdjacentText('beforebegin', 'Review the payment request.');
    button.disabled = false;
  }
});

// This is a separate browser module for /payments/success. Add a #result element first.
const params = new URLSearchParams(location.search);
const payload = { orderId: params.get('orderId'), paymentKey: params.get('paymentKey'), amount: Number(params.get('amount')) };
history.replaceState(null, '', location.pathname); // remove sensitive query values before the user follows another link
const response = await fetch('/api/payments/confirm', {
  method: 'POST', credentials: 'same-origin',
  headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
});
const result = await response.json();
document.querySelector('#result').textContent = response.ok && result.ok
  ? 'Payment confirmed.' : 'The payment status is still being checked. Review it again in your order history.';