instead of a visual force page, i want to have the same page in plain html instead while keeping all its functionality: <apex:page >
    <!-- To add the lightning experience -->
    <apex:slds />
    <apex:includeLightning />
    
    <style>
        * {
         box-sizing: border-box;
        }
        .row {
            content: "";
            display: flex;
            clear: both;
        }
        .column {
            margin: 0px 20px 20px 20px;
            width: -webkit-fill-available;
        }
        .single-row {
         margin: 0px 20px 20px 20px;
        }
        .card-input {
            width: -webkit-fill-available;
            border: 1px solid var(--slds-g-color-border-base-4, rgb(201, 201, 201));
            border-radius: 0.25rem;
            background-color: var(--slds-g-color-neutral-base-100, rgb(255, 255, 255));
            color: var(--slds-c-input-text-color, var(--sds-c-input-text-color));
            box-shadow: var(--slds-c-input-shadow, var(--sds-c-input-shadow));
            transition: border .1s linear,background-color .1s linear;
            display: inline-block;
            padding-top: 0;
            padding-right: 1rem;
            padding-bottom: 0;
            padding-left: 0.75rem;
        }
        .label-text {
            font-size: 15px;
            font-weight: 300;
        }
     </style>
    
    <apex:form id="card-form">
        <div class="single-row">
            <label class="slds-form-element__label" style="font-size: 15px; font-weight: 300;">Card Number</label>
            <div id="card-number" class="slds-scope card-input">
                <!-- Element for card-number  -->
            </div>
        </div>
        <div class="row">
            <div class="column">
                <label class="slds-form-element__label" style="font-size: 15px; font-weight: 300;">Expiry Date</label>
                <div id="exp-date" class="slds-scope card-input">
                    <!-- Element for card exp-date -->
                </div>
            </div>
            <div class="column">
                <label class="slds-form-element__label" style="font-size: 15px; font-weight: 300;">CVC</label>
                <div id="cvc" class="slds-scope card-input">
                    <!-- Element for card cvc -->
                </div>
            </div>
        </div>
        <div class="slds-align--absolute-center">
            <button 
                    class="slds-button slds-button_brand"
                    onclick="getToken(); return false;">Get Token
            </button>
        </div>
    </apex:form>
    
    <script>
        // Will use to store element create by stripe.
        let cardNumberElement, cardExpiryElement, cardCvcElement;
     let stripe;
  let elements;
        let style = {
            base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '15px',
                
                '::placeholder': {
                    color: '#CFD7E0',
                },
            },
        };
        
        window.onload = function() {
          let publicKey = PUBLIC_KEY;
          stripe = Stripe(publicKey);
          elements = stripe.elements();
          createCardNumberElement();
          createCardExpiryElement();
          createCardCvcElement();
        }
        
        function createCardNumberElement() {
           cardNumberElement = elements.create('cardNumber', {
               style: style
           });
           cardNumberElement.mount('#card-number');
        }
                
        function createCardExpiryElement() {
            cardExpiryElement = elements.create('cardExpiry', {
                style: style
            });
            cardExpiryElement.mount('#exp-date');
        }
                
        function createCardCvcElement() {
            cardCvcElement = elements.create('cardCvc', {
                style: style
          });
          cardCvcElement.mount('#cvc');
        }
    
        function getToken() {
            stripe.createToken(cardNumberElement).then(function(result) {
                // Handle result.error or result.token
                if(result.token) {
                    console.log('Token ' + JSON.stringify(result.token));   
                }else {
                    console.log('Error ' + JSON.stringify(result.error));   
                }
            });
        }
    </script>
    
    <script src="https://js.stripe.com/v3/">
    </script>
</apex:page>