FM / payment

/var/www/vhosts/nabawater/frontend/views/payment/

/var/www/vhosts/nabawater/frontend/views/payment

Name	Size	Mode	Actions
card_details.php	4710	0644	edit dl rm
index.php	1308	0644	edit dl rm
mail.php	15501	0644	edit dl rm
response.php	88	0644	edit dl rm
view.php	378	0644	edit dl rm

Edit: /var/www/vhosts/nabawater/frontend/views/payment/card_details.php (4710B)

<div class="table-cell">
<?php 
 use frontend\components\CActiveForm;
 use frontend\models\Configuration;

$type = '';
if(Yii::$app->request->get('type') == 'mobile'){
  $type = '?type=mobile';
}
    $form = CActiveForm::begin(['id'=>'payment-form','method'=>'post','action'=>'/payment/payment-dedection'.$type]) ;
    foreach ($params as $key => $value) {
      echo "<input type='hidden' name='$key' value='$value'>";
    }

<div class="form-row">
        <label for="card-element">
          Credit or debit card
        </label>

<button>Submit Payment</button>

<?php CActiveForm::end(); ?>  
</div>

// Custom styling can be passed to options when creating an Element.
        var style = {
          base: {
            // Add your base input styles here. For example:
            fontSize: '16px',
            color: "#32325d",
          }
        };

// Create an instance of the card Element.
        var card = elements.create('card', {hidePostalCode: true, style: style});

// Add an instance of the card Element into the `card-element` <div>.
        card.mount('#card-element');

card.addEventListener('change', function(event) {
          var displayError = document.getElementById('card-errors');
          if (event.error) {
            displayError.textContent = event.error.message;
          } else {
            displayError.textContent = '';
          }
        });

var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
          event.preventDefault();

stripe.createToken(card).then(function(result) {
            if (result.error) {
              // Inform the customer that there was an error.
              var errorElement = document.getElementById('card-errors');
              errorElement.textContent = result.error.message;
            } else {
              // Send the token to your server.
              stripeTokenHandler(result.token);
            }
          });
        });

function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('payment-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);

// Submit the form
          form.submit();
        }

</script>

cmd: