Filament•4mo ago

External js on just one dialog

My payment processor has custom js to send card# directly to them & bypass my backend. I don't need their js throughout my app, so it doesn't seem like assets#registering-script-data is quite right for me. Furthermore, the script tag to load their js requires an api-key attribute - maybe I need a custom layout? Thanks in advance!

Solution:

got the tag working by adapting a snippet from the alpine docs. ``` <div x-data="{ init() { const head = document.getElementsByTagName('head')[0]...

Jump to solution

2 Replies

lukeviOP•4mo ago

looks like I just needed to read the docs more thoroughly re loading the file, ~~and then take a lucky guess on passing the attribute:~~

    <div x-data
        x-load-js="[@js('https://the-vendor.js')]"
        data-api-key="{{ config('the-api-key') }}"

    <div x-data
        x-load-js="[@js('https://the-vendor.js')]"
        data-api-key="{{ config('the-api-key') }}"

edit: that guess wasn't so lucky - the resulting <script> tag did not end up with the necessary attribute

Solution

lukevi•4mo ago

got the tag working by adapting a snippet from the alpine docs.

<div x-data="{
    init() {
        const head = document.getElementsByTagName('head')[0]

        // add script
        const newScript = document.createElement('script')
        newScript.src = 'https://the-vendor.js'
        newScript.setAttribute('data-api-key', '{{ config('the-api-key') }}')
        head.appendChild(newScript)
    }
}">

<div x-data="{
    init() {
        const head = document.getElementsByTagName('head')[0]

        // add script
        const newScript = document.createElement('script')
        newScript.src = 'https://the-vendor.js'
        newScript.setAttribute('data-api-key', '{{ config('the-api-key') }}')
        head.appendChild(newScript)
    }
}">

Gaming

Programming

External js on just one dialog