Ytdyklly

I have a stripe payment form and when i use diffferent forms that get hidden, i must use separate ID's for the form to appear. I have found a way to do this but looking to simplify the code if this is possible.

I have a page that has listings for purchase. Each listing can have variants. Because of this, I need to create separate Stripe javascript so the credit card form appears.

I am wondering if there is a simpler route to go in instead of doing the folllowing:

  <script>



  var stripe = Stripe('pk_test_1234567890');





  var elements = stripe.elements();







  var style = {

    base: {

      color: '#32325d',

      lineHeight: '24px',

      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',

      fontSmoothing: 'antialiased',

      fontSize: '16px',

      '::placeholder': {

        color: '#aab7c4'

      }

    },

    invalid: {

      color: '#fa755a',

      iconColor: '#fa755a'

    }

  };



  var card = elements.create('card', {style: style});



  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) {

        var errorElement = document.getElementById('card-errors');

        errorElement.textContent = result.error.message;

      } else {

        stripeTokenHandler(result.token);

      }

    });

  });



    function stripeTokenHandler(token) {



      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>



<script>



var stripe = Stripe('pk_test_1234567890');



var elements = stripe.elements();



var style = {

  base: {

    color: '#32325d',

    lineHeight: '24px',

    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',

    fontSmoothing: 'antialiased',

    fontSize: '16px',

    '::placeholder': {

      color: '#aab7c4'

    }

  },

  invalid: {

    color: '#fa755a',

    iconColor: '#fa755a'

  }

};



var card = elements.create('card', {style: style});



#HERE IS USE DIFFERENT CARD ID



card.mount('#card-element-2');



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) {

      var errorElement = document.getElementById('card-errors');

      errorElement.textContent = result.error.message;

    } else {

      stripeTokenHandler(result.token);

    }

  });

});



  function stripeTokenHandler(token) {

    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);



    form.submit();

  }







</script>

One of the forms:

    <div class="form-row">

      <label for="card-element-2">

          Credit or debit card

      </label>

    <div id="card-element-2" class="form-control">

    </div>

    <div id="card-errors" role="alert"></div>

    </div>

...

...

As you see, if you look closely, there are different id's being called in each separate script. I have a commented out like #HERE I USE DIFFERENT CARD ID

I then, in the view, have separate credit card forms with different ID's. It is like this because when one form is appearing, another is hidden.

Question, is there a way where I can simplify this code and call the possibility of multiple ID's instead of having long javascript like the way i do?