Vytvoření jednoduchého formuláře pro ověření kreditní karty

V tomto rychlém návodu vám ukážeme, jak vytvořit jednoduchý formulář kreditní karty. Celou věc postavíme od nuly, s malou pomocí Bootstrap 3 pro rozhraní a Payform.js pro ověřování formulářů na straně klienta.

Přehled projektu

Zde je ukázka toho, co budeme v tomto tutoriálu stavět:

Úplný kód pro tento projekt můžete získat z Stáhnout tlačítko v horní části článku. Přehled souborů naleznete níže:

Existují dva soubory .css a dva soubory .js, které budeme muset zahrnout do našeho HTML. Všechny ostatní zdroje, jako je framework Bootstrap, jQuery a webová písma, budou zahrnuty externě prostřednictvím CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Nyní, když je vše nastaveno, můžeme začít s vytvářením formuláře naší kreditní karty. Začněme s rozložením HTML!

Rozvržení

Dialog o kreditní kartě musí být jednoduchý, krátký a přímočarý. Zde jsou čtyři vstupní pole, která musí mít každý formulář kreditní karty:

  • Jméno vlastníka kreditní karty
  • Číslo karty
  • Tajný kód (také známý jako CVV/CVC/CID)
  • Datum vypršení platnosti

Vše, co musíme udělat, je vytvořit <form> a přidejte všechna požadovaná vstupní pole. Pro majitele, číslo karty a CVV použijeme jednoduchá textová pole. Pro datum vypršení platnosti uvedeme kombinaci dvou výběrů s předdefinovanými možnostmi.

Kromě toho bude náš formulář obsahovat nadpis, tlačítko pro odeslání a obrázky pro oblíbené prodejce kreditních karet. Vzhledem k tomu, že pracujeme s Bootstrapem, je zde trochu zvláštního označení, ale pomáhá udržovat kód organizovaný a rozvržení responzivní.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Nyní, když máme potřebná vstupní pole, můžeme nastavit pravidla ověření.

Ověření

Veškeré ověření, které zde ukážeme, je na straně klienta a provádí se výhradně v JavaScriptu. Pokud vás zajímá ověřování HTML, podívejte se na tento článek.

Abychom to mohli začít, definujeme všechny selektory jQuery, které budeme potřebovat:

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Poté pomocí Payform.js přeměníme naše základní vstupní pole na specializovaný vstup pro údaje o kreditních kartách. Stačí zavolat správnou funkci a knihovna se automaticky postará o formátování textu a maximální délku řetězce za nás:

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Dále chceme být schopni poskytovat uživatelům zpětnou vazbu v reálném čase, když zadávají číslo své karty. K tomu napíšeme jednoduchou funkci, která dělá dvě věci:

  1. Zkontrolujte, zda je aktuální text v poli platným číslem karty či nikoli. Přidejte do textového pole vhodné zabarvení.
  2. V závislosti na přítomných vstupních znacích zjistěte, zda jde o kartu Visa, MasterCard nebo American Express. To se provádí pomocí payform.parseCardType() metoda.

Protože chceme provést výše uvedené akce pokaždé, když je zadán nový znak, použijeme jQuery keyup() posluchač události.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Je tu ještě jedna věc, kterou musíme udělat, a to je zkontrolovat, zda všechna pole obsahují platná data, když se uživatel pokouší odeslat formulář.

Ověření jména může být docela složité. Aby byl tento tutoriál lehký, nebudeme se tímto tématem zabývat a pouze zkontrolujeme, zda je vstupní název dlouhý alespoň 5 znaků. Payform nám poskytuje potřebné metody pro ověření zbytku formuláře.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Styly

Používáme Bootstrap, takže většinu stylů provádí framework. Naše CSS většinou pokrývá velikost vstupních polí a různé úpravy odsazení, okrajů a písem.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Tímto je náš formulář pro ověření kreditní karty kompletní!