Stipe Checkout Form Does Not Send Token To Server

I am trying to integrate a stripe checkout form onto my website which is run from a node.js server on heroku.

The form to collect payment information is provided by stripe:

    <form action="/updatepayment" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_DNdN11LpouG0f1x4_____"
    data-amount="999"
    data-name="[Name]"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>

This are the instructions stripe gives: The simple integration uses a <script> tag inside your payment form to render the blue Checkout button. Upon completion of the Checkout process, Checkout submits your form to your server, passing along a stripeToken and any elements your form contains. When adding the following code to your page, make sure that the form submits to your own server-side code within the action attribute

I have also tried different data-keys with no success. When the form is submitted, the page is redirected to the current page and the url then contains the token but nothing is sent to the server.

You can try below method just add

<script src="https://checkout.stripe.com/checkout.js"></script>

in index.html File and add <button (click)="openCheckout()">Purchase</button> in your component html File

and in ts file add below code

openCheckout() {
    var tok=this;
    var handler = (<any>window).StripeCheckout.configure({

      key: '',  // Enter your publishable key
      locale: 'auto',
      token: function (token: any) {
        tok.token1(token);
      }

    });

    handler.open({
      name: 'Food Style',
      description: 'Payment',
      amount: this.price * 100,
    });

  }

  token1(token){
    console.log(token);
    this.paymentservice.defaultcard(token)
    .subscribe((result)=>{
      console.log(result);
    },
    (err)=>{
      console.log(err);
    })
  }