# JavaScript compatibility

**Because the Loki Checkout supports both Hyvä Themes and Luma themes, as a module developer, you will need to aim for compatility with both as well. You could actually use Tailwind classes within the Luma-based Loki Checkout as well - the `LokiCheckout_Luma` module uses it too.**

However, when it comes to JavaScript, it is often required with Luma to load the JavaScript via RequireJS. To support both themes with different templates, we can use the `hyva_` layout prefix that Hyvä Themes provide. For instance, you could create a PHTML template for Luma with a default handle `loki_checkout.xml` and then rewrite the PHTML template to Hyvä with another layout file `hyva_loki_checkout.xml`.

File `hyva_loki_checkout.xml`:
```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock
            name="loki.checkout.payment.methods.foobar.form"
            template="Yireo_Example::hyva/method/foobar.phtml"/>
    </body>
</page>
```

Within Hyvä, you can often load JavaScript in the following way:
```html
<script>
    (() => {
        // Do your magic
    })();
</script>
```

With Luma, this might need to be wrapped with RequireJS:
```html
<script>
    require([], function () {
        // Do your magic
    });
</script>
```
