Import Script and Convert HTML, JS and CSS Code To Run In Laravel

I have a laravel project and I want to run a html, js and css code in the laravel blade frontend but am running into some issues. I am new to laravel and moving from angular and nodejs so my apology in advance if this is a basic question.

I want to get a hosted IFrame sample from clover to work on my laravel project. The IFrame project in reference can be found here. I have done extensive research as well as found and tried a lot of solutions but none seem to solve my problem.

I am trying to add the component in a checkout blade file. The issue I am running into are:

  1. The script in the html tag is not being processed by laravel.
  2. I am Unable to link and get the field and functionality working for binding the elements.

I have tried putting the js and cs files in the corresponding folder in the public directory, /public/css/checkout.css and /public/js/checkout.js. But the scripts are failing to load.

The blade file I am adding the code to contains the following code with HTML I added for the form from the iframe example.

@if ($userBe->is_checkout_login == 1)
            <div class="payment-options">
                <link rel="stylesheet" href="{{ asset('css/checkout.css') }}">
                <script src="{{ asset('js/checkout.js') }}"></script>
                <script src="https://checkout.sandbox.dev.clover.com/sdk.js"></script>
                <h4 class="mb-4">Checkout</h4>
                <head>
                    <title>GPay and Hosted Checkout</title>
                </head>
                <div class="container">
                    <form action="/charge" method="post" id="payment-form">
                        <div class="form-row top-row">
                            <div id="payment-request-button" class="payment-request-button full-width"></div>
                        </div>

                        <div class="hr">
                      <span>
                        Or Pay with Card
                      </span>
                        </div>

                        <div class="form-row top-row">
                            <div id="card-number" class="field full-width"></div>
                            <div class="input-errors" id="card-number-errors" role="alert"></div>
                        </div>

                        <div class="form-row">
                            <div id="card-date" class="field third-width"></div>
                            <div class="input-errors" id="card-date-errors" role="alert"></div>
                        </div>

                        <div class="form-row">
                            <div id="card-cvv" class="field third-width"></div>
                            <div class="input-errors" id="card-cvv-errors" role="alert"></div>
                        </div>

                        <div class="form-row">
                            <div id="card-postal-code" class="field third-width"></div>
                            <div class="input-errors" id="card-postal-code-errors" role="alert"></div>
                        </div>

                        <!-- Used to display form errors. -->
                        <div id="card-errors" role="alert"></div>

                        <!-- Testing -->
                        <div id="card-response" role="alert"></div>
                        <div class="button-container">
                            <button>Submit Payment</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="placeorder-button mt-4">
                <button class="main-btn w-100" type="button" form="payment" id="placeOrderBtn">
                <span class="btn-title">
                    {{ $keywords['Place Order'] ?? __('Place Order') }}
                </span>
                </button>
            </div>
</div>
@endif

I have tried a couple of solutions including this:
The above mentioned did not work and was unclear. <script type="text/javascript" {!! Helper::cspNonceAttr() !!}> returns helper not found and adding it to the environment doesnt load the script.

Nothing seems to work as I have tried multiple other suggestions and solutions. Am I doing it wrong or possibly missing something?

Thanks in advance for the help! 🙂