JavaScript slow and not DRY

user_10419791 0
Viewed 69

I am using this JavaScript code here to handle different checkout boxes via Stripe on my page. My code seems to slow down my page. When I clicked the button, it takes 3-5 seconds to open the Checkout box. Also what I use here doesn't look DRY. Do you have a better way to write this code shorter?

<script>
    var handler = StripeCheckout.configure({
      key: '{{ stripe_pub_key }}',
      image: '{% static "img/payment/paul.jpg" %}',
      locale: 'auto',
      allowRememberMe: false,
      zipCode: true,
      token: function(token) {
        $('#stripeToken').val(token.id);
        $('#stripeEmail').val(token.email);
        $('#paymentForm').submit();
      }
    });

    $('#buyCourseButton1').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '4900'
      });
      $('#coursePackage').val('package_1');
      e.preventDefault();
    });

    $('#buyCourseButton2').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '9900'
      });
      $('#coursePackage').val('package_2');
      e.preventDefault();
    });

    $('#buyCourseButton3').click(function(e) {
      // Open Checkout with further options:
      handler.open({
        name: 'Brand You',
        description: 'by Paul S.',
        currency: 'eur',
        amount: '79900'
      });
      $('#coursePackage').val('package_3');
      e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
  </script>
jquery javascript
1 Answers

Here's a quick refactor that moves the click handler generation to a helper function (courseClickHandler):

<script>
    var handler = StripeCheckout.configure({
      key: '{{ stripe_pub_key }}',
      image: '{% static "img/payment/paul.jpg" %}',
      locale: 'auto',
      allowRememberMe: false,
      zipCode: true,
      token: function(token) {
        $('#stripeToken').val(token.id);
        $('#stripeEmail').val(token.email);
        $('#paymentForm').submit();
      }
    });

    // create a new click event handler for the given course package,
    // and the given amount
    var courseClickHandler = (amount, coursePackage) => {
      return e => {
        // Open Checkout with further options:
        handler.open({
          name: 'Brand You',
          description: 'by Paul S.',
          currency: 'eur',
          amount: amount
        });
        $('#coursePackage').val(coursePackage);
        e.preventDefault();
      }
    }

    $('#buyCourseButton1').click(courseClickHandler("4900", "package_1"));

    $('#buyCourseButton2').click(courseClickHandler("9900", "package_2"));

    $('#buyCourseButton3').click(courseClickHandler("79900", "package_3"));

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
      handler.close();
    });
  </script>
user_67973020
Related