How to add custom JS to just the checkout page?

I found this tutorial, but as far as I can tell it will add JS to the entire site.

2 Answers 2


The recommended way to add js is with requireJS ! as it is explained in Magento DevDocs

  1. app/design/frontend/Vendor/theme-name/Magento_Checkout/web/js/myfile.js

    your js functions goes here exemple :

    define(['jquery'], function($){
        "use strict";
        return function hello()
            alert('Bonjour Amir');
  2. app/design/frontend/Vendor/theme-name/requirejs-config.js

    var config = {
        map: {
            '*': {
                checkoutjs: 'Magento_Checkout/js/myfile'
  3. app/design/frontend/Vendor/theme-name/Magento_Checkout/templates/onepage.phtml

    Here we call our js function otherwise, the js will not be loaded !

    <script type="text/javascript">
        require(['jquery', 'checkoutjs'], function($, hello) {
    • Clean all this folder contents pub/static except .htaccess
    • Clean all this folder contents var/view_preprocessed
    • Clean all this folder contents var/cache
    • Deploy the static-content: php bin/magento setup:static-content:deploy -f
  • Thank you, will try this out later! Is it possible to do it through a module or is it recommended to use a theme? Commented Mar 4, 2018 at 12:46
  • 1
    it is possible for the both, in your case you just want to call a js in your template, so I think it's not worth it to rewrite the module for that !
    – PЯINCƎ
    Commented Mar 4, 2018 at 12:49
  • Hmm, the JS deploys, but no HTML elements load at all (i.e the checkout is blank). Am I doing something wrong? Commented Mar 5, 2018 at 21:35
  • I don't know what exactly you did but i tested it and it works, recheck you code step by step
    – PЯINCƎ
    Commented Mar 5, 2018 at 21:37
  • 1
    Oh, I had to copy the original onepage.phtml to my theme right? Commented Mar 6, 2018 at 14:30

I don't know if this is the best way, but this is how I did it:

Create a checkout_index_index.xml in app\code\vendor\module\view\frontend\layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <!-- Add local resources -->
        <script src="vendor_module::js/checkout.js"/>

Then you can put your JS checkout.js in: app\code\vendor\module\view\frontend\web\js

  • 2
    This is not the recommended way to add a js file in Magento 2, look at the console of your browser, you will definitely have errors or breaks some functions, you should use requireJS
    – PЯINCƎ
    Commented Mar 4, 2018 at 10:26
  • @Prince Yeah, I read it's not recommended, but it seems so straightforward. I don't get any errors. I am aware of data-mage-init and x-magento-init but I haven't been able to implement it successfully for the checkout. I would appreciate you help;) Commented Mar 4, 2018 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.