Bootstrap 5 payment gateway template snippets

Loading…

Bootstrap 5 payment gateway template snippets | GoSnippets

Source Code

1<div class="container mt-5 d-flex justify-content-center">
2    <div class="card p-4">
3        <div class="d-flex justify-content-between align-items-center">
4            <h5 class="total-amount">Total amount</h5>
5            <div class="amount-container"><span class="amount-text"><span class="dollar-sign">$</span>375</span></div>
6        </div>
7        <div class="pt-4"> <label class="d-flex justify-content-between"> <span class="label-text label-text-cc-number">CARD NUMBER</span><img src="https://img.icons8.com/dusk/64/000000/visa.png" width="30" class="visa-icon" /></label> <input type="tel" name="credit-number" class="form-control credit-card-number" maxlength="19" placeholder="Card number"> </div>
8        <div class="d-flex justify-content-between pt-4">
9            <div> <label><span class="label-text">EXPIRY</span> </label> <input type="date" name="expiry-date" class="form-control expiry-class" placeholder="MM / YY"> </div>
10            <div> <label><span class="label-text">CVV</span></label> <input type="tel" name="cvv-number" class="form-control cvv-class" maxlength="4" pattern="\d*"> </div>
11        </div>
12        <div class="d-flex justify-content-between pt-5 align-items-center"> <button type="button" class="btn cancel-btn">Cancel</button> <button type="button" class="btn payment-btn">Make Payment</button> </div>
13    </div>
14</div>

Bootstrap 5 payment gateway template snippets

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery