[producer] Amélioration formulaire add credit + message paiement par carte bancaire tunnel de commande

producer/controllers/OrderController.php

                         'credit_limit' => is_numeric($producer->credit_limit) ? $producer->credit_limit : null,
                         'option_allow_order_guest' => $producer->option_allow_order_guest,
                         'option_order_entry_point' => $producer->option_order_entry_point,
-                        'option_delivery' => $producer->option_delivery
+                        'option_delivery' => $producer->option_delivery,
+                        'online_payment' => $producer->online_payment
                 ];
 
                 // Distributions

producer/views/credit/add.php

 <?php
 
-/** 
-Copyright distrib (2018) 
-
-contact@opendistrib.net
-
-Ce logiciel est un programme informatique servant à aider les producteurs 
-à distribuer leur production en circuits courts. 
-
-Ce logiciel est régi par la licence CeCILL soumise au droit français et
-respectant les principes de diffusion des logiciels libres. Vous pouvez
-utiliser, modifier et/ou redistribuer ce programme sous les conditions
-de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
-sur le site "http://www.cecill.info".
-
-En contrepartie de l'accessibilité au code source et des droits de copie,
-de modification et de redistribution accordés par cette licence, il n'est
-offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
-seule une responsabilité restreinte pèse sur l'auteur du programme,  le
-titulaire des droits patrimoniaux et les concédants successifs.
-
-A cet égard  l'attention de l'utilisateur est attirée sur les risques
-associés au chargement,  à l'utilisation,  à la modification et/ou au
-développement et à la reproduction du logiciel par l'utilisateur étant 
-donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
-manipuler et qui le réserve donc à des développeurs et des professionnels
-avertis possédant  des  connaissances  informatiques approfondies.  Les
-utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
-logiciel à leurs besoins dans des conditions permettant d'assurer la
-sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
-à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
-
-Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
-pris connaissance de la licence CeCILL, et que vous en avez accepté les
-termes.
-*/
+/**
+ * Copyright distrib (2018)
+ *
+ * contact@opendistrib.net
+ *
+ * Ce logiciel est un programme informatique servant à aider les producteurs
+ * à distribuer leur production en circuits courts.
+ *
+ * Ce logiciel est régi par la licence CeCILL soumise au droit français et
+ * respectant les principes de diffusion des logiciels libres. Vous pouvez
+ * utiliser, modifier et/ou redistribuer ce programme sous les conditions
+ * de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA
+ * sur le site "http://www.cecill.info".
+ *
+ * En contrepartie de l'accessibilité au code source et des droits de copie,
+ * de modification et de redistribution accordés par cette licence, il n'est
+ * offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+ * seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+ * titulaire des droits patrimoniaux et les concédants successifs.
+ *
+ * A cet égard  l'attention de l'utilisateur est attirée sur les risques
+ * associés au chargement,  à l'utilisation,  à la modification et/ou au
+ * développement et à la reproduction du logiciel par l'utilisateur étant
+ * donné sa spécificité de logiciel libre, qui peut le rendre complexe à
+ * manipuler et qui le réserve donc à des développeurs et des professionnels
+ * avertis possédant  des  connaissances  informatiques approfondies.  Les
+ * utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+ * logiciel à leurs besoins dans des conditions permettant d'assurer la
+ * sécurité de leurs systèmes et ou de leurs données et, plus généralement,
+ * à l'utiliser et l'exploiter dans les mêmes conditions de sécurité.
+ *
+ * Le fait que vous puissiez accéder à cet en-tête signifie que vous avez
+ * pris connaissance de la licence CeCILL, et que vous en avez accepté les
+ * termes.
+ */
 
 use yii\helpers\Html;
 use yii\widgets\ActiveForm;
 $this->setTitle('Créditer mon compte');
 $this->setPageTitle('Crédit mon compte');
 
+$this->addButton(
+        [
+                'label' => 'Retour',
+                'url' => 'credit/history',
+                'class' => 'btn btn-default'
+        ]
+);
+
 ?>
 
 <div class="form">
-    <?php $form = ActiveForm::begin(); ?>
-    <?= $form->field($creditForm, 'amount',[
-            'template' => '{label}<div class="input-group">{input}<span class="input-group-addon"><span class="glyphicon glyphicon-euro"></span></span></div>{hint}',
-        ])
+    <?php
+    $form = ActiveForm::begin([
+                                      'validateOnBlur' => false,
+                                      'enableAjaxValidation' => false,
+                              ]); ?>
+    <?= $form->field($creditForm, 'amount', [
+            'template' => '{label}<div class="input-group input-group-lg">{input}<span class="input-group-addon"><span class="glyphicon glyphicon-euro"></span></span></div>{hint}',
+    ])
             ->label('Quel montant souhaitez-vous créditer ?')
-            ->hint('<br />Montant minimum : 15 €');  ?>
+            ->hint('Montant minimum : 15 €'); ?>
 
     <div class="form-group">
-        <?= Html::submitButton( '<span class="glyphicon glyphicon-lock"></span> Payer sur Stripe', ['class' => 'btn btn-primary']) ?>
+        <?= Html::submitButton('<span class="glyphicon glyphicon-lock"></span> Payer', ['class' => 'btn btn-primary']
+        ) ?>
     </div>
-    <?php ActiveForm::end(); ?>
+    <?php
+    ActiveForm::end(); ?>
 </div>

producer/views/layouts/main.php

     </div>
 </div>
 
-<footer id="footer" class="col-md-9">
+<footer id="footer" class="container">
     <div class="content">
         <a href="<?php echo Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/index']); ?>">distrib</a> &bull;
         <a href="<?php echo Yii::$app->urlManagerFrontend->createAbsoluteUrl(['site/mentions']); ?>">Mentions

producer/views/order/order.php

             <div id="infos" v-if="producer != null && producer.order_infos != null && producer.order_infos.length">
                     <div class="panel panel-default">
                             <div class="panel-heading">
-                                    Informations
+                                <i class="glyphicon glyphicon-info-sign"></i> Informations
                             </div>
                             <div class="panel-body">
                                     {{ producer.order_infos }}
                     </div>
             </div>
 
+            <div v-if="producer.online_payment" id="credit-online-payment">
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        <i class="glyphicon glyphicon-euro"></i> Paiement en ligne
+                        <a href="<?= Yii::$app->urlManager->createUrl(['credit/add']) ?>" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-credit-card"></i> Créditer mon compte</a>
+                    </div>
+                    <div class="panel-body">
+                        Vous utilisez le crédit pour régler vos commandes ? Simplifiez les paiements avec votre producteur en créditant votre compte par carte bancaire.
+                    </div>
+                </div>
+            </div>
+
         <?php
         $producer = GlobalParam::getCurrentProducer() ;
         if($producer->hasSpecificDelays()): ?>

producer/web/css/screen.css

   clear: both;
 }
 
-/* line 57, ../sass/_layout.scss */
+/* line 63, ../sass/_layout.scss */
 .modal-backdrop.in {
   z-index: 10;
 }
 
-/* line 61, ../sass/_layout.scss */
+/* line 67, ../sass/_layout.scss */
 #main {
   position: relative;
 }
-/* line 63, ../sass/_layout.scss */
+/* line 69, ../sass/_layout.scss */
 #main .btn-primary {
   background-color: #FF7F00;
   border: solid 1px #FF7F00;
   color: white;
 }
-/* line 68, ../sass/_layout.scss */
+/* line 74, ../sass/_layout.scss */
 #main .btn-primary:hover, #main .btn-primary:active, #main .btn-primary:focus {
   background-color: #e67200;
   border: solid 1px #FF7F00;
   color: white;
 }
 
-/* line 77, ../sass/_layout.scss */
+/* line 83, ../sass/_layout.scss */
 .btn {
   background-image: none;
 }
 
-/* line 81, ../sass/_layout.scss */
+/* line 87, ../sass/_layout.scss */
 #main .alert {
   background-image: none;
   background-color: white;
   border-bottom-width: 3px;
 }
 
-/* line 89, ../sass/_layout.scss */
+/* line 95, ../sass/_layout.scss */
 .alert.alert-warning a {
   color: #8a6d3b;
   text-decoration: underline;
 }
-/* line 96, ../sass/_layout.scss */
+/* line 102, ../sass/_layout.scss */
 .alert.alert-danger a {
   color: #a94442;
   text-decoration: underline;
 }
 
-/* line 106, ../sass/_layout.scss */
+/* line 112, ../sass/_layout.scss */
 ul.pagination li.active a {
   background-color: #FF7F00;
   border: solid 1px #FF7F00;
 }
-/* line 110, ../sass/_layout.scss */
+/* line 116, ../sass/_layout.scss */
 ul.pagination li.active a:hover {
   background-color: white;
   border: solid 1px white;
   color: #FF7F00;
 }
-/* line 117, ../sass/_layout.scss */
+/* line 123, ../sass/_layout.scss */
 ul.pagination li a {
   color: #FF7F00;
 }
-/* line 120, ../sass/_layout.scss */
+/* line 126, ../sass/_layout.scss */
 ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   background-color: white;
   border: solid 1px white;
   color: #FF7F00;
 }
 
-/* line 129, ../sass/_layout.scss */
+/* line 135, ../sass/_layout.scss */
 #header-bap {
   position: absolute;
   right: 0px;
   text-align: center;
   z-index: 1000;
 }
-/* line 140, ../sass/_layout.scss */
+/* line 146, ../sass/_layout.scss */
 #header-bap .container {
   padding-left: 0px;
   padding-right: 0px;
 }
-/* line 145, ../sass/_layout.scss */
+/* line 151, ../sass/_layout.scss */
 #header-bap a#logo {
   color: black;
   text-decoration: none;
   position: relative;
   top: 3px;
 }
-/* line 151, ../sass/_layout.scss */
+/* line 157, ../sass/_layout.scss */
 #header-bap a#logo img {
   width: 45px;
 }
-/* line 156, ../sass/_layout.scss */
+/* line 162, ../sass/_layout.scss */
 #header-bap ul#nav-bap {
   float: right;
 }
-/* line 160, ../sass/_layout.scss */
+/* line 166, ../sass/_layout.scss */
 #header-bap ul#nav-bap li a {
   color: black;
   font-size: 15px;
   color: #FF7F00;
 }
-/* line 165, ../sass/_layout.scss */
+/* line 171, ../sass/_layout.scss */
 #header-bap ul#nav-bap li a:hover, #header-bap ul#nav-bap li a:focus {
   color: #333;
   color: #FF7F00;
   background: none;
 }
-/* line 172, ../sass/_layout.scss */
+/* line 178, ../sass/_layout.scss */
 #header-bap ul#nav-bap li ul {
   background-color: white;
   border-top: solid 2px #FF7F00;
   top: 50px;
   width: 200px;
 }
-/* line 180, ../sass/_layout.scss */
+/* line 186, ../sass/_layout.scss */
 #header-bap ul#nav-bap li ul li a {
   text-transform: uppercase;
   font-size: 13px;
 }
-/* line 184, ../sass/_layout.scss */
+/* line 190, ../sass/_layout.scss */
 #header-bap ul#nav-bap li ul li a:hover {
   color: #ff9933;
 }
-/* line 188, ../sass/_layout.scss */
+/* line 194, ../sass/_layout.scss */
 #header-bap ul#nav-bap li ul li a small {
   font-size: 10px;
   line-height: 13px;
   margin-left: 18px;
 }
 
-/* line 200, ../sass/_layout.scss */
+/* line 206, ../sass/_layout.scss */
 #left {
   background-color: #FFF8DC;
   text-align: center;
   padding: 0px;
   position: relative;
 }
-/* line 207, ../sass/_layout.scss */
+/* line 213, ../sass/_layout.scss */
 #left .fixed {
   position: fixed;
   display: none;
 }
-/* line 213, ../sass/_layout.scss */
+/* line 219, ../sass/_layout.scss */
 #left #logo {
   position: relative;
   background-color: white;
   text-align: center;
   overflow: hidden;
 }
-/* line 225, ../sass/_layout.scss */
+/* line 231, ../sass/_layout.scss */
 #left #logo img {
   position: absolute;
   top: 50%;
   max-width: 90px;
   max-height: 90px;
 }
-/* line 235, ../sass/_layout.scss */
+/* line 241, ../sass/_layout.scss */
 #left h1, #left h2, #left #infos, #left #infos a {
   color: #323232;
 }
-/* line 239, ../sass/_layout.scss */
+/* line 245, ../sass/_layout.scss */
 #left h1 {
   text-transform: uppercase;
   font-family: "highvoltageregular";
   text-align: center;
   font-weight: normal;
 }
-/* line 250, ../sass/_layout.scss */
+/* line 256, ../sass/_layout.scss */
 #left h2 {
   font-family: "capsuularegular";
   font-size: 15px;
   font-weight: normal;
   text-align: center;
 }
-/* line 256, ../sass/_layout.scss */
+/* line 262, ../sass/_layout.scss */
 #left h2 .favorite {
   padding-left: 0px;
 }
-/* line 259, ../sass/_layout.scss */
+/* line 265, ../sass/_layout.scss */
 #left h2 .favorite .glyphicon {
   font-size: 14px;
 }
-/* line 264, ../sass/_layout.scss */
+/* line 270, ../sass/_layout.scss */
 #left h2 a {
   color: #323232;
 }
-/* line 270, ../sass/_layout.scss */
+/* line 276, ../sass/_layout.scss */
 #left nav#main-nav {
   background-color: white;
   border: solid 1px #e0e0e0;
   border-bottom: 0px none;
   margin-top: 20px;
 }
-/* line 277, ../sass/_layout.scss */
+/* line 283, ../sass/_layout.scss */
 #left nav#main-nav ul li {
   display: block;
 }
-/* line 280, ../sass/_layout.scss */
+/* line 286, ../sass/_layout.scss */
 #left nav#main-nav ul li a {
   color: #323232;
   color: black;
   display: block;
   text-align: left;
 }
-/* line 289, ../sass/_layout.scss */
+/* line 295, ../sass/_layout.scss */
 #left nav#main-nav ul li a .glyphicon {
   font-size: 15px;
   margin-right: 3px;
 }
-/* line 294, ../sass/_layout.scss */
+/* line 300, ../sass/_layout.scss */
 #left nav#main-nav ul li a span.label {
   padding-bottom: 3px;
   font-family: "Arial";
   float: right;
 }
-/* line 302, ../sass/_layout.scss */
+/* line 308, ../sass/_layout.scss */
 #left nav#main-nav ul li.active span.label, #left nav#main-nav ul li a:hover span.label {
   background-color: #e67200;
   color: white;
 }
-/* line 308, ../sass/_layout.scss */
+/* line 314, ../sass/_layout.scss */
 #left nav#main-nav ul li a:hover, #left nav#main-nav ul li.active a {
   background: #FF7F00;
   color: white;
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 317, ../sass/_layout.scss */
+/* line 323, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a {
   color: #FF7F00;
 }
-/* line 320, ../sass/_layout.scss */
+/* line 326, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a:hover {
   color: white;
 }
-/* line 328, ../sass/_layout.scss */
+/* line 334, ../sass/_layout.scss */
 #left nav#main-nav #user {
   color: #FF7F00;
   float: right;
   padding: 10px;
 }
 
-/* line 336, ../sass/_layout.scss */
+/* line 342, ../sass/_layout.scss */
 #main {
   background-color: #FFF8DC;
   border: solid 1px #e0e0e0;
   padding: 0px;
   background-color: white;
 }
-/* line 343, ../sass/_layout.scss */
+/* line 349, ../sass/_layout.scss */
 #main #img-big {
   height: 130px;
   overflow: hidden;
   position: relative;
 }
-/* line 348, ../sass/_layout.scss */
+/* line 354, ../sass/_layout.scss */
 #main #img-big img.img-photo {
   width: 100%;
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-/* line 358, ../sass/_layout.scss */
+/* line 364, ../sass/_layout.scss */
 #main #infos-producer {
   padding: 5px 10px;
   margin-bottom: 0px;
   border-bottom: solid 1px #e0e0e0;
   color: gray;
 }
