HTML code of Card Capture Form

The result of requesting the Card Entry Form or the Card Entry Form with CDN will be a similar HTML format:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Card</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
        <link rel="stylesheet" href="/Css/font-awesome-4.4.0/css/font-awesome.min.css">
        <link href="/Css/capture-ltr.css?v=1.00" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" media="all" href="/Css/style-ie8.css"/>
        <![endif]-->


    </head>
    <body>
        <div id="cardContainer" class="card-container" style="visibility: hidden; opacity: 1;">
            <form id="frmCardPayment" action="">
                <input type="hidden" id="cardType" name="cardType" />
                <fieldset>
                    <label class="form-label">
                    Card number:
                </label>
                    <div class="relative cc">
                        <div class="card-type-container"></div>
                        <input type="text" id="cardNumber" name="cardNumber" class="form-input required card-type" placeholder="****-****-****-****" maxlength="24" />
                    </div>
                </fieldset>
                <fieldset>
                    <label class="form-label">
                    Expiration:
                </label>
                    <select id="cardExpirationMonth" name="cardExpirationMonth" class="form-input month required">
                        <option value="">Month</option>
                    </select>
                    <select id="cardExpirationYear" name="cardExpirationYear" class="form-input year required">
                        <option value=""> Year</option>
                    </select>
                </fieldset>
                <fieldset id="cvvContainer">
                    <label class="form-label">
                    CVV
                    
                        <i class="fa fa-question-circle tooltip cardframe-cvv-tooltip" popuptip='The card security code is a unique three or four-digit number printed on your debit/credit card. The security code helps validate that the customer placing the online order actually has the credit card in his/hers possession, and that the credit/debit card account is legitimate.'></i>
                    </label>
                    <input type="text" id="cardCvv" name="cardCvv" class="form-input required" maxlength="4" placeholder='Card security code' />
                </fieldset>
                <fieldset>
                    <label class="form-label">
                    Name On Card:
                    
                        <i class="fa fa-question-circle tooltip cardframe-nameoncard-tooltip" popuptip='The name on card as it appears in your credit card'></i>
                    </label>
                    <input type="text" id="cardNameOnCard" name="cardNameOnCard" class="form-input required" placeholder='Name on card' />
                </fieldset>
                <fieldset id="card-issue-number-container" style="display: none;">
                    <label class="form-label">
                    Issue Number:
                </label>
                    <input type="text" id="cardIssueNumber" name="cardIssueNumber" class="form-input required" />
                </fieldset>
                <fieldset id="card-ownerid-container" style="display: none;">
                    <label class="form-label">
                    Owner ID:
                </label>
                    <input type="text" id="cardOwnerid" name="cardOwnerid" class="form-input required" />
                </fieldset>
                <div id="buttonContainer" class="button">
                    <input type="submit" value="Submit" id="card-enter" class="required" />
                </div>
            </form>
        </div>
        <div id="throbber" class="overlay" style="visibility: hidden; opacity: 1;"></div>
        <div class="throbberBox" style="visibility: hidden; opacity: 1;">
            <div class="loader"></div>
            <h2>Processing</h2>
        </div>
        <script src="/bundles/card-capture?v=ISf7ifjtBlZajClVQE6aUCmnsAlKa3yAtk18pgG2mt41"></script>
        <script>
        var messages = {};
        messages.require = 'This field is required.';
        messages.invalidCC = 'Please enter a valid credit card number.';
        messages.invalidCVV = 'Please enter a valid cvv number.';
        messages.invalidMinExp = 'The credit card must be valid beyond the booking period.';
        messages.nameOnCardMaxLength = 'The maximum name length is 32 characters';
        messages.invalidnameOnCard = 'Enter only letters, numerals and the following signs (\'), (-), (.) , (!), (£), ($), (%), (^), (*), ( )';
        messages.wrongCardTypeVSCardNumber = 'Your card number doesn\'t match the selected card.';
        messages.wrongCardTypeVSCardNumberUnionPay = 'Your card number doesn\'t match the selected card.';
        messages.cardTypeNotSupported = 'Your card is not supported. Please use {cardtypes}.';

        window.monthsVariables = ['January','February','March','April','May','June','July','August','September','October','November','December'];
        var successUrl = cardCapture.getParameterByName('success');
        var failureUrl = cardCapture.getParameterByName('failure');

        var showOwnerId = (cardCapture.getParameterByName('showOwnerId') !== null && cardCapture.getParameterByName('showOwnerId').toLowerCase() === "true");
        var submitWithPostMessage = (cardCapture.getParameterByName('submitWithPostMessage') !== null && cardCapture.getParameterByName('submitWithPostMessage').toLowerCase() === "true");
        cardCapture.init(messages, successUrl, failureUrl, true, showOwnerId, submitWithPostMessage, '2017-12-01', 'https://service.pcibooking.net', ["visa","mastercard","amex","jcb","solo","switch","maestro","electron","delta","dankort","cartebleue","cartasi","dinersclub","discover","unionpay","mc_canada","mc_alaska","bc","eurocard","lazer","elo","hipercard","enroute"]);
    </script>
    </body>
</html>