payモジュール連携時のコンテンツの作成方法（ユーザー・エントリー・フォーム登録）

payモジュール連携時のコンテンツ

payモジュールと紐づけたuser、entry、formシートの登録コンテンツの作成方法を解説します。
payモジュールの基本設定方法

「商品情報」＝「課金対象の情報」は連携するモジュール（user / entry / form）のコンテンツで定義します。「会員登録時の課金」「イベント申し込みへの決済」など、有形・無形を問わず決済機能が構築できます。

コンテンツの作成

まず、payモジュールの対象シートの登録コンテンツ（ユーザー登録 / エントリー登録 / フォーム登録）を登録します。

コンテンツ情報・コンテンツ設定

コンテンツ情報・コンテンツ設定については、以下マニュアルをご確認ください。
コンテンツタイプ【user】：ユーザー登録
コンテンツタイプ【entry】：エントリー登録
コンテンツタイプ【form】：フォーム登録

テンプレートHTML

各登録コンテンツでは、以下の編集エリアを用意しています。編集エリアでHTMLの編集や変数を挿入し、各画面を作成します。

入力画面HTML

まず、商品情報と注文に対するオプションを設定します。フォーム外にJSON形式で記述します。

コードの記述例：pay_item、pay_option

jqueryライブラリを呼び出す変数：[jquery]を設置してください。

[jquery]
<script type="text/javascript">
  $(function () {
      var item = [
          {"name": "月額会員登録", "price": 3000, "row": 1, "tax": 10},
      ];
      $('[name="pay_item"]').val(JSON.stringify(item));

      var option = {
          "name": "月額会員の申込",
          "pay_fixed_option": {"type": "monthly", "val": "16"},
      };
      $('[name="pay_option"]').val(JSON.stringify(option));
  });
</script>

コードの記述例：pay_item、pay_option（変数を利用した例）

[jquery]
<script type="text/javascript">
  $(function () {
    //基本
    var item = [
    {"id": "[entry_item]", "name": "[entry_item_name]", "price": "[item_origin_price]", "row": "1", "tax": "[item_origin_tax]"},
    ];
    $('[name="pay_item"]').val(JSON.stringify(item));
    //オプションセット
    var option = {
      "name": "[entry_item_name]",
      "pay_fixed_option": {"type": "interval", "val": "15", "first_amount": "[item_origin_first_amount]"},
    };
    $('[name="pay_option"]').val(JSON.stringify(option));
  });
</script>

コードの記述例：pay_save_option

<script type="text/javascript">
  $(function () {
    $('[name="controller"]').on("change", function () {
      var select_obj = $(this);
      switch(select_obj.val()) {
        case "save":
          $('[name="pay_save_option"]').val(JSON.stringify({"type": "save"}));
        break;
        case "load":
          $('[name="pay_save_option"]').val(JSON.stringify({"type": "load", "id": select_obj.find("option:selected").attr("data-id")}));
        break;
        default:
          $('[name="pay_save_option"]').val(JSON.stringify({}));
        break;
      }
    });
    $('[name="controller"]').trigger("change");

      //クレジット選択肢生成
    $.ajax( {
      url: './API?pay_method=決済方法ID',
      type: 'GET',
      headers: {
        'X-HTTP-Method-Override': 'GET',
        'X-Auth-Token': 'session',
      }
    }).done(function (response) {
      for(let key in response.records) {
        $('[name="controller"]').append('<option value="load" data-id="' + response.records[key].id + '">保存したクレジットを使う（' + response.records[key].charge_display + '）</option>');
      }
    });
  });
</script>

次に、決済に関わる変数を登録フォームの中に組み込んでいきます。フォームを作成時はフォーム用変数を配置してください。

• フォームスタート用変数：[form_start] 、フォームエンド用変数：[form_end]
• フォームスタート用変数（確認画面なし）：[form_start_skip]

変数：pay_sheet_{シートID}を置くことで、当該コンテンツに紐づくpayシート内で定義した決済方法の選択が可能になります。必ず設置してください。

※payシートで「決済方法」として設定し、かつ、決済方法管理 | 決済方法設定において、ステータス「有効」である決済方法が選択肢となります。

フォームに配置した項目について、必須設定、フォーマット設定の入力チェックが行われます。エラーメッセージを表示させる箇所にエラー表示用変数：[error]を配置します。出力内容は次の「エラー挿入HTML」で編集します。

エラー挿入HTML

「入力画面HTML」で変数：[error] を配置した場所に出力するエラーメッセージを編集します。

複数のエラー表示の形式として、スラッシュ区切り、改行、リスト形式、スパン区切りの4パターンの変数を用意しています。

確認画面HTML

フォーム入力後に遷移する確認画面を作成します。「基本HTML」のソースを流用し、適宜編集します。

商品金額の変数は、カンマ区切り（例：5,000）の形式で出力されます。出力変数に単位は付与されないので適宜「円」などのテキストを追記してください。

完了画面HTML

確認画面から登録完了後に遷移する画面を作成します。

payモジュール関連マニュアル

• payモジュールの基本設定方法
• payモジュール：継続決済の商品情報を編集・登録する方法
• 自動配信メール管理：payモジュール
• コンテンツタイプ【pay】：注文一覧
• コンテンツタイプ【pay】：注文詳細
• コンテンツタイプ【pay】：決済一覧
• コンテンツタイプ【pay】：注文編集