Skip to content

Move scripts to the initially loaded page content

Hyvä Checkout uses Magewire to communicate with the server, which includes dynamic loading of components within the page.
These components can include scripts. Without strict CSP, they would be evaluated after being injected into the page. However, evaluation is forbidden by strict CSP. Therefore, all <script> tags must be present in the page source when initially loaded.

Multistep checkout

For multistep checkouts, even though only one step at a time is visible, all scripts used on any step must be loaded with the initial page.

Separating inline scripts from Magewire components

Having the script in a component template is convenient, but it isn't possible with strict CSP.
For example, let's take a Hyvä Checkout component and extract the JavaScript from the component template into a separate file.

The script must be loaded as part of the initial page. Magewire will update the component DOM without injecting the inline script to the page after the initial page load.

Example: Refactoring the payment method list

Original: Combined component and script

In the non-CSP version of the component, the inline script is included in the component template.
The following is an excerpt of the file before refactoring:

Hyva_Checkout::checkout/payment/method-list.phtml 

?>
<div id="payment-methods">
    <?php if ($methods): ?>
        <script>
            window.addEventListener('checkout:step:loaded', () => {
                if ('<?= $escaper->escapeJs($magewire->method) ?>' && document.getElementById('payment-method-list')) {
                    window.dispatchEvent(new CustomEvent('checkout:payment:method-activate', { detail: { method: '<?= $escaper->escapeJs($magewire->method) ?>'} }))
                }
            }, { once: true })
        </script>

        <ol id="payment-method-list" class="space-y-4">
<?php

Step 1: Extract the script into a separate file

The code is copied into a new file method-list-activate.phtml and registered as an Alpine constructor function using Alpine.data.
Any method arguments must be passed using dataset attributes (the value is read with this.$el.dataset.method - see below in step 3 how it is specified in the HTML).

Finally, the script is authorized to be executed on the page by registering it with the $hyvaCsp view model.

Hyva_Checkout::checkout/payment/method-list-activate.phtml 

/** @var Hyva\Theme\ViewModel\HyvaCsp $hyvaCsp */
?>
<script>
    "use strict";

    function hyvaCheckoutPaymentMethodListActivate() {
        const method = this.$el.dataset.method;

        window.addEventListener('checkout:step:loaded', () => {
            if (method && document.getElementById('payment-method-list')) {
                window.dispatchEvent(
                    new CustomEvent(
                        'checkout:payment:method-activate',
                        {detail: {method: method}}
                    )
                )
            }
        }, { once: true })

        return {}
    }
    window.addEventListener(
        'alpine:init',
        () => Alpine.data('hyvaCheckoutPaymentMethodListActivate', hyvaCheckoutPaymentMethodListActivate),
        {once: true}
    )
</script>
<?php $hyvaCsp->registerInlineScript() ?>

Step 2: Include the script in the initial checkout page load

The script must be available in all steps of the checkout. This can be achieved by declaring the block for the template with the extracted script using the handle hyva_checkout.

layout/hyva_checkout.xml 

<!-- ... -->
<body>
    <!-- ... -->
    <!-- this container loads on every checkout page in the footer -->
    <referenceContainer name="magewire.plugin.scripts">
        <!-- add the script -->
        <block name="hyva-checkout.checkout.payment.method-list-activate"
               template="Hyva_Checkout::checkout/payment/method-list-activate.phtml"
        />
    </referenceContainer>
    <!-- ... -->
</body>

Step 3: Use Alpine to trigger the code

The final step is activating the Alpine component on the payment-method-list

Hyva_Checkout::checkout/payment/method-list.phtml 

?>
<div id="payment-methods">
    <?php if ($methods): ?>
        <?php /** script moved to Hyva_Checkout::checkout/payment/method-list-activate.phtml */ ?>
        <ol id="payment-method-list"
            x-data="hyvaCheckoutPaymentMethodListActivate" 
            data-method="<?= $escaper->escapeHtmlAttr($magewire->method) ?>"
            class="space-y-4">
<?php

Note how the method code is passed to the JavaScript with the data-method attribute.
Also note the $escaper method must be changed accordingly, from escapeJs() to escapeHtmlAttr().