TutuPay を接入

自社製品が図図残高で付加価値サービスを課金でき、支払い基盤を自作する必要はありません。

3 ステップで接入

  1. 1

    SDK をコピー

    lib/pay-sdk/index.ts を自社製品リポジトリにコピーします。

  2. 2

    インスタンスを作成

    あなたの clientId で createTutuPay({ clientId }) を呼びます。

  3. 3

    収銀を開始

    pay.checkout({ sku }) を呼ぶと、ポップアップ内でログイン+下单+支払いが完了します。

import { createTutuPay } from '$lib/pay-sdk';

const pay = createTutuPay({
  baseUrl: import.meta.env.VITE_TUTUPAY_URL,
  clientId: 'tutuedit'
});

const r = await pay.checkout({ kind: 'export_credits', sku: 'pack_100' });
if (r.status === 'paid') {
  // grant credits idempotently on your side; use r.orderId to double-check
}

仕組み

ホスト型収銀台がポップアップ内でログイン・下单・支払いを完了し(tutuid と同じ信頼根、再ログインなし)、結果を postMessage で返します。製品は残高や支払い凭証に触れません。SKU の追加はバックエンドの orders.rs sku_price() に 1 行足すだけです。

統合デモを開く