Page Comparison

Требования:

...

6. Ссылки на внешние ресурсы( Optional ) На рассмотрении

По желанию заказчика использованиев внешних ресурсов, например, блок с

...

Пример исходного кода эквайринговой формы:

Code Block

language	html

<html lang="en">

<head>

<meta


    <head>
        <meta charset="utf-8">

<meta


        <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Payment


        <title>Payment Page</title>

<link


        <link type="text/css" rel="stylesheet"

 href="../resources/css/bootstrap.min.css" />

<link


        <link type="text/css" rel="stylesheet" href="../resources/css/bootstrapresponsive.min.css" />

<link


        <link type="text/css" rel="stylesheet" href="../resources/css/base.css"

/>


    </head>

<body>


    <body>

<!-- header -->

<div



        <div class="container"

><div

 >
            <div class="row">

<div


                <div class="span3 offset2">

<h1>Payment Form</h1>

</div>

<div


                    <h1>Payment Form</h1>
                </div>
                <div class="span5">

<div


                    <div class="language">

<ul


                        <ul class="inline">

<li><img


                            <li><img id="en" lang="en_EN"

 src="../resources/img/en.png" title="English" /></li>

<li><img


                            <li><img id="de" lang="de_DE"

 src="../resources/img/de.png" title="Deutsch" /></li>

<li><img


                            <li><img id="fr" lang="fr_FR"

 src="../resources/img/fr.png" title="Francais" /></li>

<li><img


                            <li><img id="it" lang="it_IT"

 src="../resources/img/it.png" title="Italiana" /></li>

</ul>

</div>

<div


                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">

<div


                <div class="span8 offset2">

<hr>

</div>


                    <hr>
                </div>
            </div>
        </div>

<!-- form -->

<div



        <div class="container">

<div


            <div class="row"><div class="span8 offset2"

><div

>
                <div class="alert alerterror msg-error">Declined by processing<

/div></div></div><form action=""

/div>
            </div>
        </div>
        <form action="" method="post" name="process" id="process">

<div


            <div class="row">

<div


                <div class="span8 offset2">

<div


                    <div class="form-inline product"

>

</div>

<div

></div>
                </div>
            </div>
            <div class="row">

<div


                <div class="span8 offset2">

<legend>Enter your personal details</legend>

<div


                    <legend>Enter your personal details</legend>
                    <div class="row">

<div


                        <div class="span4">

<div


                            <div class="form-horizontal form">

<label


                                <label class="control-label"

 for="first_name">First name</label>

<div class="controls"><input type="text"


                                <div class="controls"><input type="text" name="first_name" value="John" /></div>

</div>

<label


                            </div>
                        </div>
                        <div class="span4">
                            <div class="form-horizontal form">
                                <label class="control-label" for="last_name">Last

 name</label>

<div class="


                                <div class="controls"><input type="text"

 name="last_name" value="Joe" /></div>

</div>

<div


                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span8">
                            <div class="form-horizontal form">

<label class="control-label"


                                <label class="control-label" for="address">Address</label>

<div


                                <div class="controls" style="padding-right:

24px;"

><input

>
                                    <input type="text" name="address" value="Str. Prermohi 12"

 style="width: 100%;"

/></div>

</div>

<div

 />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <div class="form-horizontal form">

<label class="


                                <label class="control-label"

 for="city">City</label>

<div


                                <div class="controls"

><input

>
                                    <input type="text"

 name="city" value="Gotham"

/></div>

</div>

<label

 />
                                </div>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="form-horizontal form">
                                <label class="control-label" for="zip">ZIP/Postal

code</label>

<div class="controls"><input type="text"

 code</label>
                                <div class="controls"><input type="text" name="zip" value="24958" /></div>

</div>

<div


                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <div class="form-horizontal form">

<label class="control


                                <label class="control-label"

 for="country">Country</label>

<div


                                <div class="controls"

><select

>
                                    <select name="country">

<option


                                        <option value="">Select please</option>

<option


                                        <option value="UA" selected="selected">Ukraine</option>

