AppCotton SDK には、ユーザーが直接操作できる 購入UI と アップグレードUI を自動生成する仕組みがあります。
これにより、開発者は「プラン比較表」や「差額課金UI」を手作業で構築する必要がありません。
目的は次の通りです。
- 製品のプラン一覧を自動で取得して表示する
- 現在のライセンス情報に応じて、購入ボタンとアップグレードボタンを自動で切替える
- 差額課金が可能な場合のみ「アップグレード」ボタンを提示する
1. UI自動生成が行うこと
| 機能 | 内容 |
|---|---|
| プランの取得 | wp_appcotton_product_plans からプラン一覧を取得 |
| 現在ライセンスの判定 | is_premium() と validate() の結果に基づく |
| 最適な操作を選択 | 購入 / アップグレード / 無料利用継続 |
| Stripe Checkout 生成 | 選択された課金方法に応じた Checkout URL を発行 |
2. ショートコード
購入UIは、フロントエンドに以下のショートコードを記述するだけで表示できます。
[appcotton_buy_button product_id="combpass_premium"]
出力内容（自動構成）
- プラン名
- サイト数（activation_limit）
- 料金（買い切り / サブスク）
- 「購入する」または「アップグレードする」ボタン
表示例（概念）
CombPass Premium
プラン一覧
-----------------------------------
1サイト ¥3,980 [購入]
3サイト ¥9,800 [購入]
5サイト ¥12,800 [購入] ← ベストバリュー表示可
-----------------------------------
現在の状態:
あなたは 1サイト版 を利用中です
利用中プランより上位プランが存在します
差額支払いでアップグレード可能:
→ 3サイト版 +¥4,800 [アップグレード]
→ 5サイト版 +¥8,800 [アップグレード]
3. 差額計算の仕組み
差額計算はサーバー側（AppCotton）で自動で行います。
ルール
差額 = 新しいプランの価格 - 現在のプランの価格
課金は Stripe Checkout の 一回決済 として処理されます。
例
| プラン | 価格 |
|---|---|
| 1サイト版 | ¥3,980 |
| 3サイト版 | ¥9,800 |
差額：
9,800 - 3,980 = 5,820円
4. UIロジック（サーバ側）
UI自動生成時の判断ロジックは下記です。
ライセンス未保有
→ 全プランに「購入」ボタン
ライセンス保有中
→ 同じプラン = 「利用中」
→ 下位プラン = 表示するが操作不可
→ 上位プラン = 差額計算して「アップグレード」ボタン表示
5. カスタマイズ（任意）
| 設定 | 説明 |
|---|---|
| ベストバリュー表示 | 価格効率が良いプランに recommended を付与 |
| 表示順 | sort_order フィールドで制御 |
| UIスタイル | CSSクラス appcotton-plan-card を上書き |
6. 実装チェックリスト
product_slugが SDK に設定されている- プランが
appcotton管理画面で登録されている - Stripe Price ID がプランに設定されている
- 差額課金が有効な場合は価格整合が取れている
- ショートコード
[AppCotton] エラー: product 属性を指定してください。
まとめ
• 購入・アップグレードUIはショートコードで自動生成できる
• 現在のプランと上位プランを比較して差額課金を提示する
• UIロジックはライセンス状態と product_slug を基準に自動判定
• Stripe Checkout 経由で購入・アップグレードが完結する