templates/default/paiement.html.twig line 1

Open in your IDE?
  7. <link href="{{asset('assets/css/bootstrap.min.css')}}" rel="stylesheet">
  9. <style>
  10. @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
  12. * {
  13.     margin: 0;
  14.     padding: 0;
  15.     box-sizing: border-box;
  16.     font-family: 'Montserrat', sans-serif;
  17. }
  19. body {
  20.     display: flex;
  21.     justify-content: center;
  22.     align-items: center;
  23.     min-height: 100vh;
  24.     background-color: #eef2fa;
  26.     padding: 30px 10px;
  27. }
  29. .card {
  30.     max-width: 500px;
  31.     margin: auto;
  32.     color: black;
  33.     border-radius: 20 px;
  34. }
  36. p {
  37.     margin: 0px;
  38. }
  40. .container .h8 {
  41.     font-size: 30px;
  42.     font-weight: 800;
  43.     text-align: center;
  44. }
  46. .btn.btn-primary {
  47.     width: 100%;
  48.     height: 70px;
  49.     display: flex;
  50.     align-items: center;
  51.     justify-content: space-between;
  52.     padding: 0 15px;
  53.     background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
  54.     border: none;
  55.     transition: 0.5s;
  56.     background-size: 200% auto;
  58. }
  61. .btn.btn.btn-primary:hover {
  62.     background-position: right center;
  63.     color: #fff;
  64.     text-decoration: none;
  65. }
  69. .btn.btn-primary:hover .fas.fa-arrow-right {
  70.     transform: translate(15px);
  71.     transition: transform 0.2s ease-in;
  72. }
  74. .form-control {
  75.     color: white;
  76.     background-color: #223C60;
  77.     border: 2px solid transparent;
  78.     height: 60px;
  79.     padding-left: 20px;
  80.     vertical-align: middle;
  81. }
  83. .form-control:focus {
  84.     color: white;
  85.     background-color: #0C4160;
  86.     border: 2px solid #2d4dda;
  87.     box-shadow: none;
  88. }
  90. .text {
  91.     font-size: 14px;
  92.     font-weight: 600;
  93. }
  95. ::placeholder {
  96.     font-size: 14px;
  97.     font-weight: 600;
  98. }
  99. </style>
  101.     <div class="container" style="border: solid 1px;
  102.   border-radius: 10px;
  103.   background:#fff;
  104.   padding: 20px;
  105.   width: 25%;">
  106.         <div class="card px-4" style="border:none">
  107.        <a href="{{path('app_default')}}" data-abc="true"><img id="change-logo" src="{{asset('assets/images/logo.png')}}" style="width: 60px;" alt=""><span style="padding-left: 15px; font-size: 23px; color:black">MODIXOM</span></a>
  111. <br><br><br>
  112.             <p class="h8 py-3">Paiement</p>
  113. <br><br>
  114.             <div id="card-success"></div>
  115.             <div id="card-errors"></div>
  119.             <div class="row gx-3" id="formPaiement">
  120.               
  123.                   <form id="payment-form">
  124.         <div class="form-group">
  125.             <label for="card-number">Numéro de Carte</label>
  126.             <div id="card-number" class="field"></div>
  127.         </div><br>
  128.         <div class="form-group">
  129.             <label for="card-expiry">Date d'Expiration (MM/AA)</label>
  130.             <div id="card-expiry" class="field"></div>
  131.         </div><br>
  132.         <div class="form-group">
  133.             <label for="card-cvc">Code de Sécurité</label>
  134.             <div id="card-cvc" class="field"></div>
  135.         </div><br>
  136.         <button class="btn btn-success" type="submit">Payer par carte bancaire</button>
  137.         <br><br>
  138.     </form>
  140.     
  141.                
  142.             </div>
  143.         </div>
  144.     </div>
  146.         <script src="https://js.stripe.com/v3/"></script>
  147.     <script src="{{ asset('paiement.js') }}"></script>