Custom Stripe Checkout

Question

I am trying to customise the description of Stripe Checkout using data-*

But I can get the form to show the description properly.

From this post I know that I can't get the data-* by using javascript in another script tag but I ran out of ways to do it. setting up stripe with custom amount

Here is my code:

#button 
<button id="test" class ='pay_by_card' data-description= "<%= @product.description %>"></button>

#script
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
  var handler = StripeCheckout.configure({
    key: "<% Rails.application.secrets.stripe_publishable_key %>", 
    locale: 'auto',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  $(document).ready(function() {    
  $('.pay_by_card').on('click', function(e) {
    // Open Checkout with further options
    var d = $.parseJSON($(this).attr('data-button'));
    handler.open({
      name: 'Deposit',
      description: d ,
      currency: 'gbp',
      amount: 100
    });
    e.preventDefault();
  });
  });

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