fix final issues with integration

This commit is contained in:
Andrew Camilleri 2018-12-20 14:33:31 +01:00
parent 3e2ff55954
commit 30a3a84ec9
3 changed files with 60 additions and 34 deletions

View file

@ -298,11 +298,20 @@
:to-currency-due="srvModel.btcDue" :to-currency-due="srvModel.btcDue"
:autoload="selectedThirdPartyProcessor === 'coinswitch'" :autoload="selectedThirdPartyProcessor === 'coinswitch'"
:to-currency-address="srvModel.btcAddress"> :to-currency-address="srvModel.btcAddress">
<iframe v-if="mode === 'inline'" :url="url" v-show="url"></iframe> <div>
<a v-else-if="mode === 'popup'" <a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url && !opened">
v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url">
{{$t("Pay with CoinSwitch")}} {{$t("Pay with CoinSwitch")}}
</a> </a>
<iframe
v-if="showInlineIFrame"
v-on:load="onLoadIframe"
style="height: 100%; position: fixed; top: 0; width: 100%; left: 0;"
sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
:src="url"></iframe>
</div>
</coinswitch> </coinswitch>
} }

View file

@ -4,7 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>CoinSwitch</title> <title>CoinSwitch</title>
<script> <script>
debugger;
var script = document.createElement('script'), var script = document.createElement('script'),
head = document.head || document.getElementsByTagName('head')[0]; head = document.head || document.getElementsByTagName('head')[0];
script.src = window.location.protocol + '//files.coinswitch.co/public/js/cs_switch.js'; script.src = window.location.protocol + '//files.coinswitch.co/public/js/cs_switch.js';
@ -27,12 +26,14 @@
var toCurrencyDue = qs["toCurrencyDue"]; var toCurrencyDue = qs["toCurrencyDue"];
var toCurrencyAddress = qs["toCurrencyAddress"]; var toCurrencyAddress = qs["toCurrencyAddress"];
var toCurrency = qs["toCurrency"]; var toCurrency = qs["toCurrency"];
var mode = qs["mode"];
document.body.classList.add(mode);
var payment = new Coinswitch(merchantId); var payment = new Coinswitch(merchantId);
var config = { var config = {
to_currency: toCurrency, to_currency: toCurrency.toLowerCase(),
to_currency_address: toCurrencyAddress, to_currency_address: toCurrencyAddress,
to_amount: toCurrencyDue to_amount: parseFloat(toCurrencyDue)
}; };
waitForCoinSwitch(); waitForCoinSwitch();
@ -47,39 +48,27 @@
}); });
payment.on("Exchange:Closed", function () { payment.on("Exchange:Closed", function () {
window.close(); window.close();
window.postMessage("popup-closed", "*");
}) })
} }
}); });
</script> </script>
<style> <style>
#CoinSwitchPayment .cs-pay { body.popup #CoinSwitchPayment .cs-pay {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#CoinSwitchPayment .cs-pay__main { body.popup #CoinSwitchPayment .cs-pay__main {
width: 100%; width: 100%;
height: 100%; min-height: 90vh;
padding-bottom: 20px; padding-bottom: 20px;
} }
#CoinSwitchPayment .cs-pay__dismiss-row { body.popup #CoinSwitchPayment .cs-pay__dismiss-row {
display: none; display: none;
} }
#CoinSwitchPayment .cs-pay__footer {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 20px;
z-index: 10001;
}
#CoinSwitchPayment .cs-pay__powered-text {
color: black;
}
</style> </style>
</head> </head>
<body> <body>

View file

@ -2,8 +2,14 @@
{ {
props: ["toCurrency", "toCurrencyDue", "toCurrencyAddress", "merchantId", "autoload", "mode"], props: ["toCurrency", "toCurrencyDue", "toCurrencyAddress", "merchantId", "autoload", "mode"],
data: function () { data: function () {
return {
opened: false
};
}, },
computed: { computed: {
showInlineIFrame: function(){
return this.url && this.opened;
},
url: function () { url: function () {
return window.location.origin + "/checkout/coinswitch.html?" + return window.location.origin + "/checkout/coinswitch.html?" +
"&toCurrency=" + "&toCurrency=" +
@ -12,6 +18,8 @@
this.toCurrencyAddress + this.toCurrencyAddress +
"&toCurrencyDue=" + "&toCurrencyDue=" +
this.toCurrencyDue + this.toCurrencyDue +
"&mode=" +
this.mode +
(this.merchantId ? "&merchant_id=" + this.merchantId : ""); (this.merchantId ? "&merchant_id=" + this.merchantId : "");
} }
}, },
@ -21,17 +29,37 @@
e.preventDefault(); e.preventDefault();
} }
var coinSwitchWindow = window.open( if(this.mode === 'inline'){
this.url, this.opened = true;
'CoinSwitch',
'width=600,height=470,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0'); }else if(this.mode ==="popup"){
coinSwitchWindow.opener = null; var coinSwitchWindow = window.open(
coinSwitchWindow.focus(); this.url,
'CoinSwitch',
'width=360,height=650,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=0,left=0,top=0');
coinSwitchWindow.opener = null;
coinSwitchWindow.focus();
}
},
closeDialog(){
if(this.mode === 'inline'){
this.opened = false;
}
},
onLoadIframe(event){
$("#prettydropdown-DefaultLang").hide();
var c = this.closeDialog.bind(this);
event.currentTarget.contentWindow.addEventListener("message", function(evt){
if(evt && evt.data == "popup-closed"){
c();
$("#prettydropdown-DefaultLang").show();
}
});
} }
}, },
mounted: function () { mounted: function () {
if(this.autoload && this.mode === 'popup'){ if(this.autoload){
this.openDialog(); this.openDialog();
} }
} }