Menu

管理ダッシュボード価格設定管理機能

前提条件

価格設定管理を使用する前に、以下の前提条件を完了していることを確認してください：

リストページ概要

注目すべき点

  • 価格設定管理のフロントエンドコードはapp/[locale]/(protected)/dashboard/(admin)/pricesフォルダに配置されています
  • 価格設定管理のバックエンドコードはactions/pricesフォルダに配置されています

前提条件を完了すると、管理者価格設定管理ページに初期化データが表示されます。/dashboard/pricesページでリストを確認でき、またランディングページで価格カードの表示効果も確認できます。

リストページでは様々な機能のエントリーポイントを提供しています：

  • 価格プランのあいまい検索と環境による価格プランのフィルタリング
  • 右側の「Columns Visibility」で表示する列を選択可能
  • 右側の「Create New Plan」で新しい価格プランの作成をサポート
  • テーブルのActionsカラムで価格プランの編集、複製、削除をサポート

list

ランディングページには現在の環境（LiveまたはTest）に対応する価格プランが表示されます：

pricing

価格プランの作成/複製/編集

価格プランの作成、複製、編集は同じフォームコンポーネントを共有します。機能の違いは以下の通りです：

  • 作成：空白のフォームを開き、ゼロから全く新しい価格プランを作成
  • 複製：既存の価格プランをコピーし、作成ページに入りますが、ソースデータを取得してフォームに入力するため、わずかな変更で新しい価格プランを作成可能
  • 編集：既存の価格プランを更新するため編集ページを開く

フォームコンポーネント概要

以下の例では、Test環境の価格プランを複製してLiveプランを作成する方法を示します。

複製後、フォームに入ると、「Stripe Integration」セクションが空の値に設定されている以外は、すべての情報がソースデータと一致します。

コア情報

form 1

「コア情報」セクションでは、環境を選択し、価格プランのタイトルと説明を入力する必要があります。

環境は「Stripe Integration」で入力するprice_idと一致する必要があり、STRIPE_SECRET_KEYとSTRIPE_PUBLISHABLE_KEY環境変数の環境と一致する必要があります。このステップは若干煩雑に見えるかもしれませんが、不正な操作によってテスト環境の価格プランが本番環境に誤って設定されることを防ぎます。

右側の「Settings」では、現在の価格カードの表示順序とアクティブかどうかを設定できます。下のプレビューエリアはWYSIWYG設計を使用し、エンドユーザーが見るものと同じスタイルです。価格プランを公開する前に、カードが異なる言語で情報を正しく表示することを確認する必要があります。

Stripe連携

form 2

Stripe製品情報からprice_idをコピーして「Stripe Integration」に貼り付け、「Verify & Fetch」をクリックするだけで、Stripeで設定された価格情報が自動的に入力されます。

表示とコンテンツ

form 3

form 4

このセクションはカードの表示情報を設定するために使用され、以下が含まれます：

  • 表示価格
  • 価格プランに含まれる特典のリスト。「included」チェックボックスは含有を示し（プレビューカードに✅表示）、チェックなしは非含有を示します（プレビューカードに❌表示）
  • カード表示をハイライトするかどうかの選択。ハイライトはユーザーの注意を引きやすく、最も推奨する価格プランに適しています
    • ハイライトを選択した場合、ハイライトテキストも入力する必要があります
  • ボタンテキスト
  • ボタンリンク。2つのリダイレクト動作をサポート：
    • ボタンがStripe決済フローに入るために使用される場合、リンクを入力する必要はありません
    • ボタンが外部リダイレクトに使用される場合、リダイレクトリンクを入力する必要があり、httpsリンクとemailリンクをサポートします

注目すべき点

ボタンリンクがサポートする異なるリダイレクト動作は、Nexty.devランディングページで体験できます

多言語翻訳

このセクションは価格カードの多言語版を設定するために使用されます。多言語設定を完了する方法は2つあります：

  • 「Generate Template」ボタンをクリックして多言語JSONテンプレートをワンクリック生成し、自分で翻訳するか他のプラットフォームで翻訳
  • 「Translate by AI」ボタンをクリックして多言語JSONテンプレートをワンクリック生成し、自動翻訳

多言語JSONが生成されると、価格プランカードコンテンツはそのJSONに従って優先的に表示されます。価格プランカードを編集して「表示とコンテンツ」のコンテンツを変更した場合、同時に多言語JSONコンテンツも更新する必要があります。

form 5

特典

このセクションはプラン特典をカスタマイズするために使用されます。3つの使用方法とシナリオがあります：

  • 「Benefits」を空のままにするか空のオブジェクトにした場合でも、決済フローは正常に動作します

    • 一回限り決済の場合、ordersテーブルに注文情報が生成されます
    • 定期サブスクリプションの場合、ordersテーブルに注文情報、subscriptionsテーブルにサブスクリプション情報が生成されます

  • 一回限り決済と定期サブスクリプションにクレジットを提供したい場合、usageテーブルと組み込みのone_time_credits_balanceおよびsubscription_credits_balanceフィールドを直接活用できます

    • 一回限り決済プランを作成する場合、「Benefits JSON」のone_time_creditsフィールドを通じて一回限り決済クレジットを定義します。例： 
      {
  "one_time_credits": 500
}
    • 定期サブスクリプションプランを作成する場合、「Benefits JSON」のmonthly_creditsフィールドを通じて月次サブスクリプションクレジットを定義します。例： 
        {
    "monthly_credits": 100
  }

    組み込みロジックを使用する場合、コードを修正する必要はありません - すべてが準備されています。ユーザーが決済後、ordersとsubscriptionsテーブルでデータが生成されることに加えて、usageテーブルでもデータが生成され、対応するクレジット値が記録されます。

    注目すべき点

    v1.1.4以降、/dashboard/credit-usage-exampleページで組み込みクレジット消費フローをテストできます。このページは開発環境でのみ開くことができるため、本番環境での悪用を心配する必要はありません。

  • より複雑な特典を実装する必要がある場合、「Benefits JSON」で特典をカスタマイズし、lib/stripe/webhook-handlers.tsのupgradeOneTimeCreditsとupgradeSubscriptionCreditsを再実装する必要があります。対応して、usageテーブルフィールドも拡張する必要があり、2つの拡張方法があります：

    • テーブル構造を修正し、特典フィールドを追加し、再実装したupgradeOneTimeCreditsとupgradeSubscriptionCreditsで新しいフィールドに値を割り当て

    • 再実装したupgradeOneTimeCreditsとupgradeSubscriptionCreditsで、usageテーブルのbalance_jsonbフィールドに特典情報を書き込み

    注目すべき点

    特典の再設計を自分で完了できない場合、data、lib/stripe、app/api/stripeフォルダのコードをAIに送信し、要件を説明して、lib/stripe/webhook-handlers.tsの処理ロジックの再実装を順次要求できます。

    「Benefits JSON」の詳細な使用法とカスタム実装については、決済フローで詳しく説明します。

新しい価格プランの作成を完了すると、リストで新しいデータを確認できます。

list 2

価格プランの削除

価格プランを削除する前に、ポップアップリマインダーが表示されます。

delete