Myujth

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>

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>