How do i pass Livewire property value to my <script> tag javascript in blade.php view file of the Livewire component?

I am trying to open a hosted page from a payment gateway provider. 2 parameters are required by the page,

I have successfully created the parameters and saved it in my database but when i try to pass the data to my script it does not pass the value of the variable in blade.php view file.

`

<?php

namespace App\Http\Livewire\Open;

use Illuminate\Http\Request;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Str;
use Livewire\Component;
use App\Models\OpenTransactions;

class NewDeposit extends Component
{
    public $op_id;
    public $op_amount;
    public $op_udf;
    public $op_attempts;
    public $op_sub_accounts_id;
    public $op_entity;
    public $op_status;
    public $op_contact_number;
    public $op_email_id;
    public $op_mtx;
    public $op_currency;
    public $op_customer_id;
    public $apiKey;
    public $mydata;

    public function mount(Request $request){
        $this->op_mtx = Str::uuid()->toString();
        $this->op_currency = "INR";
        $this->op_amount =$request->get('op_amount');
        $this->op_email_id =$request->get('op_email_id');
    }

    public function render()
    {
        return view('livewire.open.new-deposit');
    }

    public function createNewDepositOpen(Request $request)
    {
        $apiKey  = config('app.open_key');


        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . $apiKey,
            'accept' => 'application/json',
            'content-type' => 'application/json',
        ])->post('https://sandbox-icp-api.bankopen.co/api/payment_token',[
     开发者_JAVA技巧       'amount' => $this->op_amount,
            'mtx' => $this->op_mtx,
            'currency' => $this->op_currency,
            'udf' => $this->op_udf,
            'contact_number' => $this->op_contact_number,
            'email_id' => $this->op_email_id
        ]);

        $mydata = json_decode($response->getBody()->getContents(), true);
        //dd($mydata);

        $newpayload = OpenTransactions::create([
            'op_mtx' => $mydata['mtx'],
            'op_amount' => $mydata['amount'],
            'op_udf' => $mydata['udf'] ?? null,
            'op_contact_number' => Arr::get($mydata, 'customer.contact_number'),
            'op_email_id' => Arr::get($mydata, 'customer.email_id'),
            'op_currency' => $mydata['currency'],
            'op_id' => $mydata['id'],
            'op_attempts' => $mydata['attempts'],
            'op_sub_accounts_id' => $mydata['sub_accounts_id'],
            'op_entity' => $mydata['entity'],
            'op_status' => $mydata['status'],
            'op_customer_id' => Arr::get($mydata, 'customer.id')
        ]);

        //dd($newpayload);
        $this->emit('token_create');


    }
}

`

Above is my Livewire Component File.

`

<div>
    {{-- Care about people's approval and you will be their prisoner. --}}
    <div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="w-full max-w-md space-y-8">
            <div>
                <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
                <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Deposit</h2>
                <p class="mt-2 text-center text-sm text-gray-600">

                    <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"></a>
                </p>
            </div>
            <form wire:submit.prevent="createNewDepositOpen" class="mt-8 space-y-6"  method="POST">
                <input type="hidden" name="remember" value="true">
                <div class="-space-y-px rounded-md shadow-sm">
                    <div>
                        <label for="op_email_id" class="sr-only">Email address</label>
                        <input wire:model="op_email_id" id="op_email_id" name="op_email_id" type="email" autocomplete="email" required class="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Email address">
                    </div>
                    <div class="mt-2">
                        <label for="op_contact_number" class="sr-only">Mobile Number</label>
                        <input wire:model="op_contact_number" id="op_contact_number" name="op_contact_number" type="tel" pattern="^[6-9]\d{9}$" required class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Enter 10 digit Mobile No.">
                    </div>
                    <div class="mt-2">
                        <label for="op_amount" class="sr-only">amount</label>
                        <input wire:model="op_amount" id="op_amount" name="op_amount" type="number"  required class="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Amount">
                    </div>
                </div>

                <div>
                    <button type="submit" class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <!-- Heroicon name: mini/lock-closed -->

          </span>
                        Next
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript">

        window.onload = function() {
            Livewire.on('token_create',() => {

                //You can bind the Layer.checkout initialization script to a button click event.
//Binding inside a click event open Layer payment page on click of a button
                Layer.checkout({
                        token: "@js($op_id)",
                        accesskey: "@js($apiKey)" ,
                        theme: {
                            logo : "https://open-logo.png",
                            color: "#3d9080",
                            error_color : "#ff2b2b"
                        }
                    },

                    function(response) {

                        if (response.status == "captured") {
                            // response.payment_token_id
                            // response.payment_id
                            window.location.href = "success_redirect_url";

                        } else if (response.status == "created") {


                        } else if (response.status == "pending") {


                        } else if (response.status == "failed") {
                            window.location.href = "failure_redirect_url";

                        } else if (response.status == "cancelled") {
                            window.location.href = "cancel_redirect_url";
                        }
                    },
                    function(err) {
                        //integration errors
                    }
                );
            })
        }

    </script>
</div>

`

Above is my blade.php view file

I am pretty sure you can just pass it like any blade variable:

token: "{{$op_id}}",
accesskey: "{{$apiKey}}" ,
theme: {
logo : "https://open-logo.png",
color: "#3d9080",
error_color : "#ff2b2b"