-/* line 367, ../sass/_layout.scss */
+/* line 373, ../sass/_layout.scss */
 #main #infos-producer strong {
   font-weight: bold;
 }
-/* line 371, ../sass/_layout.scss */
+/* line 377, ../sass/_layout.scss */
 #main #infos-producer .favorite {
   float: right;
   color: gray;
 }
-/* line 374, ../sass/_layout.scss */
+/* line 380, ../sass/_layout.scss */
 #main #infos-producer .favorite a {
   color: black;
 }
-/* line 380, ../sass/_layout.scss */
+/* line 386, ../sass/_layout.scss */
 #main h2#page-title {
   padding-left: 15px;
   padding-right: 15px;
   top: -10px;
   text-align: left;
 }
-/* line 394, ../sass/_layout.scss */
+/* line 400, ../sass/_layout.scss */
 #main h2#page-title #buttons {
   margin-bottom: 15px;
   font-family: "Arial";
 }
-/* line 401, ../sass/_layout.scss */
+/* line 407, ../sass/_layout.scss */
 #main #content {
   padding: 0px 20px 20px 20px;
   padding-bottom: 40px;
   min-height: 300px;
 }
-/* line 406, ../sass/_layout.scss */
+/* line 412, ../sass/_layout.scss */
 #main #content h1, #main #content h2, #main #content h3, #main #content h4, #main #content h5, #main #content h6 {
   font-family: "highvoltageregular";
   margin-top: 30px;
   margin-bottom: 20px;
 }
-/* line 411, ../sass/_layout.scss */
+/* line 417, ../sass/_layout.scss */
 #main #content h1.first, #main #content h2.first, #main #content h3.first, #main #content h4.first, #main #content h5.first, #main #content h6.first {
   margin-top: 0px;
 }
-/* line 416, ../sass/_layout.scss */
+/* line 422, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 420, ../sass/_layout.scss */
+/* line 426, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 425, ../sass/_layout.scss */
+/* line 431, ../sass/_layout.scss */
 #main #content h3 {
   font-family: "capsuularegular";
   text-transform: uppercase;
   margin-bottom: 30px;
   margin-top: 45px;
 }
-/* line 433, ../sass/_layout.scss */
+/* line 439, ../sass/_layout.scss */
 #main #content h3 span {
   padding-top: 14px;
   color: #323232;
 }
-/* line 439, ../sass/_layout.scss */
+/* line 445, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 443, ../sass/_layout.scss */
+/* line 449, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 447, ../sass/_layout.scss */
+/* line 453, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
-/* line 453, ../sass/_layout.scss */
+/* line 459, ../sass/_layout.scss */
 #main #content form .form-group .hint-block {
   color: gray;
 }
 
-/* line 461, ../sass/_layout.scss */
+/* line 467, ../sass/_layout.scss */
 #footer-producer {
   text-align: center;
   position: absolute;
   left: 0px;
   width: 100%;
 }
-/* line 468, ../sass/_layout.scss */
+/* line 474, ../sass/_layout.scss */
 #footer-producer a {
   color: #FF7F00;
 }
-/* line 470, ../sass/_layout.scss */
+/* line 476, ../sass/_layout.scss */
 #footer-producer a:active {
   text-decoration: underline;
 }
 
-/* line 476, ../sass/_layout.scss */
+/* line 482, ../sass/_layout.scss */
 #footer {
   background-color: #FFF8DC;
   height: 100px;
   float: right;
   text-align: center;
 }
-/* line 482, ../sass/_layout.scss */
+/* line 488, ../sass/_layout.scss */
 #footer .content {
   padding-top: 20px;
   color: black;
 }
-/* line 486, ../sass/_layout.scss */
+/* line 492, ../sass/_layout.scss */
 #footer .content a {
   color: black;
   font-family: "capsuularegular";
   padding-left: 10px;
   padding-right: 10px;
 }
