angular-ippopay/index.js

The Ippopay Payments plugin allows you to accept credit card, UPI, Netbanking and debit card payments via Ippopay payment gateway in your Angular JS.

var Ippopay = (function() { 
    return { 
        init: function(){
            let Ippopaycssstyle = 'html,body{height:100%;background:none!important;margin: 0;}.ippopay_wrapper{height:100%;position: fixed;width: 100%;top: 0;display:none;z-index:100000;}iframe{border:0;border-radius:5px;}#IppopayPluginApiiframe{height:100vh;border-radius:5px;margin:0;width:100%!important;}#ippopay_container {margin: 0 auto; height: 100%;text-align: center;-webkit-transition: .3s ease-out opacity;-o-transition: .3s ease-out opacity;transition: .3s ease-out opacity;z-index: 2;}#ippopay_backdrop { position: absolute;top:0px;left: 0;width: 100%;height: 100%;}#ippopay_container.ippopay_drishy {opacity: 1;white-space:nowrap;}#ippopay_modal { opacity: 1;-webkit-transform: none; -ms-transform: none;transform: none;-webkit-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;-o-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform; transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;}#ippopay_modal-inner {-webkit-border-radius: 3px;border-radius: 3px;height: 100%;}.ippopay_close {text-decoration:none!important;position: absolute;right:5px;top:20px;cursor: pointer;background:none!important;border:none!important;color: #fff!important;line-height: 25px;font-size:25px!important;z-index: 1;padding:0;opacity:0.7;-webkit-transform: none;-ms-transform: none;transform: none;-webkit-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;-o-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;}.ippopay_close:hover{opacity:1;}#ippopay_options-wrap { position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);left: 12px;right: 12px;z-index: 100;}#ippopay_container.ippopay_drishy #ippopay_modal {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none;-webkit-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;-o-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;}#ippopay_modal { -webkit-border-radius: 3px;border-radius: 3px; -webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;-webkit-transition: .3s ease-in;-o-transition: .3s ease-in;transition: .3s ease-in;z-index: 1;-webkit-perspective: 300;perspective: 300;position: relative; opacity: 0;-webkit-transform: scale(.9);-ms-transform: scale(.9); transform: scale(.9);color: #333;font-size: 14px;width: 100%;font-family: ubuntu,helvetica,sans-serif;}.ippopay_mchild {vertical-align: middle;display: inline-block; white-space: normal;}.ippopay_lightBackWrap{min-height: 100%; transition: all 0.3s ease-out 0s; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3) none repeat scroll 0% 0%;pointer-events: none;}#ippopay_content{text-align: left;white-space: normal;}.ippopay_drishy:after{height:96%;display:inline-block;width:0;vertical-align:middle;content:""}.ippopay_show{display:block;}.ippopay_remove.ippopay_show{display:none;}.ippopay_wrapper.ippopay_show #ippopay_container.ippopay_container #ippopay_modal {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none;-webkit-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;-o-transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;transition: .2s,.3s cubic-bezier(.3,1.5,.7,1) transform;}.ippopay_wrapper.ippopay_show .ippopay_bgWrapAdd{min-height: 100%; transition: all 0.3s ease-out 0s; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0%;pointer-events: none;}#ippopay_content{text-align: left;white-space: normal;}.ippopay_wrapper.ippopay_show .ippopay_container:after{content:"";height:96%;display:inline-block;width:0;vertical-align:middle}',
            Ippopayhead = document.head || document.getElementsByTagName('head')[0],
            Ippopaystyle = document.createElement('style');
            Ippopaystyle.type = 'text/css';
            if (Ippopaystyle.styleSheet){
                Ippopaystyle.styleSheet.cssText = Ippopaycssstyle;
            } else {
                Ippopaystyle.appendChild(document.createTextNode(Ippopaycssstyle));
            }
            Ippopayhead.appendChild(Ippopaystyle);
            let IppopayviewPortTag=document.createElement('meta');
            IppopayviewPortTag.id="viewport";
            IppopayviewPortTag.name = "viewport";
            IppopayviewPortTag.content = "width=device-width; initial-scale=1.0;";
            document.getElementsByTagName('head')[0].appendChild(IppopayviewPortTag);
            let Ippopaybody = document.getElementsByTagName('body');
            let documentContent = document.createElement("div");
            documentContent.classList.add("ippopay_wrapper");            
            document.body.appendChild(documentContent);
            var loading_bg ='<style type="text/css">html,body{height:100%;background:none!important;margin: 0;}#ippopay_loading{display: table;height:100%;width:100%;}.ippopay_loading_img{width:100%;height:100%;display: table-cell;vertical-align: middle;text-align:center}</style><div id="ippopay_loading"><div class="ippopay_loading_img"><img src="https://ippo-pay.s3.amazonaws.com/assets/ip-loader.svg" width="100"></div></div>';
            documentContent.innerHTML = '<div id="ippopay_bgWrapAdd"></div><div id="ippopay_container"><div id="ippopay_backdrop"></div><div id="ippopay_modal" class="ippopay_mchild"><div id="ippopay_modal-inner"><div id="ippopay_content"><button id="ippopay_close" data-dismiss="modal" class="modalClose ippopay_close closemodalwrap" data-close="" type="button">&#215;</button><iframe src="data:text/html,'+encodeURIComponent(loading_bg)+'"  id="IppopayPluginApiiframe" width="100%"></iframe></div></div></div></div>';
            document.getElementById("ippopay_close").onclick = function() {
                document.getElementById("IppopayPluginApiiframe").setAttribute('src','');   
                document.getElementsByClassName("ippopay_wrapper")[0].style.display = "none";     
                document.getElementById("ippopay_bgWrapAdd").classList.remove("ippopay_lightBackWrap");
                document.getElementById("ippopay_container").classList.remove("ippopay_drishy");
            };
        },
        open: function(ref,key) { 
            document.getElementById("IppopayPluginApiiframe").setAttribute('src','https://pay.ippopay.com/order/'+ref+'?public_key='+key)
            document.getElementsByClassName("ippopay_wrapper")[0].style.display = "block";
            document.getElementById("ippopay_bgWrapAdd").classList.add("ippopay_lightBackWrap");
            document.getElementById("ippopay_container").classList.add("ippopay_drishy");
        },
        close: function() {   
            document.getElementById("IppopayPluginApiiframe").setAttribute('src','');   
            document.getElementsByClassName("ippopay_wrapper")[0].style.display = "none";     
            document.getElementById("ippopay_bgWrapAdd").classList.remove("ippopay_lightBackWrap");
            document.getElementById("ippopay_container").classList.remove("ippopay_drishy");
        }
    } 
})(Ippopay||{});
var eventMethod = window.addEventListener ? "addEventListener": "attachEvent";
var ippopayHandler = window[eventMethod];
var response = eventMethod === "attachEvent" ? "onmessage" : "message";