<div id="xpresso_funnel">
<div class="xpresso-modal-box">
<div class="xpresso-paywall">
<div class="loading-spinner" id="xpresso-paywall-loading-spinner" style=";display:none">
<svg width="140px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><rect ng-attr-x="" ng-attr-y="" ng-attr-width="" ng-attr-height="" ng-attr-fill="" x="20" y="30" width="10" height="40" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="18;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="64;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="" ng-attr-y="" ng-attr-width="" ng-attr-height="" ng-attr-fill="" x="45" y="29.842" width="10" height="40.3159" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="20.999999999999996;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="58.00000000000001;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="" ng-attr-y="" ng-attr-width="" ng-attr-height="" ng-attr-fill="" x="70" y="29.4896" width="10" height="41.0208" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="24;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="52;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate></rect></svg>
</div>
<div class="xpresso-paywall-page-checkout-head">
<div class="premium-icon">HAZ+</div>
<div class="progress">
<span class="progress-step active">1</span>
<span class="progress-step active">2</span>
<span class="progress-step">3</span>
</div>
</div>
<div class="xpresso-paywall-inner xpresso-paywall-page-checkout">
<div class="checkout-header">
<div class="checkout-header-heading">
<h2>Bitte wählen Sie eine Zahlungsart:</h2>
</div>
</div>
<div class="checkout-content tabbed">
<nav>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'PP'});">Paypal</a>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'KK'});" class="active">Kreditkarte</a>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'BE'});">Lastschrift</a>
</nav>
<figure>
<div id="xpresso-paywall-checkout-kk">
</div>
</figure>
</div>
<div class="checkout-footer">
<div class="checkout-buttons" style="display: flex; margin-bottom: 20px;">
<div style="align-content: start; width:50%">
<a href="javascript:xpresso.funnel.action('exit_funnel', {'data-xpr-bineos':'touchpoint:checkout-abort;productAlias:'});" class="button-secondary" style="display: inline-flex">Abbrechen</a>
</div>
<div style="align-content: end; width:50%; text-align: right">
<a href="javascript:xpresso.funnel.action('unzer.pay.cc', {'payment_type': 'KK', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Kostenpflichtig bestellen</a>
</div>
</div>
<div class="checkout-productinfo">
Sie zahlen für Ihr zweimonatiges HAZ+ Abonnement einmalig 0,99 €. Im Anschluss lesen Sie HAZ+ zum derzeit gültigen Monatspreis von 9,90 € weiter. HAZ+ ist jederzeit mit einer Frist von einem Monat kündbar. Das ePaper ist nicht Teil des Angebots von HAZ+.
</div>
</div>
</div>
</div>
</div>
</div>
<div id="xpresso_funnel"><div class="xpresso-modal-box">
<div class="xpresso-paywall">
<div class="loading-spinner" id="xpresso-paywall-loading-spinner" style=";display:none">
<svg width="140px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><rect ng-attr-x="{{config.x1}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c1}}" x="20" y="30" width="10" height="40" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="18;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="64;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="{{config.x2}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c2}}" x="45" y="29.842" width="10" height="40.3159" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="20.999999999999996;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="58.00000000000001;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="{{config.x3}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c3}}" x="70" y="29.4896" width="10" height="41.0208" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="24;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="52;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate></rect></svg>
</div>
<div class="xpresso-paywall-page-checkout-head">
<div class="premium-icon">HAZ+</div>
<div class="progress">
<span class="progress-step active">1</span>
<span class="progress-step active">2</span>
<span class="progress-step">3</span>
</div>
</div>
<div class="xpresso-paywall-inner xpresso-paywall-page-checkout">
<div class="checkout-header">
<div class="checkout-header-heading">
<h2>Bitte wählen Sie eine Zahlungsart:</h2>
</div>
</div>
<div class="checkout-content tabbed">
<nav>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'PP'});">Paypal</a>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'KK'});" class="active">Kreditkarte</a>
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': 'BE'});">Lastschrift</a>
</nav>
<figure>
<div id="xpresso-paywall-checkout-kk">
</div>
</figure>
</div>
<div class="checkout-footer">
<div class="checkout-buttons" style="display: flex; margin-bottom: 20px;">
<div style="align-content: start; width:50%">
<a href="javascript:xpresso.funnel.action('exit_funnel', {'data-xpr-bineos':'touchpoint:checkout-abort;productAlias:'});" class="button-secondary" style="display: inline-flex">Abbrechen</a>
</div>
<div style="align-content: end; width:50%; text-align: right">
<a href="javascript:xpresso.funnel.action('unzer.pay.cc', {'payment_type': 'KK', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Kostenpflichtig bestellen</a>
</div>
</div>
<div class="checkout-productinfo">
Sie zahlen für Ihr zweimonatiges HAZ+ Abonnement einmalig 0,99 €. Im Anschluss lesen Sie HAZ+ zum derzeit gültigen Monatspreis von 9,90 € weiter. HAZ+ ist jederzeit mit einer Frist von einem Monat kündbar.
Das ePaper ist nicht Teil des Angebots von HAZ+.
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
<div class="xpresso-modal-box">
<div class="xpresso-paywall">
<div class="loading-spinner" id="xpresso-paywall-loading-spinner" style="display: none;">
<svg width="140px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><rect ng-attr-x="{{config.x1}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c1}}" x="20" y="30" width="10" height="40" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="18;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="64;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.26s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="{{config.x2}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c2}}" x="45" y="29.842" width="10" height="40.3159" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="20.999999999999996;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="58.00000000000001;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.13s" repeatCount="indefinite"></animate></rect><rect ng-attr-x="{{config.x3}}" ng-attr-y="{{config.y}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" ng-attr-fill="{{config.c3}}" x="70" y="29.4896" width="10" height="41.0208" fill="#85a2b6"><animate attributeName="y" calcMode="spline" values="24;30;30" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate><animate attributeName="height" calcMode="spline" values="52;40;40" keyTimes="0;0.5;1" dur="1.3" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" repeatCount="indefinite"></animate></rect></svg>
</div>
<div class="xpresso-paywall-page-checkout-head">
<div class="premium-icon">HAZ+</div>
<div class="progress">
<span class="progress-step active">1</span>
<span class="progress-step active">2</span>
<span class="progress-step">3</span>
</div>
</div>
<div class="xpresso-paywall-inner xpresso-paywall-page-checkout">
<div class="checkout-header">
<div class="checkout-header-heading">
<h2>Bitte wählen Sie eine Zahlart:</h2>
</div>
</div>
<div class="checkout-content tabbed">
<nav>
${#data.checkout.payment.pp}$
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': '${type}$'});" ${#selected}$class="active"${/selected}$>Paypal</a>
${/data.checkout.payment.pp}$
${#data.checkout.payment.kk}$
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': '${type}$'});" ${#selected}$class="active"${/selected}$>Kreditkarte</a>
${/data.checkout.payment.kk}$
${#data.checkout.payment.be}$
<a href="javascript:xpresso.funnel.action('select_payment_method', {'payment_method': '${type}$'});" ${#selected}$class="active"${/selected}$>Lastschrift</a>
${/data.checkout.payment.be}$
</nav>
<figure>
${#data.checkout.payment.pp}$
${#selected}$
<div id="xpresso-paywall-checkout-pp">
${^completed}$
${#messages.checkout.has.errors}$
<div style="display:none;height:0;width:0;" data-xpr-bineos="touchpoint:checkout-paypal-fail;productAlias:${data.checkout.offer.texts.offer_key}$"></div>
${/messages.checkout.has.errors}$
<div class="info">
<span>Um mit PayPal zu zahlen, klicken Sie bitte auf den Button "Direkt zu PayPal".</span>
</div>
<a href="javascript:xpresso.funnel.action('pay_external', {'href': '${start_url}$'});"><img src="https://sso-test.stimme.de/services/assets/sales_funnel/pp_logo/checkout-logo-large-alt-de.png" style="border:0;" alt="Direkt zu PayPal" title="Direkt zu PayPal"></a>
${/completed}$
${#completed}$
<div class="success" data-xpr-bineos="touchpoint:checkout-paypal-success;productAlias:${data.checkout.offer.texts.offer_key}$">
<span>Ihre PayPal-Zahlung wurde erfolgreich autorisiert, Sie können die Bestellung nun abschließen.</span>
</div>
${/completed}$
</div>
${/selected}$
${/data.checkout.payment.pp}$
${#data.checkout.payment.kk}$
${#selected}$
<div id="xpresso-paywall-checkout-kk">
${^completed}$
${#messages.checkout.has.errors}$
<div style="display:none;height:0;width:0;" data-xpr-bineos="touchpoint:checkout-credit-fail;productAlias:${data.checkout.offer.texts.offer_key}$"></div>
${/messages.checkout.has.errors}$
${#messages.checkout.hint.payment_common}$
<div class="error">
<span>${message}$</span>
</div>
${/messages.checkout.hint.payment_common}$
${#start_url}$
<iframe src="${start_url}$" style="width:100%;min-height:300px;border:0;" data-xpr-unzerccframe="data-xpr-unzerccframe"></iframe>
${/start_url}$
${/completed}$
${#completed}$
<div class="success" data-xpr-bineos="touchpoint:checkout-credit-success;productAlias:${data.checkout.offer.texts.offer_key}$">
<span>Ihre Kreditkarten-Zahlung wurde erfolgreich autorisiert, Sie können die Bestellung nun abschließen.</span>
</div>
${/completed}$
</div>
${/selected}$
${/data.checkout.payment.kk}$
${#data.checkout.payment.be}$
${#selected}$
<div id="xpresso-paywall-checkout-be" class="tabbed-content">
<form class="form-sepa" id="xprfun_pay_form">
${#messages.checkout.has.errors}$
<div style="display:none;height:0;width:0;" data-xpr-bineos="touchpoint:checkout-sepa-fail;productAlias:${data.checkout.offer.texts.offer_key}$"></div>
${/messages.checkout.has.errors}$
${#transaction_status.initialized}$
<label for="xpresso-paywall-iban">IBAN</label>
<input type="text" id="xpresso-paywall-iban" name="payment[debit][iban]" value="${transaction_data.debit.iban}$" class="full-size">
${#messages.checkout.hint.payment_debit_iban}$
<div class="error-inline">${message}$</div>
${/messages.checkout.hint.payment_debit_iban}$
${/transaction_status.initialized}$
${#transaction_status.registered}$
<div class="form-flex-layout">
<div class="form-flex-item personaldata">
<label for="xpresso-paywall-salutation">Anrede</label>
<select id="xpresso-paywall-salutation">
<option value=""></option>
<option value="HR" ${#transaction_data.debit.owner.if-salutation-equals-HR}$selected${/transaction_data.debit.owner.if-salutation-equals-HR}$>Herr</option>
<option value="FR" ${#transaction_data.debit.owner.if-salutation-equals-FR}$selected${/transaction_data.debit.owner.if-salutation-equals-FR}$>Frau</option>
</select>
</div>
<div class="form-flex-item personaldata">
<label for="xpresso-paywall-firstname">Vorname</label>
<input type="text" id="xpresso-paywall-firstname" name="payment[debit][owner][firstname]" value="${transaction_data.debit.owner.firstname}$">
</div>
<div class="form-flex-item personaldata">
<label for="xpresso-paywall-lastname">Nachname</label>
<input type="text" id="xpresso-paywall-lastname" name="payment[debit][owner][name]" value="${transaction_data.debit.owner.name}$">
</div>
</div>
<div class="form-flex-layout addressdata">
<div class="form-flex-item">
<label for="xpresso-paywall-street">Straße</label>
<input type="text" id="xpresso-paywall-street" name="payment[debit][owner][street]" value="${transaction_data.debit.owner.street}$">
</div>
<div class="form-flex-item input-small">
<label for="xpresso-paywall-housenumber">Nr.</label>
<input type="text" id="xpresso-paywall-housenumber" name="payment[debit][owner][house_number]" value="${transaction_data.debit.owner.house_number}$">
</div>
<div class="form-flex-item input-small">
<label for="xpresso-paywall-zipcode">PLZ</label>
<input type="text" id="xpresso-paywall-zipcode" name="payment[debit][owner][zip_code]" value="${transaction_data.debit.owner.zip_code}$">
</div>
<div class="form-flex-item">
<label for="xpresso-paywall-city" name="payment[debit][owner][city]" value="${transaction_data.debit.owner.city}$">Ort</label>
<input type="text" id="xpresso-paywall-city">
</div>
</div>
<input type="hidden" name="payment[debit][iban]" value="${transaction_data.debit.iban}$">
<input type="hidden" name="payment[debit][bic]" value="${transaction_data.debit.bic}$">
${/transaction_status.registered}$
</form>
</div>
${/selected}$
${/data.checkout.payment.be}$
</figure>
</div>
<div class="checkout-footer">
<div class="checkout-buttons" style="display: flex; margin-bottom: 20px;">
<div style="align-content: start; width:50%">
<a href="javascript:xpresso.funnel.action('exit_funnel', {'data-xpr-bineos':'touchpoint:checkout-abort;productAlias:${data.checkout.offer.texts.offer_key}$'});" class="button-secondary" style="display: inline-flex">Abbrechen</a>
</div>
<div style="align-content: end; width:50%; text-align: right">
${#data.checkout.payment.pp.selected}$
${#data.checkout.payment.pp.completed}$
<a href="javascript:xpresso.funnel.action('resume_payment', {'payment_type': '${data.checkout.payment_selected.type}$', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Kostenpflichtig bestellen</a>
${/data.checkout.payment.pp.completed}$
${/data.checkout.payment.pp.selected}$
${#data.checkout.payment.kk.selected}$
${^data.checkout.payment.kk.completed}$
<a href="javascript:xpresso.funnel.action('unzer.pay.cc', {'payment_type': '${data.checkout.payment_selected.type}$', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Weiter</a>
${/data.checkout.payment.kk.completed}$
${#data.checkout.payment.kk.completed}$
<a href="javascript:xpresso.funnel.action('resume_payment', {'payment_type': '${data.checkout.payment_selected.type}$', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Kostenpflichtig bestellen</a>
${/data.checkout.payment.kk.completed}$
${/data.checkout.payment.kk.selected}$
${#data.checkout.payment.be.selected}$
${#data.checkout.payment.be.requires_further_action}$
<a href="javascript:xpresso.funnel.action('resume_payment', {'payment_type': '${data.checkout.payment_selected.type}$'});" class="button-primary" style="display: inline-flex">Weiter</a>
${/data.checkout.payment.be.requires_further_action}$
${^data.checkout.payment.be.requires_further_action}$
<a href="javascript:xpresso.funnel.action('resume_payment', {'payment_type': '${data.checkout.payment_selected.type}$', 'book_subscription': true});" class="button-primary" style="display: inline-flex">Kostenpflichtig bestellen</a>
${/data.checkout.payment.be.requires_further_action}$
${/data.checkout.payment.be.selected}$
</div>
</div>
<div class="checkout-productinfo">
${data.checkout.offer.texts.product_info}$
</div>
</div>
</div>
</div>
</div>
${> funnelCss}$
There are no notes for this item.