人気ワード

Copy Title & URL

Bookmark

Feed

Share

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

目次

  1. payモジュール連携時のコンテンツ
  2. コンテンツの作成
    1. コンテンツ情報・コンテンツ設定
    2. テンプレートHTML
      1. 入力画面HTML
      2. エラー挿入HTML
      3. 確認画面HTML
      4. 完了画面HTML

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

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

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

コンテンツの作成

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

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

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

テンプレートHTML

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

入力画面HTML

入力画面HTML

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

基本:pay_item
商品情報を定義します。
オプションセット:pay_option
注文に対するオプションを定義します。
カード情報オプション:pay_save_option
カード情報の引き継ぎ情報の動作を定義します。

コードの記述例: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>

コードの説明

基本:pay_item
id 任意
32文字以下の値(半角英数字と「_」「-」が利用可能)で入力。 ※重複可
name 必須
255文字以下の文字列。※日本語の使用も可
row 必須
商品の購入個数。合計金額の計算に使用します。
※必ず1以上の整数で指定。
price 必須 商品の税抜き金額。
※整数で指定。マイナスも使用可。
tax 必須
商品の消費税率。
※整数であり、必ず「0」以上で指定(「0」は可)
オプション:pay_option
name 注文の名前を自由に決定できます。
※指定がない場合は「名称未指定」になります。
pay_fixed_option 継続決済に変更するオプション(配列)。
以下の設定がない場合、または指定外設定の場合は「都度決済」になります。
pay_fixed_optionの値
type 継続条件を指定。
interval:初回決済の後、n日ごとに決済。
monthly:初回決済の後、毎月n日に決済。
※n値は次の val で指定します。
val interval の場合:日数値 1以上を指定。
monthly の場合:固定の日付、0~27までを指定。月末は「0」を指定。
first_amount 商品合計金額(初回)を設定。
・金額は「0」以上の整数で指定。
・未指定、数値ではない、0未満など指定外の場合は通常金額と同一になります。
・初回金額は「税込み金額」で指定。
※カンマ区切りの形式は使用できません。
カード情報オプション:pay_save_option
type カード情報を引き継ぐ動作を指定。
save:決済終了後に現在の情報をカード情報にコピーします。
load:一部のエラーチェックをスキップさせ、
指定したIDのカード情報を使って決済を行います。
id カード情報のシステムIDを指定します。
type:saveの場合は指定なし、type:loadは、必須
ユーザー権限専用のAPI:getPaymentListで取得します。
※詳細はAPI仕様書に記載。

カード情報の扱いについて

カード情報のシステムIDは決済代行会社側のIDではなくパレット内のIDです。 クレジットカード情報は本システムには一切保持されず、決済代行会社で管理されています。

JSON記述内の数値(first_amount)について
前提として数値はカンマ区切り数字(例:5,000)は扱えませんが、パレットCMSの整数項目は表示出力用に「桁区切り設定」を用意しています。
JSONの記述において対象の任意項目変数(整数項目)で指定する場合は、項目を「桁区切り設定:設定しない」で作成してください。
整数項目の桁区切り
※priceは表示出力の使用頻度などを考慮し「桁区切り設定」が可能になっています。内部的にカンマを削除処理し、小数点も切り捨てられます。

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

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

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

決済方法の選択
図:payシート編集 > 共通設定 > 決済方法の設定

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

user・entry登録コンテンツ:pay変数の使用例

カード情報の変数

変数名 変数 説明
【決済】{シート名} 決済方法 pay_sheet_{シートID} 決済方法選択がラジオボタン形式で出力されます。
決済を行うときは必ず設置してください。
【決済】カード番号
【引数対応】
card_num クレジットカード情報入力項目
【決済】有効期限(年) card_y クレジットカード情報入力項目
【決済】有効期限(月) card_m クレジットカード情報入力項目
【決済】セキュリティーコード
【引数対応】
card_code クレジットカード情報入力項目
【決済】カード名義
【引数対応】
card_name クレジットカード情報入力項目

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

エラー挿入HTML

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

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

入力画面HTML、エラー挿入HTML、確認画面HTMLと完了画面HTMLの位置づけ

エラーメッセージの出力例:pay_save_option

エラーメッセージ 説明 / 対応
pay_save_optionをjson規格で入力してください。 pay_save_optionがjson規格ではない。
記述方法を確認してください。
正しいpay_save_option.typeを入力してください。 typeが想定した内容ではない。
typeを「save」「load」「空(null)」にしてください。
カード情報の読み込みに失敗しました。 type:load時、idが渡されていない。
カード情報の読み込みに失敗しました。 type:load時、idのレコードが取得できない。
カード情報の読み込みに失敗しました。 type:load時、idのレコードの所有者と操作者が異なる。
選択された決済方法が異なります。 type:load時、idのレコードの決済方法と実際に指定された
決済方法が異なる。

確認画面HTML

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

確認・完了画面HTML

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

変数名 変数 説明
【決済】商品合計金額(初回) pay_pay_first_amount 継続決済時の商品合計金額(初回)
カンマ区切りで出力。単位は付与されせん。
【決済】商品合計金額 pay_pay_total_amount 商品合計金額
カンマ区切りで出力。単位は付与されせん。
【決済】次回決済日 pay_pay_fixed_next 次回の決済が行われる日付を(Y/m/d)を出力
【決済】次回決済日
(unixtime)
pay_unixtime_pay_fixed_next 次回の決済が行われる日付をunixtimeで出力

Attention

「確認画面」においても、フォーム用変数:[form_start] 、[form_end]を設置してください。

完了画面HTML

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

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

関連記事