<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 class="c-tabs">
{% for item in items %}
<input class="c-tabs__option" type="radio" name="{{ name }}"
id="tab{{ loop.index }}"{% if loop.index == 1 %} checked="checked"{% endif %}>
{% endfor %}
<nav class="c-tabs__nav">
{% for item in items %}
<label class="c-tabs__label" for="tab{{ loop.index }}">{{ item.label }}</label>
{% endfor %}
</nav>
<figure class="c-tabs__content">
<div class="tab1">PayPal</div>
<div class="tab2">
{% render '@external-paywall-credit' %}</div>
<div class="tab3">Lastschrift</div>
</figure>
</div>
{
"name": "payment-method",
"items": [
{
"id": "paypal",
"label": "PayPal"
},
{
"id": "credit",
"label": "Kreditkarte"
},
{
"id": "debit",
"label": "Lastschrift"
}
]
}
.c-tabs {
&__option,
&__content > div {
display: none;
}
&__content {
border-top: 2px solid $color-yellow;
clear: both;
display: block;
margin-left: 0;
> div {
padding: 2em;
width: 100%;
}
}
&__label {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: $color-grey-light;
float: left;
padding: .5em 1em;
text-align: center;
&:active,
&:focus,
&:hover {
background-color: $color-grey-lightest;
}
@include grid-column(4);
@include grid-col-end();
@include font-bold();
@include breakpoint(large) {
@include grid-column(3);
@include grid-col-end();
}
}
}
#tab1:checked ~ .c-tabs__content .tab1,
#tab2:checked ~ .c-tabs__content .tab2,
#tab3:checked ~ .c-tabs__content .tab3 {
display: block;
}
#tab1:checked ~ .c-tabs__nav .c-tabs__label[for="tab1"],
#tab2:checked ~ .c-tabs__nav .c-tabs__label[for="tab2"],
#tab3:checked ~ .c-tabs__nav .c-tabs__label[for="tab3"] {
background-color: $color-yellow;
color: $color-white;
position: relative;
}
#tab1:checked ~ .c-tabs__nav .c-tabs__label[for="tab1"]::after,
#tab2:checked ~ .c-tabs__nav .c-tabs__label[for="tab2"]::after,
#tab3:checked ~ .c-tabs__nav .c-tabs__label[for="tab3"]::after {
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
There are no notes for this item.