Unzer/views/smarty/wave/order_iframe.tpl

191 lines
7.8 KiB
Smarty
Raw Normal View History

[{oxscript include=$oViewConf->getModuleUrl('d3unzer', 'out/src/js/jquery.simple.timer/jquery.simple.timer.js')}]
[{assign var="payment" value=$oView->getPayment()}]
[{assign var='oHeidelPaySettings' value=$oHeidelpayViewConfig->getSettings()}]
[{assign var='oHeidelPayment' value=$oHeidelPaySettings->getPayment($payment)}]
[{assign var="cardTypeTimeOut" value=$oHeidelpayViewConfig->getHeidelpayConfVar('cardtypetimeout')}]
[{if false == $cardTypeTimeOut}]
[{assign var="cardTypeTimeOut" value="600"}]
[{/if}]
<form id="paymentFrameForm">
<div class="d3timeOut">
[{oxmultilang ident="D3UNZER_TIMEOUT_TIMER"}]
<div class='timer' data-seconds-left="[{$cardTypeTimeOut}]"></div>
</div>
[{if $isThreeDSecure}]
[{assign var='o3DSecure' value=$oHeidelpayViewConfig->get3dSecureResponse()}]
[{assign var="iframeUrl" value=$o3DSecure->sRedirectURL}]
[{foreach from=$o3DSecure->aRedirectRarams key='key' item='value'}]
<input type="hidden" name="[{$key}]" value="[{$value}]">
[{/foreach}]
[{else}]
[{assign var="iframeUrl" value=$oHeidelpayViewConfig->getHeidelpayNgwIFrameUrl($oHeidelPayment)}]
[{/if}]
[{*<input type="hidden" name="PROCESSING.RECOVERABLE" value="TRUE"/>*}]
[{if $iframeUrl}]
<iframe id="paymentFrameIframe" src="[{$iframeUrl}]" frameborder="0" scrolling="no">
Your Browser doesn\'t support iFrames
</iframe>
[{/if}]
[{if $payment->oxpayments__oxlongdesc->value}]
<div class="alert alert-info">
[{$payment->oxpayments__oxlongdesc->getRawValue()}]
</div>
[{/if}]
<div class="card bg-light cart-buttons">
<div class="card-body">
<div class="row">
<div class="col-12 col-md-6">
<a href="[{oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=order"}]" class="btn btn-outline-dark float-left prevStep submitButton largeButton" id="userBackStepBottom"><i class="fa fa-caret-left"></i> [{oxmultilang ident="D3UNZER_ORDER_PAGE_BACKSTEPT"}]</a>
</div>
[{if $iframeUrl}]
<div class="col-12 col-md-6 text-right">
<button id="paymentNextStepBottom" class="btn btn-primary pull-right submitButton largeButton nextStep" name="userform" type="submit">[{oxmultilang ident="D3UNZER_ORDER_PAGE_NEXTSTEP"}] <i class="fa fa-caret-right"></i></button>
</div>
[{/if}]
</div>
</div>
</div>
</form>
[{if $iframeUrl}]
[{capture name="emptyCapture"}]
<script type="text/javascript">
[{capture name="d3JavaScript"}]
var targetOrigin = getDomainFromUrl('[{$iframeUrl}]');
// ### Sending postMessages ###
var paymentFrameForm = document.getElementById('paymentFrameForm');
var paymentFrameIframe = document.getElementById('paymentFrameIframe');
// Add an event listener that will execute the sendMessage() function
// when the send button is clicked.
if (paymentFrameForm.addEventListener) { // W3C DOM
paymentFrameForm.addEventListener('submit', sendMessage);
} else if (paymentFrameForm.attachEvent) { // IE DOM
paymentFrameForm.attachEvent('onsubmit', sendMessage);
}
// A function to handle sending messages.
function sendMessage(e) {
[{if $isHeidelpayDebugMode}]
console.log("sendMessage");
[{/if}]
// Prevent any default browser behaviour.
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// save the form data in an object
var data = {};
for (var i = 0, len = paymentFrameForm.length; i < len; ++i) {
var input = paymentFrameForm[i];
if (input.name) {
data[input.name] = input.value;
}
}
[{if $isHeidelpayDebugMode}]
console.log(targetOrigin);
console.log(data);
[{/if}]
// Send a json message with the form data to the iFrame receiver window.
paymentFrameIframe.contentWindow.postMessage(JSON.stringify(data), targetOrigin);
}
// ### Utils ###
// extract protocol, domain and port from url
function getDomainFromUrl(url) {
var arr = url.split("/");
return arr[0] + "//" + arr[2];
}
// Setup an event listener that calls receiveMessage() when the window
// receives a new MessageEvent.
if (window.addEventListener) { // W3C DOM
window.addEventListener('message', receiveMessage);
} else if (window.attachEvent) { // IE DOM
window.attachEvent('onmessage', receiveMessage);
}
// ### Receiving postMessages ###
function receiveMessage(e) {
[{if $isHeidelpayDebugMode}]
console.log('recieveMessage');
[{/if}]
// Check to make sure that this message came from the correct domain.
if (e.origin !== targetOrigin) {
[{if $isHeidelpayDebugMode}]
console.log('recieveMessage -> out');
[{/if}]
return;
}
$('#d3HeidelpayWait').modal('hide');
$('#paymentNextStepBottom').attr('disabled', false);
// Do something with the data
[{if $isHeidelpayDebugMode}]
console.log(e.data);
[{/if}]
}
$('#paymentFrameForm').submit(function () {
//$('#d3HeidelpayWait').dialog('open');
$('#d3HeidelpayWait').modal({
keyboard: false,
backdrop: 'static'
});
$('#paymentNextStepBottom').attr('disabled', true);
});
$('.timer').startTimer({
onComplete: function (element) {
element.addClass('isComplete');
$('#paymentFrameForm').find('input, button, textarea').attr('disabled', 'disabled');
$('#d3HeidelpayOutOfTime').modal({
keyboard: false,
backdrop: 'static'
});
}
});
[{/capture}]
</script>
[{/capture}]
[{/if}]
[{oxscript add=$smarty.capture.d3JavaScript}]
<div id="d3HeidelpayWait" class="modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="d3HeidelpayWaitTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-info">[{oxmultilang ident="D3UNZER_SENDING_FORMULAR"}]</div>
</div>
</div>
</div>
</div>
<div id="d3HeidelpayOutOfTime" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
[{assign var='cardTypeTimeOut' value=$cardTypeTimeOut|date_format:"%M:%S"}]
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-danger">[{oxmultilang ident="D3UNZER_OUTOFTIME_FORMULAR" args=$cardTypeTimeOut}]</div>
<div class="well well-sm text-center">
<a href="[{oxgetseourl ident=$oViewConf->getOrderLink()}]"
class="btn btn-default prevStep submitButton largeButton">[{oxmultilang ident="D3UNZER_OUTOFTIME_LINK"}]</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>