Klarna Checkout payment page

{Helper(
	file: 'checkout/header',
	or: '<h1>Header not found. Add header to "/checkout/header.html"</h1>'
)}
<div id="MultiPageCheckout" class="clearfix BlockForm">

	<div id="KlarnaCheckoutWrapper">

		<fieldset id="KlarnaCheckoutShippingInformation">
			{KlarnaCheckoutShippingInformation(
				before: '
					<h2><span class="KlarnaStages">1. </span>{%CheckoutChooseShippingMethod}</h2>
					<p>{%KlarnaCheckoutShippingHelp}</p>'
			)}
		</fieldset>

		<h2><span class="KlarnaStages">2. </span>{%CheckoutPreviewOrder}</h2>
		<div id="PreviewContent">
			{Helper(file:'helpers/klarna-preview')}
		</div>
		<div id="SubmitCampaignCode" data-helper="klarna-preview" data-view="checkout">
			{CampaignCode(
				mode: 'auto',
				action: 'checkout',
				notifications: 'true',
				ajax: 'true'
			)}
		</div>
		<p id="CommentFieldReveal"><a href="#comment">{%KlarnaCheckoutAddComments}</a></p>
		<div class="FormItem" id="SubmitOrderComment">
			<label for="OrderComments">{%AddComment}</label>
			<textarea name="details" id="OrderComments" rows="5" cols="72">{CartComment}</textarea>
		</div>

		<h2><span class="KlarnaStages">3. </span>{%KlarnaCheckoutFinishAndPay}</h2>

		{CheckoutPaymentMethods(
			exclude: 'current',
			before: '
				<ul id="KlarnaOtherPaymentMethods" class="clearfix">
					<li class="Current"><a href="#KlarnaCheckoutTab">{CartPaymentMethod}</a></li>
					<li><a href="#SelectOtherPaymentMethodTab">{%KlarnaCheckoutChooseOtherPaymentMethod}</a></li>
				</ul>

				<div id="SelectOtherPaymentMethodTab" class="PaymentTab">

					<form action="/checkout/" method="post">

						<fieldset id="CheckoutPaymentMethods">
							<p>{%KlarnaCheckoutOtherPaymentMethodIntro}</p>
			',
			after: '
						</fieldset>
						<div class="FormItem FormSubmit">
							<button type="submit" class="SubmitButton">{%KlarnaCheckoutChangePaymentMethod}</button>
						</div>

					</form>

				</div>
				<div id="KlarnaCheckoutTab" class="PaymentTab">
					<p>{CheckoutPaymentMethodDescription}</p>
					{KlarnaCheckout}
				</div>
			',
			or: '
				<p>{CheckoutPaymentMethodDescription}</p>
				{KlarnaCheckout}
			'
		)}

	</div>

</div>
<script type="text/javascript">
	// Making the Klarna Checkout more plug and play.
	// Adding of essential scripts and dictionary variables.

	(function() {
		function contentLoaded(win, fn) {
			/*!
			 * contentloaded.js
			 *
			 * Author: Diego Perini (diego.perini at gmail.com)
			 * Summary: cross-browser wrapper for DOMContentLoaded
			 * Updated: 20101020
			 * License: MIT
			 * Version: 1.2
			 *
			 * URL:
			 * http://javascript.nwbox.com/ContentLoaded/
			 * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE
			 *
			 */

			// @win window reference
			// @fn function reference

			var done = false, top = true,

			doc = win.document,
			root = doc.documentElement,
			modern = doc.addEventListener,

			add = modern ? 'addEventListener' : 'attachEvent',
			rem = modern ? 'removeEventListener' : 'detachEvent',
			pre = modern ? '' : 'on',

			init = function(e) {
				if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
				(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
				if (!done && (done = true)) fn.call(win, e.type || e);
			},

			poll = function() {
				try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
				init('poll');
			};

			if (doc.readyState == 'complete') fn.call(win, 'lazy');
			else {
				if (!modern && root.doScroll) {
					try { top = !win.frameElement; } catch(e) { }
					if (top) poll();
				}
				doc[add](pre + 'DOMContentLoaded', init, false);
				doc[add](pre + 'readystatechange', init, false);
				win[add](pre + 'load', init, false);
			}
		}

		var MIN_JQUERY_VERSION = 1.7;

		function loadScript(scriptSrc, callback) {
			var script = document.createElement('script');
			script.src = scriptSrc;
			script.async = false;

			script.onload = script.onreadystatechange = function() {
				if (typeof jQuery === 'undefined') {
					// Polling for IE7.
					var timer = null;
					var timeout = setTimeout(function () {
						clearInterval(timer);
					}, 10000);
					timer = setInterval(function () {
						if (typeof jQuery === 'function') {
							clearTimeout(timeout);
							clearInterval(timer);
							callback && callback();
						}
					}, 250);
				} else {
					callback && callback();
				}
			};

			document.getElementsByTagName('head')[0].appendChild(script);
		};

		// Loads jQuery on demand.
		function loadJqueryDeps() {
			var mcf = window.mcf || {};
			mcf.Lang = mcf.Lang || {};
			mcf.Lang.CommentSaved = '{\%CheckoutSuccessCommentSaved}';

			var jqueryDefined = (typeof jQuery !== 'undefined');
			if (!jqueryDefined || parseFloat(jQuery.fn.jquery) < MIN_JQUERY_VERSION) {
				// Load jQuery first, then load Klarna.
				loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', loadKlarnaDeps);
			} else {
				// Load Klarna.
				loadKlarnaDeps();
			}
		}

		// Loads Klarna plugin on demand.
		function loadKlarnaDeps() {
			if (typeof mcf.initKlarnaCheckout !== 'function') {
				loadScript('{ThemeUrl}/js/mcf.klarnacheckout.js', function() {
					mcf.initKlarnaCheckout();
				});
			} else {
				mcf.initKlarnaCheckout();
			}
		}

		contentLoaded(window, loadJqueryDeps);
	})();
</script>
{Helper(
	file:'checkout/footer',
	or: '<h1>Footer not found. Add footer to "/checkout/footer.html"</h1>'
)}