カード情報入力モーダルについて

［カード情報を入力する］ボタンを押下した際に表示されるモーダルです。

カード情報入力モーダルでクレジットカード情報を入力して、設定ボタンを押下します。
クレジットカード情報は、決済代行会社（株式会社エフレジ、またはSBペイメントサービス株式会社）が運営する決済サーバーに、トークン方式（カード情報非通過方式）により直接送信されるため、オンラインショップサーバーを通過いたしません。

• 見出し「カード情報入力」
  それぞれコマースクリエイター＞メッセージにある以下のメッセージが表示されます。
  SBPS：「クレジットカード（SBPS）モーダル見出し」
  F-REGI：「クレジットカード（F-REGI）モーダル見出し」
• セキュリティコード説明文
  「セキュリティコードはクレジットカード裏面の末尾3桁（一部4桁）の数字です。
  （一部のクレジットカードの場合、カード表面右上にある4桁の数字となります）」
  それぞれコマースクリエイター＞メッセージにある以下のメッセージが表示されます。
  SBPS：「クレジットカード（SBPS）セキュリティコードメッセージ」
  F-REGI：「クレジットカード（F-REGI）セキュリティコードメッセージ」
• ［設定］ボタン
  コマースクリエイター＞テーマ＞ボタンの「設定-注文」ボタンが表示されます。
• ［キャンセル］ボタン
  コマースクリエイター＞テーマ＞ボタンの「キャンセル-共通」ボタンが表示されます。

クレジットカードの変更

カードを登録すると、下図のような画面が表示されます。
一度登録したカードを変更し、選択することができます。

• ［変更］ボタン
  コマースクリエイター＞テーマ＞ボタンにある「変更-注文」ボタンが表示されます。
  変更ボタンを押下すると、カード情報入力モーダルが表示され、カードを変更することができます。

【お申込み時に選択】【購入者によるサイクル指定】期限ありコース（販売期間を指定）

設定＞定期・頒布会＞定期サイクル設定定-定期サイクル設定-期間・回数で「期間」が選択されている場合です。

構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定でお届け月コース（期限有コース）が選択されている場合です。

• 「コース」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-期間構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定-お届け月コース（期限有）の設定がプルダウンとして表示されます。
  お客様（消費者）に販売期間を選択していただきます（必須）。
• 「初回お届け日」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-初回お届け希望日選択設定「利用する」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」がチェックされている場合に表示されます。 お客様（消費者）に初回のお届け希望の日を指定していただけます。
  ※ただし、設定＞配送・送料＞配送サービス一覧＞宅配便設定＞お届け日時設定-利用設定構築＞入力項目設定＞お届け日時の設定の「利用する」がチェックされていない場合は表示されません。
  ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。
• 「日付指定」ラジオボタン
  設定＞定期・頒布会＞定期サイクル設定-お届け日選択肢「日付」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-日付指定」をチェックすると表示されます。
• 「曜日指定」ラジオボタン
  設定＞定期・頒布会＞定期サイクル設定-お届け日選択肢設定「曜日」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-曜日指定」をチェックすると表示されます。
• 「お届け間隔：毎月」
  「期間」を選択している場合は「毎月」と固定表示されます。
• 「お届け日」（日付指定）「お届けタイミング」（曜日指定）プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日選択肢構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-日付指定/曜日指定」でチェックされている日付、週・曜日が選択肢として表示されます。
• 「さらにお届け」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日選択肢「1か月に2回まで選択可能にする」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-日付指定/曜日指定-最大１ヶ月２回まで指定可にする」がチェックされている場合に表示されます。
  お客様が選択すると、月2回のお届けとなります。

【お申込み時に選択】【購入者によるサイクル指定】期限ありコース（販売回数を指定）/期限なしコース

設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-期間・回数で「回数」または「制限なし」が選択されている場合です。

構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定でお届け回数コース（期限有コース）または期限無コースが選択されている場合です。

• 「コース」プルダウン（共通）
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-回数構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定-お届け回数コース（期限有コース）の設定がプルダウンとして表示されます。
  お客様（消費者）に販売回数を選択していただきます（必須）。
• 「初回お届け日」プルダウン（共通）
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-初回お届け希望日選択設定「利用する」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」がチェックされている場合に表示されます。 お客様（消費者）に初回のお届け希望の日を指定していただけます。
  ※ただし、設定＞配送・送料＞配送サービス一覧＞宅配便設定＞お届け日時設定-利用設定構築＞入力項目設定＞お届け日時の設定の「利用する」がチェックされていない場合は表示されません。
  ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。
