<form class="o-form">
<div class="o-paywall o-paywall--register">
<div class="o-paywall__header">
<span class="c-badge c-badge--user c-badge--large c-badge--outline">HAZ+</span>
<div class="c-steps">
<div class="c-steps__item is-active"><span class="c-step__number">1</span></div>
<div class="c-steps__item is-current"><span class="c-step__number">2</span></div>
<div class="c-steps__item"><span class="c-step__number">3</span></div>
</div>
</div>
<div class="o-paywall__body">
<div class="grid-x grid-padding-y grid-padding-x">
<div class="cell">
<h3 class="u-inline-block">
Wählen Sie Ihre Zahlungsart aus:
</h3>
</div>
<div class="cell">
<div class="c-tabs">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab1" checked="checked">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab2">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab3">
<nav class="c-tabs__nav">
<label class="c-tabs__label" for="tab1">PayPal</label>
<label class="c-tabs__label" for="tab2">Kreditkarte</label>
<label class="c-tabs__label" for="tab3">Lastschrift</label>
</nav>
<figure class="c-tabs__content">
<div class="tab1">PayPal</div>
<div class="tab2">
<div id="paymentFrameConf" frontend-payment-frame-origin="https://erasmo-sta.niedersachsen.com" payment-frame-url="https://test-heidelpay.hpcgw.net/ngw/paymentFrame/sendData" lang="de"></div>
<form id="paymentFrameForm">
<input type="hidden" id="stateId" name="stateId" value="4c70dc34ffffffff2431ebc6" />
<div id="accountHolderContainer" class="form-row">
<label for="cardName" class="form-label">Karteninhaber</label>
<input tabindex="1" class="form-input fullWidth" id="cardName" name="account.holder" maxlength="50" type="text" value="Alexander Loß" autocomplete="off">
</div>
<div id="accountNumberContainer" class="form-row">
<label for="cardNumber" class="form-label">Kartennr.</label>
<input tabindex="2" class="form-input fullWidth error" id="cardNumber" name="account.number" maxlength="20" type="text" autocomplete="off">
</div>
<div id="accountBrandContainer" class="form-row">
<label for="brand" class="form-label">Kartentyp</label>
<div class="creditCardSymbols">
<img class="creditCardImage" src="https://test-heidelpay.hpcgw.net/ngw/images/AMEX.gif">
<img class="creditCardImage" src="https://test-heidelpay.hpcgw.net/ngw/images/MASTER.gif">
<img class="creditCardImage" src="https://test-heidelpay.hpcgw.net/ngw/images/VISA.gif">
</div>
<div class="fillWidth">
<select tabindex="3" id="brand" name="account.brand" class="form-select fullWidth">
<option value="MASTER" >MasterCard</option>
<option value="VISA" >Visa</option>
</select>
</div>
</div>
<div id="accountVerificationContainer" class="form-row">
<label for="verification" class="form-label">CVV</label>
<div class="verificationInlineHintWrapper">
<input tabindex="6" class="form-input fullWidth" maxlength="4" id="verification" name="account.verification" type="text" autocomplete="off">
<a tabindex="7" id="verificationInlineHint" href="#"><img src="https://test-heidelpay.hpcgw.net/ngw/images/questionMark.png"></a>
</div>
<br />
</div>
<div id="accountExpiryContainer" class="form-row fillWidth">
<label for="expirationMonth" class="form-label">Ablaufdatum</label>
<div class="halfWidth paddingRight5px">
<select tabindex="4" class="form-select fullWidth error" id="expirationMonth" name="account.expiry_month">
<option value="">Monat</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!-- comment white space
-->
<div class="halfWidth">
<select tabindex="5" class="form-select fullWidth" id="expirationYear" name="account.expiry_year">
<option value="">Jahr</option>
</select>
</div>
</div>
<a id="verificationHint" href="#">Wo finde ich die Prüfnummer?</a>
</form>
</div>
<div class="tab3">Lastschrift</div>
</figure>
</div>
</div>
</div>
<div class="o-paywall__footer">
<div class="grid-x grid-padding-x grid-padding-y">
<div class="cell medium-6">
<a class="c-button c-button--ghost" href="#">
Zurück
</a>
</div>
<div class="cell medium-6 medium-text-right">
<a class="c-button" href="#">
Kostenpflichtig bestellen
</a>
</div>
</div>
</div>
</div>
</div>
</form>
<form class="o-form">
<div class="o-paywall o-paywall--register">
<div class="o-paywall__header">
{% render '@badge--user' with { additionalClasses: 'c-badge--large c-badge--outline' } %}
{% render '@steps' with { current: 2 } %}
</div>
<div class="o-paywall__body">
<div class="grid-x grid-padding-y grid-padding-x">
<div class="cell">
{% render '@heading--h3' with { text: 'Wählen Sie Ihre Zahlungsart aus:', classes: "u-inline-block" } %}
</div>
<div class="cell">
{% render '@tabs' %}
</div>
</div>
<div class="o-paywall__footer">
<div class="grid-x grid-padding-x grid-padding-y">
<div class="cell medium-6">
{% render '@button--ghost' with { text: 'Zurück' } %}
</div>
<div class="cell medium-6 medium-text-right">
{% render '@button' with { text: 'Kostenpflichtig bestellen' } %}
</div>
</div>
</div>
</div>
</div>
</form>
/* No context defined for this component. */
There are no notes for this item.