The page displayed after the customer has placed an order that is to be paid for via Klarna Checkout.

Description

The Klarna Checkout templates cannot be used with the new Klarna Checkout v3.

However, you can customize the colors used in the new checkout.

Klarna Checkout was updated to the new v3 version in all MyCashflow online stores on 15 December 2020.

Learn more about the new version of Klarna Checkout.

In the template, the customer can still change the payment method after the order has been placed. The available options are: Klarna Account, credit card and online bank transfer.

The order summary is printed by using the {KlarnaCheckout} tag.

From this page, the customer is redirected to the separate Klarna order confirmation page. To make it possible, the page must contain a link with the {TransactionHash} tag.

This template replaces the standard checkout's order confirmation page if the order has been placed by using the Klarna Checkout.

See also the instructions for the Klarna Checkout payment page.

Template properties

Template location
themes/shop/THEME/checkout/klarna-confirmed.html
Template URL
/checkout/thanks/klarna/
Scope
tilaus

Default theme implementation

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

	<div id="KlarnaThanksHeader" class="clearfix">
		<h1>{%Hi}{OrderFirstName(before:'&nbsp;')},</h1>

		<p class="Big">{%KlarnaCheckoutThanks} <a id="KlarnaCheckoutThanksLink" href="/checkout/thanks/{TransactionHash}"><strong>{%KlarnaCheckoutGoToSummary}</strong></a>.</p>

		{CheckoutRegistrationForm(
			before: '
				<p class="Big">
					{%CheckoutThanksRegistration} {%CheckoutThanksRegistrationSubscriptions}
				</p>
				<p class="Big">
					<a class="Button" title="{%CheckoutCreateAccount}" id="DisplayCheckoutForm" href="#CheckoutThanksRegistrationForm">{%CheckoutCreateAccount}</a>
				</p>
				<form action="/account/register/" method="post" id="CheckoutThanksRegistrationForm" class="BlockForm">
					<p>{%CheckoutCreateAccountInfo}</p>
			',
			after: '<div class="FormItem FormSubmit">
						<button type="submit" class="SubmitButton">{%CheckoutCreateAccount}</button>
					</div>
				</form>'
		)}

		<div id="MarketingPermissions">{MarketingPermissions}</div>

	</div>

	<div id="KlarnaCheckoutWrapper">
		{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>'
)}