• 「日付指定」ラジオボタン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔で「1ヶ月間隔、2ヶ月間隔、3か月間隔」のいずれかにチェック、かつ「日付を選択可能にする」をチェックすると表示されます。
• 「日付指定」ラジオボタン
  構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届け間隔設定「購入者によるサイクル指定-日付指定」をチェックすると表示されます。
• 「曜日指定」ラジオボタン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔で「1ヶ月間隔、2ヶ月間隔、3か月間隔」のいずれかにチェック、かつ「曜日を選択可能にする」をチェックすると表示されます。
• 「曜日指定」ラジオボタン
  構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届け間隔設定「購入者によるサイクル指定-曜日指定」をチェックすると表示されます。
• 「お届け間隔」プルダウン
  「日付指定/曜日指定」の場合のみ表示されます。
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔「1ヶ月間隔、2ヶ月間隔、3か月間隔」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届け間隔設定「1ヶ月、2ヶ月、3か月」でチェックした間隔が選択肢として表示されます。
  いずれか一つのみチェックしている場合は、固定文言が表示されます。
  「1ヶ月間隔」「1ヶ月」にチェック：お届け間隔「毎月」
  「2ヶ月間隔」「2ヶ月」にチェック：お届け間隔「2ヶ月に1回」
  「3ヶ月間隔」「3ヶ月」にチェック：お届け間隔「3ヶ月に1回」
• 「お届け日」（日付指定）「お届けタイミング」（曜日指定）プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日選択肢構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル設定-日付指定/曜日指定」でチェックされている日付、週・曜日が選択肢として表示されます。
• 「さらにお届け」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日選択肢設定「1か月に2回まで選択可能にする」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-日付指定/曜日指定-最大１ヶ月２回まで指定可にする」がチェックされている場合に表示されます。
  お客様が選択すると、月2回のお届けとなります。
  ※お届け間隔「1ヶ月（毎月）」の場合のみ設定できます。
  ※期限なしコースでは表示されません。

「コース」「初回お届け日」プルダウンの表示は共通です。

• 「サイクル指定」ラジオボタン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔「お届け間隔を日数で選択可能にする」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「購入者によるサイクル指定-サイクル指定」をチェックすると表示されます。
• 「サイクル指定」選択肢内の「初回お届け日」
  サイクル指定の場合のみ表示されます。
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-初回お届け希望日選択設定「利用する」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」の設定により異なります。
  「サイクル指定」の場合のみ、選択必須となります。
  ・チェックしていない場合：サイクル開始日を決定するため、初回のお届け日を設定するプルダウンが表示されます。（上図左）
  ・チェックしている場合：「初回お届け日」プルダウン（共通）が表示され、選択した日付が固定文言として表示されます。（上図右）「初回お届け日」プルダウン（共通）が未選択の場合は、「指定してください」と表示されます。
  ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。

【お申込み時に選択】【購入者によるサイクル指定】頒布会

• 「初回お届け日」プルダウン
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-初回お届け希望日選択設定「利用する」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」のがチェックされている場合に表示されます。 お客様（消費者）に初回のお届け希望の日を指定していただけます。
  ※ただし、設定＞配送・送料＞配送サービス一覧＞宅配便設定＞お届け日時設定-利用設定構築＞入力項目設定＞お届け日時の設定の「利用する」がチェックされていない場合は表示されません。
  ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。
• 「日付指定」ラジオボタン
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日「日付」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「購入者によるサイクル設定-日付指定」を選択すると表示されます。
• 「曜日指定」ラジオボタン
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日「曜日」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「購入者によるサイクル設定-曜日指定」を選択すると表示されます。
• 「お届け間隔：毎月」
  頒布会は1ヶ月に1回のお届けとなるため、「毎月」と固定表示されます。
• 「お届け日」（日付指定）「お届けタイミング」（曜日指定）プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日選択肢構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「購入者によるサイクル設定-日付指定/曜日指定」でチェックされている日付、週・曜日が選択肢として表示されます。

【店舗設定】【店舗によるサイクル固定】期限ありコース（販売期間を指定）

設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-期間・回数で「期間」が選択されている場合です。

構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定でお届け月コース（期限有コース）が選択されている場合です。

• 「コース」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-期間構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定-お届け月コース（期限有）の設定がプルダウンとして表示されます。
  お客様（消費者）に販売期間を選択していただきます（必須）。