<option value="GB">United Kingdom</option>

<option value="US">United States of America</option>

</select></div>

</div>

<label class="control-label"

for="state">State</label>

<option value="">Select please</option>

<option value="NA" selected="selected">Non US/Canada/Australia</option>

<option value="WA">Washington</option>

</optgroup>

<option value="BC">British Columbia</option>

</optgroup>

<option value="VIC">Victoria</option>

</optgroup>

</select></div>

</div>

for="phone">Phone</label>

<label class="control-label"

<div class="controls"><input type="text"

name="phone" value="+380654124958" /></div>

</div>

<label class="control-label" for="email">Email</label>

<div class="controls"><input type="text"

name="email" value="john_doe@mm.tt" /></div>

</div>

<legend>Enter your card information</legend>

<label class="control-label"

for="card_num">Card number</label>

<div class="controls"><input type="text"

name="card_num" value="" id="card_num" /></div>

</div>

<label class="control-label"

for="card_exp_month">Expiration date</label>

<select name="card_exp_month"

id="card_exp_month" style="width: auto;">

<option value="" selected="selected">Select</option>

</select>

<select name="card_exp_year"

id="card_exp_year" style="width: auto;">

<option value="" selected="selected">Select</option>

</select>

</div>

<label class="control-label"

for="email">CVC2/CVV2</label>

relative;">

<div class="controls" style="position:

<img class="info" id="info"

src="../resources/img/info.png" />

<input type="password" name="cvv2"

value="" maxlength="4" autocomplete="off" style="width: 30px;" />

</div>

<button id="sbmt" type="submit" class="btn btn-large btnprimary">PROCESS TRANSACTION</button>

</div>

</form> </div>

<h4>How to find the CVV / CVC on your credit card</h4>

</div>

<p>The CVV / CVC is used to help validate that a genuine card is

being used during a transaction. The credit card company uses those codes to

verify that the person making this purchase actually has the credit card in

their possession. It is required for online transactions starting on January

1st, 2003.</p>

<p>With a Visa or Master Card the CVV/CVC is a three-digit

security code printed on the back side of the card.</p>

<p style="text-align: center;"><img

src="../resources/img/card.jpg" /></p>

</div>

src="../resources/js/jquery.cookie.js"></script>

src="../resources/js/bootstrap.min.js"></script>

