支払方法登録


{success} 支払い方法を設定する画面です。


概要

マスターアカウントのみアクセスできます。

初回申込時に(state:2)、設定されてなければ必ずここに遷移させます。(その他遷移不可 middleware が必要)

通常利用時にも、変更したい場合利用可能です。

監理団体メニューに(右上ドロップダウン内)設置します。

クレジットカードを選択時は、必ずクレジットカード情報を登録してから、設定するボタンを押下します。

(コンビニ払いだけどクレジット情報の登録がある状態を想定)

プランアップはいつでも可能です。

プランダウンの際は、現在登録済みの技能実習生以下の人数を入力することは不可とします。

ダウンさせたい場合、技能実習生を「削除」してから、行ってもらう流れとなります。

またプランを変更した際は、都度決済を行わず、次回請求確定日に料金の確定とします。


基本情報

名称 定義 備考
ディレクトリ components/payment vue.js のディレクトリです。
component payment_method vue.js の componennt 名です。
route /payment/payment_method route 名です。

画面レイアウト図

設計時:

image


画面項目

{primary} 画面に表示する項目等の情報を記載します。

No. 物理名 項目・論理名 タイプ 必須 備考
1 payment_method 支払方法選択 radio 1:クレジット  5:コンビニ払い
- 下記はクレジット選択時 - - - -
2 credit_card_type カード種類 text - VISA 等
2 credit_card_number カード下四桁 text -
2 credit_card_nominee カード名義人 text -
2 credit_card_effective カード有効期限 text -
- 下記はクレジット登録・変更時 - - - -
3 credit_card_number カード番号 input -
4 credit_card_secure_number セキュリティコード input -
5 credit_card_nominee カード名義人 input -
6 credit_card_effective カード有効期限 input -
7 - 戻る button -
8 - 保存 button -
- 下記は常に表示 - - - -
9 plan プラン人数 input -
10 payment_timing 支払い時期 input - 1 月払い/5:年払い
11 - 設定する button - -
- 下記はコンビニ決済選択時 - - - -
12 cvs_id 支払先コンビニ select - 内容はEnumを参照

画面アクション

{primary} 上記項目の備考で記載しきれないものや、特記事項があるものを記載します。主に画面の処理(フロント)を記載します。

対象 No. 項目名 処理内容
1 クレジット選択時 9 以外の項目を表示(クレジット関連の情報)
1 クレジット選択時 クレジット登録がない場合は、「登録がない」旨のコンテンツを表示
8 クレジットカード登録(新規) 新規の場合は入力された情報が属性チェックで問題ない場合、「必ず設定するを押して登録してください。じゃないと破棄されます」と表示
8 クレジットカード登録(更新) 更新の場合、更新処理までされるのでリロード
12 コンビニ 表示はコンビニ名 valueにはコンビニID

処理

{primary} 本画面に関する処理を記載します。主にシステムの処理(バックエンド)を記載します。

No. 項目名 処理内容
1 クレジットカード登録 POST/クレジットカード登録
2 クレジットカード削除 POST/クレジットカード削除
3 決済方法取得 GET/決済方法取得
4 決済方法登録 POST/決済方法登録変更
5 アクセス制御 マスターアカウント以外ははじく
6 アクセス制御(middleware) status:2  で 決済方法の登録がなければ、ここしか遷移できないように
7 クレジットカード登録(新規) クレジットカードを入力後保存したら、属性チェック(有効判定)のみ
8 クレジットカード登録(更新) クレジットカードを入力後保存したら、属性チェック(有効判定)後、更新処理
9 支払方法変更時 クレジットからコンビニ払いへ変更時、クレジットカードを削除すること

成功後の処理

{danger} 新規作成~請求フロー をチェック


詳細設計

支払方法登録