-/* line 493, ../sass/_layout.scss */
+/* line 499, ../sass/_layout.scss */
 #footer .content a:hover {
   text-decoration: underline;
 }
-/* line 500, ../sass/_layout.scss */
+/* line 506, ../sass/_layout.scss */
 #footer #code-source img {
   height: 20px;
 }
   font-size: 1.3rem;
 }
 /* line 175, ../sass/order/_order.scss */
+.order-order #main #app-order-order #credit-online-payment .panel .panel-heading .btn-default {
+  float: right;
+  position: relative;
+  top: -5px;
+}
+/* line 187, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .panel .btn-primary {
   float: right;
 }
-/* line 179, ../sass/order/_order.scss */
+/* line 191, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .panel .date {
   font-size: 20px;
 }
-/* line 183, ../sass/order/_order.scss */
+/* line 195, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-date #distributions-list .panel .point-sales {
   color: gray;
   font-size: 14px;
   margin-top: 8px;
 }
-/* line 192, ../sass/order/_order.scss */
+/* line 204, ../sass/order/_order.scss */
 .order-order #main #app-order-order .block-actions {
   text-align: right;
   margin-top: 20px;
 }
-/* line 199, ../sass/order/_order.scss */
+/* line 211, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.name .the-name {
   font-family: "capsuularegular";
   color: black;
   font-size: 20px;
   line-height: 25px;
 }
-/* line 207, ../sass/order/_order.scss */
+/* line 219, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.actions {
   width: 150px;
 }
-/* line 209, ../sass/order/_order.scss */
+/* line 221, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale td.actions button {
   width: 100%;
 }
-/* line 215, ../sass/order/_order.scss */
+/* line 227, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#points-sale tr.selected td {
   background-color: white;
 }
-/* line 223, ../sass/order/_order.scss */
+/* line 235, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name {
   font-family: "highvoltageregular";
   font-size: 22px;
   text-transform: uppercase;
   padding-top: 13px;
 }
-/* line 230, ../sass/order/_order.scss */
+/* line 242, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name .glyphicon-triangle-bottom,
 .order-order #main #app-order-order table#products td.category-name .glyphicon-triangle-right {
   font-size: 15px;
 }
-/* line 235, ../sass/order/_order.scss */
+/* line 247, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name span.label {
   font-family: "Arial";
   font-weight: normal;
   text-transform: none;
   margin-left: 15px;
 }
-/* line 244, ../sass/order/_order.scss */
+/* line 256, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.category-name:hover {
   cursor: pointer;
   background-color: #FF7F00;
   color: white;
 }
-/* line 252, ../sass/order/_order.scss */
+/* line 264, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.photo img {
   width: 100px;
 }
-/* line 258, ../sass/order/_order.scss */
+/* line 270, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .name {
   font-family: "capsuularegular";
   color: black;
   font-size: 20px;
   line-height: 25px;
 }
-/* line 264, ../sass/order/_order.scss */
+/* line 276, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .other {
   font-size: 14px;
   color: #333;
 }
-/* line 268, ../sass/order/_order.scss */
+/* line 280, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products td.name .recipe {
   color: gray;
 }
-/* line 272, ../sass/order/_order.scss */
+/* line 284, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit, .order-order #main #app-order-order table#products .price-total {
   width: 100px;
   text-align: center;
 }
-/* line 276, ../sass/order/_order.scss */
+/* line 288, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .unit, .order-order #main #app-order-order table#products .price-total .unit {
   color: gray;
   font-size: 13px;
 }
-/* line 281, ../sass/order/_order.scss */
+/* line 293, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity {
   width: 175px;
 }
-/* line 283, ../sass/order/_order.scss */
+/* line 295, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
   border-right: 0px none;
 }
-/* line 287, ../sass/order/_order.scss */
+/* line 299, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-addon {
   padding: 5px;
   padding-left: 0px;
   border-left: 0px none;
   border-right: 0px none;
 }
-/* line 298, ../sass/order/_order.scss */
+/* line 310, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary h3 {
   margin-top: 0px;
   font-family: "capsuularegular";
   text-transform: none;
   margin-bottom: 5px;
 }
-/* line 305, ../sass/order/_order.scss */
+/* line 317, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul {
   margin-bottom: 15px;
   padding-left: 20px;
   font-size: 23px;
 }
-/* line 312, ../sass/order/_order.scss */
+/* line 324, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .quantity {
   font-size: 18px;
 }
-/* line 316, ../sass/order/_order.scss */
+/* line 328, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .name {
   font-family: "capsuularegular";
   font-size: 24px;
 }
-/* line 320, ../sass/order/_order.scss */
+/* line 332, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .other {
   font-family: "arial";
   font-size: 14px;
 }
-/* line 327, ../sass/order/_order.scss */
+/* line 339, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .price-total {
   font-size: 23px;
 }
-/* line 335, ../sass/order/_order.scss */
+/* line 347, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery {
   margin-bottom: 20px;
 }
-/* line 338, ../sass/order/_order.scss */
+/* line 350, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery .delivery-home {
   margin-bottom: 20px;
 }
-/* line 347, ../sass/order/_order.scss */
+/* line 359, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .comment {
   margin-bottom: 20px;
 }
-/* line 352, ../sass/order/_order.scss */
+/* line 364, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 365, ../sass/order/_order.scss */
+/* line 377, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 367, ../sass/order/_order.scss */
+/* line 379, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;
 }
 
-/* line 377, ../sass/order/_order.scss */
+/* line 389, ../sass/order/_order.scss */
 #main #content .panel h3 {
   font-family: "highvoltageregular";
   margin: 0px;
 
 /* line 3, ../sass/credit/_add.scss */
 .credit-add .form {
-  max-width: 250px;
+  max-width: 350px;
   margin: 0px auto;
+  margin-top: 30px;
   text-align: center;
 }