• 「初回お届け日」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-初回お届け希望日選択設定「利用する」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-初回お届け希望日設定(コマースクリエイター)「初回お届け日を変更可にする」がチェックされている場合に表示されます。 お客様（消費者）に初回のお届け希望の日を指定していただけます。
  ※ただし、設定＞配送・送料＞配送サービス一覧＞宅配便設定＞お届け日時設定-利用設定構築＞入力項目設定＞お届け日時の設定の「利用する」がチェックされていない場合は表示されません。
  ※表示される日付について、注意事項がございます。初回お届け日時の「選択肢」表示についてをご覧ください。
• 「日付指定」
  設定＞定期・頒布会＞定期サイクル設定-お届け日「日付」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-日付指定」をチェックすると表示されます。
• 「曜日指定」
  設定＞定期・頒布会＞定期サイクル設定-お届け日「曜日構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-曜日指定」」をチェックすると表示されます。
• お届け間隔とお届け日「毎月1日にお届け」（日付指定）
  〈お届け間隔〉
  「期間」を選択している場合は「毎月」と固定表示されます。
  〈お届け日〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「日付-毎月お届けする日付」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-日付指定-毎月［　　］」で設定した日付が表示されます。
• お届け間隔とお届けタイミング「毎月第4日曜日にお届け」（曜日指定）
  〈お届け間隔〉
  「期間」を選択している場合は「毎月」と固定表示されます。
  〈お届けタイミング〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「曜日-毎月お届けする週・曜日」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-曜日指定-毎月［第　　］［　　曜日］」で設定した週・曜日が表示されます。
• さらにお届けする日/タイミング「さらに、毎月月末にお届け」
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定」で設定した日付が表示されます。の設定が表示され、月2回のお届けとなります。
  ・日付指定の場合：「日付-毎月お届けする日付（追加）」「さらに毎月［　］もお届け日として指定する」が表示されます。
  ・曜日指定の場合：「曜日-毎月お届けする週・曜日（追加）」「さらに毎月［第　　］［　　曜日］もお届け日として指定する」が表示されます。

【店舗設定】【店舗によるサイクル固定】期限ありコース（販売回数を指定）/期限なしコース

設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-期間・回数で「回数」または「制限なし」が選択されている場合です。

構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定でお届け回数コース（期限有コース）または期限無コースが選択されている場合です。

• 「コース」プルダウン
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-回数構築＞定期・頒布会設定＞定期サイクル設定-申込コース設定-お届け回数コース（期限有コース）の設定がプルダウンとして表示されます。
  お客様（消費者）に販売回数を選択していただきます（必須）。
• 「日付指定」
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「日付」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-日付指定」をチェックすると表示されます。
• 「曜日指定」
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「曜日」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定-曜日指定」をチェックすると表示されます。
• お届け間隔とお届け日「3ヶ月に1回27日にお届け」（日付指定）
  〈お届け間隔〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔「1ヶ月間隔、2ヶ月間隔、3か月間隔」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「1ヶ月、2ヶ月、3か月」の設定が表示されます。
  「1ヶ月間隔」「1ヶ月」にチェック：お届け間隔「毎月」と表示されます。
  「2ヶ月間隔」「2ヶ月」にチェック：お届け間隔「2ヶ月に1回」と表示されます。
  「3ヶ月間隔」「3ヶ月」にチェック：お届け間隔「3ヶ月に1回」と表示されます。
  〈お届け日〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「日付-毎月お届けする日付」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届けサイクル設定「日付指定-毎月［　　］」で設定した日付が固定表示されます。
• お届け間隔とお届けタイミング「毎月第1金曜日にお届け」（曜日指定）
  〈お届け間隔〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け間隔「1ヶ月間隔、2ヶ月間隔、3か月間隔」構築＞定期・頒布会設定＞定期サイクル設定-お届けサイクル設定「1ヶ月、2ヶ月、3か月」の設定が表示されます。
  「1ヶ月間隔」「1ヶ月」にチェック：お届け間隔「毎月」と表示されます。
  「2ヶ月間隔」「2ヶ月」にチェック：お届け間隔「2ヶ月に1回」と表示されます。
  「3ヶ月間隔」「3ヶ月」にチェック：お届け間隔「3ヶ月に1回」と表示されます。
  〈お届け日〉
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日「曜日-毎月お届けする週・曜日」構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届けサイクル設定「曜日指定-毎月［第　　］［　　曜日］」で設定した日付が固定で表示されます。
  
