credit-card.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <div class="card">
  2. <div class="card-body">
  3. <div class="mb-3">
  4. <div class="form-label">Card number</div>
  5. {% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
  6. </div>
  7. <div class="mb-3">
  8. <div class="form-label">Card name</div>
  9. <input type="text" class="form-control">
  10. </div>
  11. <div class="row">
  12. <div class="col-8">
  13. <div class="mb-3">
  14. <label class="form-label">Expiration date</label>
  15. <div class="row g-2">
  16. <div class="col">
  17. <select class="form-select">
  18. {% for month in (1..12) %}
  19. <option value="{{ month }}">{{ month }}</option>
  20. {% endfor %}
  21. </select>
  22. </div>
  23. <div class="col">
  24. <select class="form-select">
  25. {% for year in (2020..2030) %}
  26. <option value="{{ year }}">{{ year }}</option>
  27. {% endfor %}
  28. </select>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="col">
  34. <div class="mb-3">
  35. <div class="form-label">CVV</div>
  36. <input type="number" class="form-control">
  37. </div>
  38. </div>
  39. </div>
  40. <div class="mt-2">
  41. {% include ui/button.html text="Pay now" color="primary" block=true %}
  42. </div>
  43. </div>
  44. </div>