Stripe checkout is redirecting back to my VF page again and again when pressing the Pay now button on my Visualforce page

<apex:page docType="html-5.0" showHeader="false" sidebar="false" controller="StripeCheckout" standardStylesheets="false">
    <!---->
  <head>
    <apex:slds />
    <script src="https://js.stripe.com/v3/"></script>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <script type="text/javascript">
    function stripePopup(){
        console.log("inside the function")
        var stripe = Stripe("pk_test_something");
        stripe.redirectToCheckout({
        lineItems: [
        {price: '400', quantity: 1},
        ],
        mode: 'payment',
        successUrl: 'https://google.com',
        cancelUrl: 'https://tesla.com',
    })
    .then(function(result) {
        console.log(result);
    });
    }

    </script>
  </head>
    <br/>
    <h1 style="text-align:center"><b>Stripe Checkout Demo</b></h1>
      <center>
          <apex:image value="{!URLFOR($Resource.product)}"/>
      </center>
      <div class="slds-table--header-fixed_container" style="height:450px;">
          <div class="slds-scrollable_y" style="height:100%;">
          <apex:form id="ContributionRequestForm">
              <center>
                  <br/>
                  <apex:commandButton styleClass="slds-button slds-button--brand" onclick="stripePopup()" value="Pay now"/>
              </center>    
          </apex:form>
          </div>
      </div>
</apex:page>

I have made a VF page with only a Pay now button. I took help from Stripe official docs https://stripe.com/docs/js/checkout/redirect_to_checkout, but whenever I am clicking on pay now it is redirecting me back to my VF page but it is not redirecting to the Stripe Checkout page. What is wrong here? Thanks