Workflow Sample: Episode 505: "Settlement by Credit", Even for Private Lessons

"Monthly settlement confirmation, oh, bother..."

Trouble concerning settlement would never end. Even though 'Online banking' has become convenient, still it takes some sort of effort.

Furthermore, work of "dunning" occurs if "unpaid" occurred. This is not just 'laborious'(increase of steps), it will be a burden to mental health for both the debtor and the creditor. Why can't it be "electronic settlement" furthermore?

The following Business Process Definition is a Workflow of credit card settlement on "monthly tuition for piano lesson".

In this example, 'fee according to the number of lessons' (instead of 'fixed monthly tuition') will be charged at the end of months. It is like, for example, 2000JPY for the month in which two lessons have given, 5000 JPY for five lessons. (We use "Stripe" for online settlement.)

When you realize electronic settlement for lesson fees with this Workflow, you will no longer have to hand-deliver the "invoice" to your students. For the parents of the student, they will not need to go to the bank to make a remittance of the lesson fee every month.

By the way, "Questetra BPM Suite", a Cloud-based Workflow, is free of charge for a use by 'less than ten staffs'. However, you should be careful that the service will be stopped if an interval of logins exceeds 15 days. But that won't be a problem, as long as you login after each lesson to write "date of lesson" (information for charging).

[Lesson Fee Credit Charge]

As obvious as you looking at the Business flow Diagram, in this Workflow, an Issue starts flowing at the time when

Credit card information is entered into the "Web form"
Started manually (mainly by reusing data)

And when you "finish" the Step of [1. input Charge Info], charging to credit will be executed.

The Issue will keep staying at the Step of [1. input Charge Info] by clicking on the "Save and Quit" button, if you want to append another appointment of lesson, or messages to the parents on a day other than the end of the month.

By the way, Smartphones are used more often than personal computers for accessing to the Internet, recently. "Mobile compatible" is essential even when embedding a 'Web form' on a Web site of the lesson studio with iframe.

However, the Web form publishing feature of Questetra BPM Suite, which is to Start a Workflow, is difficult to use in the design / style as it is, because "screen width is fixed" or "Form size is in constant width", or "different from the website design".

In such cases, you are able to overwrite the CSS information as you like it (although it requires your CSS designing skills), by writing JavaScript as the following into the setting window of [Description]. (Also, you can use <style> tag.)

[Mobile screen: before]

[Mobile screen: after]

[Mobile Email screen]

[Lesson Fee Credit Charge:"1. input Charge Info" screen]

[Stripe Customer screen]

= Setting sample of [Description] in "Student's Name"

<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>

= Setting sample of [Description] in "Contact Address" (Changing Style)

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

= Setting sample of [Description] in "Remarks" (Changing Style)

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

= Setting sample of [Description] in "Credit card number" (Addition of attribute)

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

= Setting sample of [Description] in "Security code of the Credit card" (Changing Style and Addition of attribute)

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

[Data Items list]