how to tell custom checkout form with stripe api what form action is -

i following stripe guide here: https://stripe.com/docs/checkout

when use simple integration, form works perfectly. here code that:

<form action="/charges" method="post">   <article>     <label class="amount">       <span>amount: $5.00</span>     </label>   </article>    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"           data-key="mydatakey"           data-description="a month's subscription"           data-amount="500"></script> </form> 

however, when use custom integration, code not go right action. instead, goes page form on. how can fix code below form data goes right place.

<form action="/charges" method="post">   <article>     <label class="amount">       <span>amount: $5.00</span>     </label>   </article> <button id="custombutton">purchase</button> </form> <script>   var handler = stripecheckout.configure({     key: 'mydatakey,     image: '/img/documentation/checkout/marketplace.png',     token: function(token) {       // use token create charge server-side script.       // can access token id `token.id`     }   });    $('#custombutton').on('click', function(e) {     // open checkout further options     handler.open({       name: 'demo site',       description: '2 widgets',       amount: 2000     });     e.preventdefault();   });    // close checkout on page navigation   $(window).on('popstate', function() {     handler.close();   }); </script> 

the problem might have token code, i'm not sure. problem trying fix form data go right place.