-/* line 8, ../sass/credit/_add.scss */
-.credit-add .form label {
-  margin-bottom: 15px;
-  color: gray;
+/* line 9, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount {
+  text-align: center;
+  margin-bottom: 30px;
+}
+/* line 13, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount label {
+  margin-bottom: 25px;
+  color: black;
+  font-size: 20px;
+}
+/* line 19, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount .input-group {
+  width: 150px;
+  margin: 0px auto;
+}
+/* line 24, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount .input-group input#creditform-amount {
+  text-align: center;
+}
+/* line 27, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount .input-group input#creditform-amount:focus {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-color: #ccc;
+}
+/* line 34, ../sass/credit/_add.scss */
+.credit-add .form .form-group.field-creditform-amount .hint-block {
+  margin-top: 8px;
 }
 
 /* line 4, ../sass/subscription/_form.scss */

producer/web/sass/_layout.scss

     clear: both ;
 }
 
+.panel {
+    a {
+        //color: $color1;
+    }
+}
+
 .modal-backdrop.in {
     z-index: 10 ;
 }

producer/web/sass/credit/_add.scss

 
 .credit-add {
     .form {
-        max-width: 250px ;
+        max-width: 350px ;
         margin: 0px auto ;
+        margin-top: 30px;
         text-align: center ;
-        
-        label {
-            margin-bottom: 15px ;
-            color: gray ;
+
+        .form-group.field-creditform-amount {
+            text-align: center ;
+            margin-bottom: 30px;
+
+            label {
+                margin-bottom: 25px ;
+                color: black ;
+                font-size: 20px ;
+            }
+
+            .input-group {
+                width: 150px;
+                margin: 0px auto;
+                //display: inline-block;
+
+                input#creditform-amount {
+                    text-align: center;
+
+                    &:focus {
+                        @include box-shadow(none);
+                        border-color: #ccc;
+                    }
+                }
+            }
+
+            .hint-block {
+                margin-top: 8px;
+            }
         }
     }
 } 

producer/web/sass/order/_order.scss

             }
         }
 
+        #credit-online-payment {
+            .panel {
+                .panel-heading {
+                    .btn-default {
+                        float: right;
+                        position: relative;
+                        top: -5px;
+                    }
+                }
+            }
+        }
+
         #content-step-date {
             #distributions-list {
                 .panel {