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:
- The script in the html tag is not being processed by laravel.
- 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! 🙂