$(document).ready(function() {

$('#en, #fr, #de, #ru, #ja, #nl, #it, #pt, #es, #da,

#tr').click(function() {

$.cookie('lang', $(this).attr('lang'), { path: '/' });

location.reload();

});

$('#info').click(function() {

$('#info-modal').modal('show');

});

$('#info-modal').find('.close').click(function() {

$('#info-modal').modal('hide');

});

$.validator.addMethod('phone', function(phone_number, element) {

phone_number = phone_number.replace(/\s+/g, '');

return this.optional(element) || phone_number.length > 9 &&

phone_number.match(/^\+?[0-9 ()-]{7,}$/);

}, "Please specify a valid phone number");

$().ready(function() {

$("#process").validate({

submitHandler: function(form) {

$("#sbmt").attr('disabled', 'disabled');

form.submit();

},

success: function(label) {

label.addClass("valid").append("<span></span>");

},

groups: {

username: "card_exp_month card_exp_year"

},

errorPlacement: function(error, element) {

if (element.attr("name") == "card_exp_month" ||

element.attr("name") == "card_exp_year")

error.insertAfter("#card_exp_year");

else

error.insertAfter(element);

},

rules: {

first_name: {

required: true,

minlength: 2

},

last_name: {

required: true,

minlength: 2

},

address: {

required: true,

minlength: 5

},

city: {

required: true,

minlength: 2

},

state: {

required: true

},

zip: {

required: true,

minlength: 2

},

country: {

required: true

},

phone: {

required: true,

phone: true

},

email: {

required: true,

email: true

},

card_num: {

required: true,

creditcard: true,

},

card_exp_month: {

required: true,

digits: true

},

card_exp_year: {

required: true,

digits: true

},

cvv2: {

required: true,

minlength: 3,

digits: true

}

},

characters"

messages: {

first_name: {

required: "Please enter valid first name",

minlength: "Your first name must consist of at least 2

characters"

},

last_name: {

required: "Please enter valid last name",

minlength: "Your last name must consist of at least 2

characters"

},

address: {

required: "Please enter your address",

minlength: "Your address must consist of at least 5

characters"

},

city: {

required: "Please enter your city",

minlength: "Your city must consist of at least 2

},

state: {

required: "Please select your state"

characters"

},

zip: {

required: "Please enter your zip/post-code",

minlength: "Your zip/post-code must consist of at least 2

},

country: {

required: "Please select your country"

},

phone: {

required: "Please enter your phone"

},

email: {

required: "Please enter your email address"

},

card_num: {

required: "Please enter your credit cadr number"

},

card_exp_month: {

required: "Please enter correct expiration date"

},

card_exp_year: {

required: "Please enter correct expiration date"

characters",

},

cvv2: {

required: "Please enter a valid card security code",

minlength: "Security code must consist of at least 3

number: "Please enter a valid number"

});

}

});

</script>

</body>


                                        <option value="GB">United Kingdom</option>
                                        <option value="US">United States of America</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="form-horizontal form">
                                <label class="control-label" for="state">State</label>
                                <div class="controls">
                                    <select name="state">
                                        <option value="">Select please</option>
                                        <option value="NA" selected="selected">Non US/Canada/Australia</option>
                                        <optgroup label="US States">
                                            <option value="WA">Washington</option>
                                        </optgroup>
                                        <optgroup label="Canadian Provinces">
                                            <option value="BC">British Columbia</option>
                                        </optgroup>
                                        <optgroup label="Australian Territories">
                                            <option value="VIC">Victoria</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span4">
                            <div class="form-horizontal form">
                                <label class="control-label" for="phone">Phone</label>
                                <div class="controls">
                                    <input type="text" name="phone" value="+380654124958" />
                                </div>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="form-horizontal form">
                                <label class="control-label" for="email">Email</label>
                                <div class="controls">
                                    <input type="text" name="email" value="john_doe@mm.tt" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="span8 offset2">
                    <legend>Enter your card information</legend>
                    <div class="row">
                        <div class="span4">
                            <div class="form-horizontal form">
                                <div class="control-group">
                                    <label class="control-label" for="card_num">Card number</label>
                                    <div class="controls"><input type="text" name="card_num" value="" id="card_num" /></div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="card_exp_month">Expiration date</label>
                                    <div class="controls">
                                        <select name="card_exp_month" id="card_exp_month" style="width: auto;">
                                            <option value="" selected="selected">Select</option>
                                            <option value="01">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                        <select name="card_exp_year" id="card_exp_year" style="width: auto;">
                                            <option value="" selected="selected">Select</option>
                                            <option value="2018">2018</option>
                                            <option value="2019">2019</option>
                                            <option value="2020">2020</option>
                                            <option value="2021">2021</option>
                                            <option value="2022">2022</option>
                                            <option value="2023">2023</option>
                                            <option value="2024">2024</option>
                                            <option value="2025">2025</option>
                                            <option value="2026">2026</option>
                                            <option value="2027">2027</option>
                                            <option value="2028">2028</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="email">CVC2/CVV2</label>
                                    <div class="controls" style="position:relative;">
                                        <img class="info" id="info" src="../resources/img/info.png" />
                                        <input type="password" name="cvv2" value="" maxlength="4" autocomplete="off" style="width: 30px;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="span8 offset2">
                    <div class="form-actions submit">
                        <button id="sbmt" type="submit" class="btn btn-large btnprimary">PROCESS TRANSACTION</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

<!-- modal -->

    <div id="info-modal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close">?</button>
            <h4>How to find the CVV / CVC on your credit card</h4>
        </div>
        <div class="modal-body">
            <p>The CVV / CVC is used to help validate that a genuine card is
                being used during a transaction. The credit card company uses those codes to
                verify that the person making this purchase actually has the credit card in
                their possession. It is required for online transactions starting on January
                1st, 2003.
            </p>
            <p>With a Visa or Master Card the CVV/CVC is a three-digit
                security code printed on the back side of the card.
            </p>
            <p style="text-align: center;">
                <img src="../resources/img/card.jpg" />
            </p>
        </div>
    </div>

<!-- footer -->

    <div class="clear"></div>
    <div class="container"></div>
    <script type="text/javascript" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" src="../resources/js/validator.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../resources/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#en, #fr, #de, #ru, #ja, #nl, #it, #pt, #es, #da, #tr').click(function() {
                $.cookie('lang', $(this).attr('lang'), { path: '/' });
                location.reload();
            });
            $('#info').click(function() {
                $('#info-modal').modal('show');
            });
            $('#info-modal').find('.close').click(function() {
                $('#info-modal').modal('hide');
            });
            $.validator.addMethod('phone', function(phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, '');
                return this.optional(element) || phone_number.length > 9 && phone_number.match(/^\+?[0-9 ()-]{7,}$/);
            }, "Please specify a valid phone number");
            $().ready(function() {
                $("#process").validate({
                    submitHandler: function(form) {
                        $("#sbmt").attr('disabled', 'disabled');
                        form.submit();
                    },
                    success: function(label) {
                        label.addClass("valid").append("<span></span>");
                    },
                    groups: {
                        username: "card_exp_month card_exp_year"
                    },
                    errorPlacement: function(error, element) {
                        if (element.attr("name") == "card_exp_month" ||
                        element.attr("name") == "card_exp_year")
                        error.insertAfter("#card_exp_year");
                        else
                        error.insertAfter(element);
                    },
                    rules: {
                        first_name: {
                            required: true,
                            minlength: 2
                        },
                        last_name: {
                            required: true,
                            minlength: 2
                        },
                        address: {
                            required: true,
                            minlength: 5
                        },
                        city: {
                            required: true,
                            minlength: 2
                        },
                        state: {
                            required: true
                        },
                        zip: {
                            required: true,
                            minlength: 2
                        },
                        country: {
                            required: true
                        },
                        phone: {
                            required: true,
                            phone: true
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        card_num: {
                            required: true,
                            creditcard: true,
                        },
                        card_exp_month: {
                            required: true,
                            digits: true
                        },
                        card_exp_year: {
                            required: true,
                            digits: true
                        },
                        cvv2: {
                            required: true,
                            minlength: 3,
                            digits: true
                        }
                    },
                    messages: {
                        first_name: {
                            required: "Please enter valid first name",
                            minlength: "Your first name must consist of at least 2 characters"
                        },
                        last_name: {
                            required: "Please enter valid last name",
                            minlength: "Your last name must consist of at least 2 characters"
                        },
                        address: {
                            required: "Please enter your address",
                            minlength: "Your address must consist of at least 5 characters"
                        },
                        city: {
                            required: "Please enter your city",
                            minlength: "Your city must consist of at least 2 characters"
                        },
                        state: {
                            required: "Please select your state"
                        },
                        zip: {
                            required: "Please enter your zip/post-code",
                            minlength: "Your zip/post-code must consist of at least 2 characters"
                        },
                        country: {
                            required: "Please select your country"
                        },
                        phone: {
                            required: "Please enter your phone"
                        },
                        email: {
                            required: "Please enter your email address"
                        },
                        card_num: {
                            required: "Please enter your credit cadr number"
                        },
                        card_exp_month: {
                            required: "Please enter correct expiration date"
                        },
                        card_exp_year: {
                            required: "Please enter correct expiration date"
                        },
                        cvv2: {
                            required: "Please enter a valid card security code",
                            minlength: "Security code must consist of at least 3 characters",
                            number: "Please enter a valid number"
                        }
                    }
                });
            });
        });
        </script>
    </body>
</html>

Пример исходного кода рекаринговой формы

...

Versions Compared

Old Version 3

New Version 4

Key

Пример исходного кода рекаринговой формы