• さらにお届けするタイミング「（さらに、毎月第4金曜日にお届け）」
  設定＞定期・頒布会＞定期サイクル設定-定期サイクル設定-お届け日構築＞定期・頒布会設定＞定期サイクル設定-定期サイクル設定-お届けサイクル設定「店舗によるサイクル固定」の設定が表示され、月2回のお届けとなります。
  ・日付指定の場合：「日付-毎月お届けする日付（追加）」「さらに毎月［　］もお届け日として指定する」が表示されます。
  ・曜日指定の場合：「曜日-毎月お届けする週・曜日（追加）」「さらに毎月［第　　］［　　曜日］もお届け日として指定する」が表示されます。
  ※お届け間隔「1ヶ月（毎月）」の場合のみ設定できます。

【店舗設定】【店舗によるサイクル固定】頒布会

• 「日付指定」
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日「日付」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「店舗によるサイクル固定-日付指定」を選択すると表示されます。
• お届け日「毎月16日にお届け」
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日-「日付」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「店舗によるサイクル固定-日付指定-毎月［　　］」で設定した日付が表示されます。
  頒布会は1ヶ月に1回のお届けとなるため、「毎月」は固定表示されます。
• 「曜日指定」
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日「曜日」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「店舗によるサイクル固定-曜日指定」を選択すると表示されます。
  頒布会は1ヶ月に1回のお届けとなるため、「毎月」は固定表示されます。
• お届けタイミング「毎月第1土曜日にお届け」
  設定＞定期・頒布会＞頒布会サイクル設定-頒布会サイクル設定-お届け日-「曜日」構築＞定期・頒布会設定＞頒布会サイクル設定-頒布会サイクル設定-お届けサイクル設定「店舗によるサイクル固定-曜日指定-毎月［第　　］［　　曜日］」で設定した週と曜日が表示されます。

お届け予定日一覧モーダルについて

• 見出し「お届け予定日一覧」
  コマースクリエイター＞メッセージの「お届け日一覧モーダル見出し」を表示できます。
• メッセージ「お申し込みコース・お届け日指定によるお届け予定日です。」
  コマースクリエイター＞メッセージの「お届け日一覧モーダルメッセージ」を表示できます。

「お支払い金額/各回のお支払い金額」表示スペースのカスタマイズ方法

改正特定商取引法に基づく消費者庁のガイドラインに、より沿った形でのカスタマイズも可能ですので、サンプルコード（CSS）をご参照ください。

コマースクリエイター＞フリーパーツを利用します。

1. フリーパーツを新規作成し、各サンプルコードを参考に記述してください。
2. コマースクリエイター＞テーマ（各デバイス）＞レイアウト-お申し込み手続きにて「お支払い金額パーツ」の「head設定」に配置してください。レイアウト配置方法については、コマースクリエイター＞レイアウト変更をご覧ください。

<style>
.fs-body-checkout-subscribe .fs-c-totalAndActions {
  display: flex;
  flex-wrap: wrap;
}
.fs-body-checkout-subscribe .fs-c-totalAndActions > * {
  width: 100%;
  order: 1;
}
.fs-body-checkout-subscribe .fs-c-totalAndActions .fs-c-confirmSubscription {
  order: 2;
}
</style>
			

<style>
.fs-c-subscriptionTotal__title,
.fs-c-subscriptionTotalTable {
  font-size: 1.4rem;
}
.fs-c-subscriptionTotalTable__grandTotal .fs-c-price,
.fs-c-subscriptionGrandTotal__value .fs-c-price {
  font-size: 1.8rem;
}
</style>
			

コマースクリエイター＞フリーパーツを利用します。レイアウトパーツの作成が必要になりますので手順をご確認ください。

1. フリーパーツを新規作成し、サンプルコードを参考に記述してください。
2. コマースクリエイター＞テーマ（各デバイス）＞レイアウト-お申し込み手続きにて「お支払い金額パーツ」を開き、「お申し込み手続きエリア」を開きます。
3. ［レイアウトパーツを追加する］を押下し、新規レイアウトパーツを作成します。
   任意の名前とclass（例：amountLayout）を指定してください。
4. （3）で作成したレイアウト内に「お支払い金額パーツ」と（1）で作成したフリーパーツを配置します。配置方法はコマースクリエイター＞レイアウト変更をご覧ください。
5. （3）のレイアウトパーツの幅を調整します。レイアウトパーツ幅調整用サンプルをご参照ください。

<div class="fs-c-buttonContainer">
  <a href="/p/cart?type=subscribe" class="fs-c-button--change--small fs-c-button--standard">
    <span class="fs-c-button__label">カートに戻る</span>
  </a>
</div>
			

.amountLayout {
  flex-grow: 1;
  flex-basis: 320px;
  min-width: 320px;
}