91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
<form class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Payment Method</h3>
|
|
<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Name on Card</label>
|
|
<input type="text" class="form-control" placeholder="John Doe">
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<div class="mb-3">
|
|
<label class="form-label">Card Number</label>
|
|
<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
|
|
<small class="form-hint">Enter your 16-digit number.</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">CVV</label>
|
|
<input type="text" class="form-control" placeholder="123">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Month</label>
|
|
<select class="form-select">
|
|
<option value="">MM</option>
|
|
<option value="1">January</option>
|
|
<option value="2">February</option>
|
|
<option value="3">March</option>
|
|
<option value="4">April</option>
|
|
<option value="5">May</option>
|
|
<option value="6">June</option>
|
|
<option value="7">July</option>
|
|
<option value="8">August</option>
|
|
<option value="9">September</option>
|
|
<option value="10">October</option>
|
|
<option value="11">November</option>
|
|
<option value="12">December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Year</label>
|
|
<select class="form-select">
|
|
<option value="">YYYY</option>
|
|
<option value="2025">2025</option>
|
|
<option value="2026">2026</option>
|
|
<option value="2027">2027</option>
|
|
<option value="2028">2028</option>
|
|
<option value="2029">2029</option>
|
|
<option value="2030">2030</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<h3 class="card-title">Billing Address</h3>
|
|
<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Same as shipping address</span>
|
|
</label>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Comments</label>
|
|
<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="btn-list">
|
|
{% include "ui/button.html" text="Submit" color="primary" %}
|
|
{% include "ui/button.html" text="Cancel" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|