form integration of payment form & js api

src/api/static/css/default.css

@@ -140,7 +140,7 @@ body{
 .border-left{ border-left:1px solid #CAD5E0}
 .border-top{ border-top:1px solid #CAD5E0}
 .left { float:left}
-.small { font-family:verdana; font-size:11px; font-weight:lighter; color:#000000;}
+.small { font-family:sans-serif; font-size:11px; font-weight:lighter; color:#000000;}
 .hidden {display:none}
 .width-50{width:50%; padding:4px;}
 .width-25{width:25%; padding:4px}

src/api/templates/card.html

@@ -10,6 +10,7 @@
 <script src="{{context}}/static/js/jx/dom.js"></script>
 <script src="{{context}}/static/js/jx/rpc.js"></script>
 <script src="{{context}}/static/js/jx/ext/modal.js"></script>
+<script src="{{context}}/static/js/payment.js"></script>
 <style>
     body {
         font-family:sans-serif;
@@ -120,7 +121,7 @@
     } */
     @media only screen and (max-device-width: 960px){   
         body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}
-        .pane {display:grid; justify-items:center; align-items:center; height:auto;}
+        .payment-pane {display:grid; justify-items:center; align-items:center; height:auto;}
         
      
         .frame {
@@ -159,7 +160,7 @@
 
     @media only screen and (min-device-width: 1024px){      
         body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}
-        .pane {display:grid; justify-items:center; align-items:center; height:96%;}
+        .payment-pane {display:grid; justify-items:center; align-items:center; height:96%;}
         .frame {
             width:800px;
             display:grid;
@@ -194,152 +195,19 @@
 
 </style>
 <script >
-    sessionStorage.store_context = "{{context|safe}}"
+    $(document).ready(function(){
-    sessionStorage.pricing = JSON.stringify({{pricing|tojson}})
+        payment.dialog('','Loading ...','PROGRESS')
-    sessionStorage.customer = JSON.stringify({info:{}})
+        payment.setup("{{context|safe}}",{{pricing|tojson}})
-    var cards = {
-        "^3[47]\\d{1,2}(| |-)\\d{6}\\1\\d{6}$":"amex","^5[1-5]\\d{2}(| |-)(?:\\d{4}\\1){2}\\d{4}$":"mastercard",
-        "^4\\d{3}(| |-)(?:\\d{4}\\1){2}\\d{4}$":"visa","^6(?:011|5\\d\\d)(| |-)(?:\\d{4}\\1){2}\\d{4}$":"discover"}
-
-    var checkout = {}
-    checkout.init = function(index){
-        var p = JSON.parse(sessionStorage.pricing)
-        var _item = p[index]
-        var amount = (_item.unit_amount/100).toFixed(2)
-        $('.amount').val( amount)
-        //$('.amount-value').text(amount)
-        $('.currency').text(_item.currency.toUpperCase())
-        $('.amount').change()
-        sessionStorage.product = JSON.parse(sessionStorage.customer)
-
-    }
-    checkout.validate = function(e){
-        var id = e.target
-        customer = JSON.parse(sessionStorage.customer)
-        
-        $(id).removeClass('error')
-        var pattern = $(id).attr('data-pattern')
-        var field = $(id).attr('class')
-        var value = $(id).val().trim()
-        
-        $(id).val(value)
-        if (customer.info[field] != null){
-            delete customer.info[field]
-        }
-        if (pattern == 'card'){
-            var r = jx.utils.patterns.visitor(jx.utils.keys(cards),function(key){
-                
-                if(value.match(key)){
-                    return cards[key]
-                }
-            })
-            if(r.length > 0){
-                //
-                // @TODO: Generalize this to a function call (poor programming)
-                customer.info[field] = value
-                sessionStorage.customer = JSON.stringify(customer)
-                var link = ([sessionStorage.store_context,'/static/img/cards/',r[0]+'.svg']).join('')
-                jx.dom.set.attribute('pay-icon','src',link)
-                return 1
-            }else{
-
-                jx.dom.set.attribute('pay-icon','src','')
-                $(id).addClass('error')
-                return 0
-            }
-            
-        }else{
-            if(value.match(pattern)){
-                customer.info[field] = value
-                sessionStorage.customer = JSON.stringify(customer)
-                return 1
-            }else{
-                $(id).addClass('error')
-                return 0
-            } 
-    
-        }
-    }
-    checkout.dialog = function(title,message,type){
-        ICONS = {'WARN':'fas fa-exclamation-triangle','CHECK':'fas fa-check fa-3x','PROGRESS':'fas fa-cog fa-spin'}
-        var uri = ([sessionStorage.store_context,'/ui/dialog']).join('')
-        var info = {title:title,message:message,icon:ICONS[type],type:type}
-        var httpclient = HttpClient.instance()
-        httpclient.setData( JSON.stringify(info)) 
-        httpclient.setHeader('content-type','application/json') 
-        httpclient.post(uri,function(x){
-            jx.modal.show({html:x.responseText,id:'dialog'}) 
-        })
-    }
-    checkout.proceed = function(){
-        checkout.dialog('Preparing payment','Please wait ...','PROGRESS') 
-        jx.utils.patterns.visitor($('input'),function(_input){
-            //
-            // re-running validation
-                if ($(_input).attr('class') != 'amount'){
-                    $(_input).keyup()
-                }else {
-                    $(_input).change()
-                }
-            })
-
-        var N = $('input').length
-        info = JSON.parse(sessionStorage.customer).info
-        var n = jx.utils.keys(info).length
-        if (n != N){
-            //
-            // We can not submit this (trash)
-            /*jx.utils.patterns.visitor(['fa fa-cog fa-3x fa-spin gray','fa fa-cog fa-5x fa-spin steel-blue','fa fa-cog fa-2x fa-spin gray'],function(name){
-                var i = jx.dom.get.instance('I')
-                i.className = name
-                $('.dialog > .icon').append(i)
-            })
-            */
 
         setTimeout(function(){
             jx.modal.close()
-            },2000)
+        },1700)
-            /*$('.card').slideUp( function(){
-                $('.dialog-frame').show()
-                var icon = jx.dom.get.instance('I')
-                icon.className = 'fas fa-exclamation-triangle'
-                $('.dialog > .icon').append(icon)
-                $('.dialog > .message').text('Invalid entries founds')
-                console.log(info) 
-
-            })*/
-        }else{
-            //
-            // Submit the charge to be processed
-            //
-            info.amount = info.amount * 100
-            $('.dialog > .message').text('Processing card, please wait ...')
-            var uri = ([sessionStorage.store_context,'/{{product.name|safe}}/pay']).join('/')
-            var http = HttpClient.instance()
-            http.setData(JSON.stringify(info))
-            http.setHeader('content-type','application/json')
-            http.post(uri,function(x){
-                
-                if(x.status == 200){
-                    TYPE='CHECK'    
-                    TITLE = ''
-                    jx.utils.patterns.visitor($('input'),function(_input){
-                        $(_input).val('')
-                        $(_input).attr('disabled',true)
 
     })
+    /*sessionStorage.store_context = "{{context|safe}}"
+    sessionStorage.pricing = JSON.stringify({{pricing|tojson}})
     sessionStorage.customer = JSON.stringify({info:{}})
     
-                }else{
-                    TITLE='.::'
-                    TYPE='WARN'
-                }
-                jx.modal.close()
-                checkout.dialog(TITLE,x.responseText,TYPE)
-                
-            })
-        }
-    }
      $(document).ready(function(){
         $('.payment-amount > input').on('focusin',function(){            
             $('.payment-amount > .menu').slideDown('fast')
@@ -347,8 +215,8 @@
         $('.payment-amount > input').on('focusout',function(){
             $('.payment-amount > .menu').slideUp('slow')
         })
-        checkout.dialog('','Loading ...','PROGRESS')
+        payment.dialog('','Loading ...','PROGRESS')
-        checkout.init(0)
+        payment.init(0)
         //  jx.dom.set.focus('amount')
         var d = new Date()
         $('#copyright').text(d.getFullYear())
@@ -356,12 +224,17 @@
         setTimeout(function(){
             jx.modal.close()
         },1700) 
-    })
+    })*/
 </script>
-<div class="pane">
+<div class="payment-pane">
     
     <div class="frame">
-        <div class="caption title" align="center">{{product.name}}</div>
+        <div class="caption title" align="center" style="display:grid; gap:2px; grid-template-columns: auto 32px; align-items:center; justify-items:center">
+            
+            <div>{{product.name}}</div>
+
+            <div class="active close-dialog" onclick="jx.modal.close()"><i class="fa fa-times"></i></div>
+        </div>
         <div class="product-info" >
             
             
@@ -377,14 +250,14 @@
         <div class="card" style="vertical-align:middle;">
             
             <div style="margin-top:2px">
-                <input type="text" placeholder="Email@domain.com" class="email" data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="checkout.validate(event)"/>
+                <input type="text" placeholder="Email@domain.com" class="email" data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="payment.validate(event)"/>
             </div>
             <div style="display:grid; grid-template-columns:50% 50%; gap:2px; margin-top:2px;">
                 <div>
-                    <input type="text" placeholder="First Name" class="fname" data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="checkout.validate(event)"/>
+                    <input type="text" placeholder="First Name" class="fname" data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="payment.validate(event)"/>
                 </div>
                 <div>
-                    <input type="text" placeholder="Last Name" class="lname"  data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="checkout.validate(event)"/>
+                    <input type="text" placeholder="Last Name" class="lname"  data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="payment.validate(event)"/>
                 </div>
             </div>
             <div class="card-info" style="margin-top:2px">
@@ -393,11 +266,11 @@
                    
                     <div class="" style="display:grid; grid-template-columns:50% auto; gap:2px">
                         <div class="payment-amount">
-                            <input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="checkout.validate(event)" style="text-align:right"/>
+                            <input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="payment.validate(event)" style="text-align:right"/>
                             <div class="border menu" style="margin:4px">
                                 <div style="margin:4px;">Choose an amount</div>
                                 {%for item in pricing %}
-                                    <div class="item active" style="font-weight:lighter" onclick="checkout.init({{loop.index -1 }})">
+                                    <div class="item active" style="font-weight:lighter" onclick="payment.init({{loop.index -1 }})">
                                         
                                         {{item.unit_amount/100}} <span style="text-transform: uppercase">{{item.currency}}</span>
                                     
@@ -413,27 +286,27 @@
                 
                 <div class="number" style="margin-top:2px; margin-bottom:2px; display:grid; gap:2px; grid-template-columns:64px auto;">
                     <div class="" style="background:#f3f3f3; display:grid; align-items:center; justify-items:center"><img id="pay-icon" src="" style="width:32px; vertical-align:middle"/></div>
-                    <input type="text" placeholder="Card Number" class="number" data-pattern="card" onkeyup="checkout.validate(event)"/>
+                    <input type="text" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)"/>
                 </div>
                 
                 <div class="expire" style="display:grid; grid-template-columns:50% auto; gap:2px;">
-                    <input type="text" placeholder="MM/YYYY" class="exp" data-pattern="^(0[1-9]|1[0-2])/202[0-9]$" onkeyup="checkout.validate(event)"/>
+                    <input type="text" placeholder="MM/YYYY" class="exp" data-pattern="^(0[1-9]|1[0-2])/202[0-9]$" onkeyup="payment.validate(event)"/>
-                    <input type="text" placeholder="CVC" class="cvc" data-pattern="[0-9]{3,}" onkeyup="checkout.validate(event)"/>
+                    <input type="text" placeholder="CVC" class="cvc" data-pattern="[0-9]{3,}" onkeyup="payment.validate(event)"/>
                 </div>
             </div>
             <div class="location">
                 <div class="state">
-                    <_input type="text" placeholder="State" data-pattern="[A-Z]+" value="USA" onkeyup="checkout.validate(event)"/>
+                    <_input type="text" placeholder="State" data-pattern="[A-Z]+" value="USA" onkeyup="payment.validate(event)"/>
                 </div>
                 <div class="zip">
-                    <_input type="text" placeholder="Zip Code" data-pattern="[0-9]{5,}" onkeyup="checkout.validate(event)"/>
+                    <_input type="text" placeholder="Zip Code" data-pattern="[0-9]{5,}" onkeyup="payment.validate(event)"/>
                 </div>
             </div>
             
 
             <div class="pay-frame">
                 <div class="active " align="center" style=" background-color:#f3f3f3; color:#4682b4; display:grid; ;align-items:center; height:48px; padding:4px;"
-                    onclick="checkout.proceed()"
+                    onclick="payment.proceed()"
                 >
                 
                     <div style="font-size:18px">
@@ -449,7 +322,7 @@
         <div class="small border-top" align="center" style="margin-top:32px; grid-column: 1 / span 2; font-weight:lighter; font-family:sans-serif">
             <p>The Phi Technology
     
-                - {{product.name}} &copy; <span id="copyright"></span>
+                - {{product.name}} &copy; <span class="copyright"></span>
             </p>
         </div>
    </div>

src/api/templates/dialog.html

@@ -15,8 +15,8 @@
 <script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
 <script type="text/javascript" src="{{ context }}/static/js/jx/ext/modal.js"></script>
 <style>
-   
+    .caption { font-size:22px; font-weight:bold; text-transform: capitalize;}
-    .dialog {
+    .dialog-frame .dialog {
         display:grid;
         padding:4px;
         display:grid;
@@ -31,19 +31,19 @@
         align-items: center;
         padding:4px;
     }
-    .dialog { margin-top:4px;}
+    .dialog-frame .dialog { margin-top:4px;}
-    .dialog .icon { font-size:42px;justify-items:center; display:grid; align-items:center}
+    .dialog-frame .dialog .icon { font-size:42px;justify-items:center; display:grid; align-items:center}
-    .dialog .message {
+    .dialog-frame .dialog .message {
         display:grid;
         align-items:center;
         padding:8px;
         font-weight:normal ;
         color:#4682B4 ;
     }
-    .fa-exclamation-triangle{color:#ff6500  ;}        
+    .dialog-frame .fa-exclamation-triangle{color:#ff6500  ;}        
-    .fa-cog {color:gray}
+    .dialog-frame .fa-cog {color:gray}
-    .gray {color:#d3d3d3}
+    .dialog-frame .gray {color:#d3d3d3}
-    .steel-blue{color:#4682B4;}
+    .dialog-frame .steel-blue{color:#4682B4;}
        
 </style>