pay：決済機能（都度・継続）
payモジュールとuser、entry、formモジュールなどの連携で、継続決済機能を構築するサンプルコードを紹介します。
※entryモジュールは、エントリ対象のシートとしてitemモジュールとの連携が前提です
サンプルコード
payモジュールと紐づけたuser、entry、formシートの登録コンテンツで決済機能を構築できます。
「商品情報」＝「課金対象の情報」は連携するモジュール（user / entry / form）のコンテンツで定義します。
「会員登録時の課金」「イベント申し込みへの決済」など、有形・無形を問わず決済機能が構築できます。
コンテンツの作成
まず、payモジュールの対象シートの登録コンテンツ（ユーザー登録 / エントリー登録 / フォーム登録）を登録します。
テンプレートHTML
入力フォ―ムに決済機能を記述します。
まず、商品情報と注文に対するオプションを設定します。フォーム外にJSON形式で記述します。
基本：pay_item 商品情報を定義します。
オプションセット：pay_option 注文に対するオプションを定義します。
カード情報オプション：pay_save_option カード情報の引き継ぎ情報の動作を定義します。
コードの記述例：pay_item、pay_option
jQueryライブラリを呼び出す変数：[jquery]を設置してください。
<!-- html -->
[jquery]
[pay_sheet_*******]
// javascript
const items = [
{"name": "月額会員登録", "price": 3000, "row": 1, "tax": 10},
];
$("[name='pay_item']").val(JSON.stringify(items));
const option = {
"name": "月額会員の申込",
"pay_fixed_option": {"type": "monthly", "val": "16"},
};
$("[name='pay_option']").val(JSON.stringify(option));
コードの記述例：pay_item、pay_option（変数を利用した例）
<!-- html -->
[jquery]
[pay_sheet_*******]
// javascript
const items = [
{"id": "[entry_item]", "name": "[entry_item_name]", "price": "[item_origin_price]", "row": "1", "tax": "[item_origin_tax]"},
];
$("[name='pay_item']").val(JSON.stringify(items));
const 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));
コードの記述例：pay_save_option～保存したカードを使う場合～
<!-- html -->
[jquery]
[pay_sheet_*******]
// javascript
$("[name='pay_save_option']").val(JSON.stringify({"type": "save"}));
コードの記述例：pay_save_option～保存したカードを使う場合～
<!-- html -->
[jquery]
[pay_sheet_*******]
<select id="stored-credit-cards">
<option selected>選択してください</option>
<select>
// javascript
// 保存したクレジットカードデータの取得
const fetchStoredCreditCards = async () =>
{
const payMethodVal = $("[name='pay_method']").val();
const response = await fetch(`./api/v1/m/pay/getPaymentList?pay_method=${payMethodVal}`, {
method: 'GET',
headers: {
"x-Auth-Token": "session",
"Content-Type": "application/json"
},
}).catch((error) => console.error(error));
if (!response.ok) console.error(response.status);
const data = await response.json();
return data.records;
}
// 取得したクレジットカードデータからセレクトボックスを作成
const storedCreditCards = await fetchStoredCreditCards();
const storedCreditCardOptions = storedCreditCards.map(({ id, charge_display }) => `<option value="${id}">${charge_display}</option>`);
storedCreditCardOptions.forEach((element) =>
{
$("#stored-credit-cards").append(element);
});
// 選択したクレジットカードを使うように指定
$("#stored-credit-cards").on("change", (e) =>
{
const cardId = $(e.currentTarget).val();
const paySaveOptionValue = cardId === "" ? JSON.stringify({}) : JSON.stringify({ "type": "load", "id": cardId });
$("[name='pay_save_option']").val(paySaveOptionValue);
});
コードの説明
基本：pay_item
| 項目 | 内容 |
|---|---|
| id | 任意 32文字以下の値（半角英数字と「_」「-」が利用可能）で入力。※重複可 |
| name | 必須 255文字以下の文字列。※日本語の使用も可 |
| row | 必須 商品の購入個数。合計金額の計算に使用します。 ※必ず1以上の整数で指定 |
| price | 必須 商品の税抜き金額。 ※整数で指定。マイナスも使用可 |
| tax | 必須 商品の消費税率。 ※整数であり、必ず「0」以上で指定（「0」は可） |
オプション：pay_option
| 項目 | 内容 |
|---|---|
| name | 注文の名前を自由に決定できます。 ※指定がない場合は「名称未指定」になります |
| pay_fixed_option | 継続決済に変更するオプション（配列） |
以下、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）を使用できませんが、PaletteCMSの整数項目には「桁区切り設定」オプションがあります。
JSON記述内で使用する任意の整数項目では、「桁区切り設定：設定しない」を選択してください。
※price には内部処理でカンマを削除、小数点は切り捨てられます
決済に関わる変数のフォーム内配置
フォーム作成時は以下の変数を配置してください。
[form_start]（開始）、[form_end]（終了）[form_start_skip]（確認画面なし）pay_sheet_{シートID}：当該コンテンツに紐づく payシートで定義された決済方法 の選択を可能にします。
payシートで「決済方法」として設定し、「ステータス：有効」なものが選択肢となります。
カード情報の変数
| 変数名 | 変数 | 説明 |
|---|---|---|
| 【決済】〇〇（任意のシート名）決済方法 | pay_sheet_{シートID} | ラジオボタン形式で出力されます。必ず設置してください。 |
| 【決済】カード番号【引数対応】 | card_num | クレジットカード情報入力項目 |
| 【決済】有効期限（年） | card_y | クレジットカード情報入力項目 |
| 【決済】有効期限（月） | card_m | クレジットカード情報入力項目 |
| 【決済】セキュリティコード【引数対応】 | card_code | クレジットカード情報入力項目 |
| 【決済】カード名義【引数対応】 | card_name | クレジットカード情報入力項目 |
入力チェックとエラーメッセージ
フォームに配置した項目には、必須やフォーマットのチェックが行われます。
エラーメッセージは [error] 変数を設置した場所に出力されます。
エラーメッセージ出力例：pay_save_option
| エラーメッセージ | 説明・対応 |
|---|---|
pay_save_optionをjson規格で入力してください。 | JSON規格でない。記述方法を確認。 |
正しいpay_save_option.typeを入力してください。 | type が想定外。save, load, null にしてください。 |
カード情報の読み込みに失敗しました。 | type:load 時に id がない／取得できない／所有者が異なる／決済方法が異なる。 |
確認画面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形式） |
確認画面にも [form_start]・[form_end] を必ず設置してください。
完了画面HTML
確認画面から登録完了後に遷移する画面です。