ワークフローサンプル: 第505話：個人レッスンだって「クレジットで決済」の時代

「毎月の入金確認、メンドウだわぁ」

決済にまつわる悩みは尽きない。「オンラインバンキング」が便利になってきたとはいえ、「請求書の発行」から「入金の確認」には、それなりの手間がかかる。

さらに「未入金」が発生すると「督促する」という作業まで発生する。これは単に「手間がかかる」（工程が増える）というだけの話ではなく、払う側・受け取る側の双方に、精神衛生上の負担までもかかってしまう。もっともっと「電子決済化」できないものか？？

以下の業務プロセス定義は、「ピアノ教室の月謝」がカード決済されるワークフローだ。

この例では、（「毎月固定の月謝」ではなく）、「レッスン回数に応じた費用」が月末にカード課金される仕組みとなっている。たとえば、レッスンを2回受けた月は2000円、5回受けた月は5000円、といった具合だ。（オンライン決済には『Stripe』が使われる）

このワークフローでレッスン費用の電子決済化を実現すれば、レッスンを受ける生徒に「請求書」を手渡しする必要がなくなる。レッスンを受けさせる親にしてみても、毎月銀行にレッスン費用を振り込みに行かなくてよくなる。

ちなみにクラウド型ワークフロー『Questetra BPM Suite』は、「スタッフ10名以下」なら無料で使える。しかし、ログインの間隔が15日を超えると「サービス停止」になってしまうので注意が必要だ。もっとも、レッスンの終了の度に「レッスン実施日」（課金情報）を書き込みにログインすれば問題ない。

[レッスン費用カード課金]

このワークフローは、業務フロー図を見れば明らかなように、

クレジットカード情報が「Webフォーム」に入力されたとき
（主にデータ再利用で）手動開始したとき

に案件が流れ始める。そして〔1.課金情報入力〕の工程を『完了』した時にクレジット決済が行われる仕組みだ。

月末以外の日に、レッスンの実施日を追記したり、親御さんへのメッセージを加筆したりするだけなら、追記加筆後『保存して中断』すれば、そのまま〔1.課金情報入力〕の工程に滞留し続ける。

ところで、今どきのインターネット利用は、「パソコン・アクセス」より「スマートフォン・アクセス」の方が多い。ピアノ教室の Web サイトに「Webフォーム」を iframe 埋め込みするにしても「スマホ対応」が欠かせない。

ただ『Questetra BPM Suite』のワークフローを開始させる公開フォーム機能の場合、そのままのデザイン・スタイルでは、「画面幅が固定されている」や「フォームサイズが一定幅となっている」、あるいは「ピアノ教室の Web デザインと違う」など、そのままでは利用しづらい所がある。

そんな場合には、（どうしても CSS デザインの知識が必要となるが）、［入力のヒント］の設定欄に以下のような JavaScript を書き込んで、任意の CSS 情報に書き換えてやればよい。（<style>タグを使った加筆でも良い）

＜スマホ画面 before ＞（スタイル設定なし）

＜スマホ画面 after ＞

＜スマホメール画面＞

＜Stripe Customer 画面＞

▼『生徒のお名前』の［入力ヒント］の設定サンプル（全体スタイルの変更）

<script>
jQuery('#all-wrapper').css({
  'background-color':'#FFFFFF'
});
jQuery('#page-body').css({
  'width':'480px'
});
jQuery('.viewport-content').css({
  'background-color':'#FFFFFF'
});
jQuery('.iframe-content').css({
  'background-color':'#FFFFFF'
});
jQuery('#taskForm').css({
  'background-color':'#FFFFFF'
});
jQuery('.body-only').css({
  'background-color':'#FFFFFF'
});
jQuery('.row').css({
  'background-color':'#FFFFFF'
});
jQuery('.fixed .column-1').css({
  'width':'auto',
  'min-width':'50px',
  'max-width':'900px'
});
jQuery('.fixed .column-1 label.item-label, .fixed .column-1 .help, .fixed .column-1 .error, .fixed .column-1 .item .fit').css({
  'width':'auto',
  'min-width':'50px',
  'max-width':'900px'
});
jQuery('.item-label').css({
  'font-weight':'normal',
  'border-left':'1em solid #ffa500',
  'margin':'0 0 0.5em 0',
  'padding':'0 0 0 2px'
});
jQuery('.fit').css({
  'font-size':'16px',
  'border':'2px solid #B9C9CE',
  'border-radius':'5px',
  'padding':'10px 2px',
  'width':'auto'
});

(function($) {
  $(document).ready(function(){
    $('head').append('<meta content="width=device-width,initial-scale=1" name=viewport>');
  });
})(window.jQuery);
</script>

▼『明細連絡先アドレス』の［入力ヒント］の設定サンプル（スタイルの変更）

<script>
jQuery('input[name="data\\[2\\].input"]').css({
  'width':'400px'
});
</script>

▼『備考』の［入力ヒント］の設定サンプル（スタイルの変更）

<script>
jQuery('textarea[name="data\\[7\\].input"]').css({
  'width':'400px'
});
</script>

▼『クレジットカード番号（VISA/MASTER/AMEX）』の［入力ヒント］の設定サンプル（属性の追加）

<script>
jQuery('input[name="data\\[4\\].input"]').attr({
  'maxlength':'16',
  'placeholder':'e.g. 4242424242424242'
});
</script>

▼『クレジットカードセキュリティコード（CVC）』の［入力ヒント］の設定サンプル（スタイル変更と属性追加）

<script>
jQuery('input[name="data\\[5\\].input"]').css({
  'width':'100px'
});
jQuery('input[name="data\\[5\\].input"]').attr({
  'maxlength':'4',
  'placeholder':'e.g. 123'
});
</script>

＜データ項目一覧画面＞