🏪 Vending Kiosk - 無人販売・埋め込みQRデモ

画面にQRコードを表示し、お客様のスマホで決済を完了させる方式。
導入パターン: Checkout（埋め込みQR型・elepay Codes API） / 約40分で実装可能

📺 端末画面シミュレーター（実Codes API連携）

🟢 オンライン端末ID: KIOSK-A001

🥤 自動販売機 - お選びください

商品を選択してください

💡 このパターンの特徴

適用可能シーン

🏧 自動販売機・自動精算機
🎫 駐車場精算機・コインランドリー
📦 宅配ロッカー
🏨 ホテル無人チェックイン端末
🛒 セルフレジ・店頭タブレット
💉 医療機関の自動会計機
🚲 シェアリングバイク・バッテリー

仕組み（実APIフロー）

端末で商品選択 → 「QR決済へ進む」
サーバーで POST /codes → codeUrl 取得
QRコードを端末画面に表示
お客様がスマホでスキャン → elepay ホスティングページで決済
サーバーが GET /codes/{id} をポーリング（本番はWebhook推奨）
status: "captured" 検知 → 商品搬出

対応決済（お客様のスマホで選択）

elepay ホスティングページ上でお客様が好きな決済方法を選択できます

⚙️ 実装コード（このページで使用）

// クライアント側（ブラウザ）
const res = await fetch('/api/create-code', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: total, orderNo, description })
});
const code = await res.json();
// → { id: 'cod_xxx', codeUrl: 'https://easyqr.elepay.io/codes/.../checkout', status: 'pending', ... }

new QRCode(qrEl, { text: code.codeUrl, width: 240, height: 240 });

// 決済完了をポーリング（本番はWebhook推奨）
const poll = setInterval(async () => {
  const r = await fetch('/api/check-code?id=' + code.id);
  const d = await r.json();
  if (d.status === 'captured') {
    clearInterval(poll);
    showSuccess(d);
  }
}, 2000);

// サーバー側 (Cloudflare Pages Function)
// functions/api/create-code.js
const elepayRes = await fetch('https://api.elepay.io/codes', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Basic ' + btoa(env.ELEPAY_SECRET_KEY + ':')
  },
  body: JSON.stringify({ amount, currency: 'JPY', orderNo, description })
});