form integration of payment form & js api

src/api/static/js/payment.js

@@ -0,0 +1,150 @@
+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 payment = {}
+payment.setup = function(context,pricing){
+    sessionStorage.store_context = context
+    sessionStorage.pricing = pricing.constructor == String ? pricing: JSON.stringify(pricing)
+    sessionStorage.customer = JSON.stringify({info:{}})
+    
+    $('.payment-amount > input').on('focusin',function(){            
+        $('.payment-amount > .menu').slideDown('fast')
+    })
+    $('.payment-amount > input').on('focusout',function(){
+        $('.payment-amount > .menu').slideUp('slow')
+    })
+    
+    payment.init(0)
+        //  jx.dom.set.focus('amount')
+    var d = new Date()
+    $('.copyright').text(d.getFullYear())
+    if( $('.jxmodal').length == 0){
+        $('.close-dialog').hide()
+    }
+
+}
+payment.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)
+
+}
+payment.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
+        } 
+
+    }
+}
+payment.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:'payment-dialog'}) 
+    })
+}
+payment.proceed = function(){
+    
+    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){
+       //
+       // Nothing to be done here because the user interface would have lit-up
+       //
+       ;    
+    }else{
+        //
+        // Submit the charge to be processed
+        //
+        payment.dialog('Preparing payment','Please wait ...','PROGRESS') 
+        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.customer = JSON.stringify({info:{}})
+
+            }else{
+                TITLE='.::'
+                TYPE='WARN'
+            }
+            $('.jxmodal')[$('.jxmodal')].remove()
+            payment.dialog(TITLE,x.responseText,TYPE)
+            
+        })
+    }
+}