Paywall (Kreditkarte)

<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>