react-ippopay
Version:
IppoPay Payments - Credit, Debit, UPI, Netbanking Payments
82 lines • 7.3 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".ippopay_wrapper{height:100%;position: fixed;width: 100%;top: 0;display:none;z-index:100000;left:0;}#ippopayPluginApiiframe{height:100vh;border-radius:5px;margin:0;width:100%!important;border:0;border-radius:5px;}#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}";
styleInject(css);
var _this = this;
var ippopayOpen,ippopayClose,reference_token,merchant_key;
_this.ippopayCloseFn = function () {
document.getElementById('ippopay_wrapper').classList.add('ippopay_remove');
window.postMessage({"status":"closed","data": "Payment Popup Closed"}, "*");
}
var Ippopay = function Ippopay(props) {
if(document.getElementById('ippopay_wrapper') !== null && document.getElementById('ippopay_wrapper') !== undefined){
document.getElementById('ippopay_wrapper').classList.remove('ippopay_remove');
}
ippopayOpen = props.ippopayOpen;
ippopayClose = props.ippopayClose;
reference_token = props.reference_token;
merchant_key = props.merchant_key;
var classes = {
ippopay_wrapper: ippopayOpen ? 'ippopay_wrapper ippopay_show':'ippopay_wrapper'
};
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>';
if(ippopayOpen === true){
setTimeout(() => {
document.getElementById("ippopayPluginApiiframe").setAttribute('src','https://pay.ippopay.com/order/'+props.order_id+'?public_key='+props.public_key);
},1500);
}
return(
React.createElement('div', {id:'ippopay_wrapper',className:classes.ippopay_wrapper,key:'0'},
[
React.createElement('div', {id:'ippopay_bgWrapAdd',className:'ippopay_bgWrapAdd',key:'1'}),
React.createElement('div', {id:'ippopay_container',className:'ippopay_container',key:'2'},
[
React.createElement('div', {id:'ippopay_backdrop',key:'3'}),
React.createElement('div', {id:'ippopay_modal',className:'ippopay_mchild',key:'4'},
[
React.createElement('div', {id:'ippopay_modal-inner',key:'5'},
[
React.createElement('div', {id:'ippopay_content',key:'6'},
[
ippopayClose ? React.createElement('button', {className:'modalClose ippopay_close closemodalwrap',key:'7',onClick: () => {_this.ippopayCloseFn()} },'×') : null,
React.createElement('iframe', {src:'data:text/html,' + encodeURIComponent(loading_bg),id:'ippopayPluginApiiframe',key:'8'})
]
)
]
)
]
)
]
)
]
)
)
};
Ippopay.propTypes = {
ippopayOpen: PropTypes.bool
};
module.exports = {Ippopay};