0

I have created a custom payment module, and when I click the Place Order button, I need it to run a set of custom javascript functions. To do this, how do I include a custom function from another javascript file into the /view/frontend/web/js/view/payment/ javascript file?

Submit Button:

<button
  data-role="review-save"
  type="submit"
  data-bind="
    attr: {title: $t('Place Order')},
    enable: (getCode() == isChecked()),
    click: processPayment, <--custom method-renderer function
    css: {disabled: !isPlaceOrderActionAllowed()}
  "
  class="action primary checkout"
  disabled
>
  <span data-bind="i18n: 'Place Order'"></span>
</button>

method-renderer function

define([
        'jquery',
        'Magento_Payment/js/view/payment/cc-form',
    ],
    function ($, Component) {
        'use strict';

        return Component.extend({
            defaults: {
                template: '<Module>/payment/<File>'
            },
            context: function() {
                return this;
            },
            getCode: function() {
                return '<Code>';
            },
            isActive: function() {
                return true;
            },
            processPayment() {
                authorizePayment(); <-- Custom Javascript Function from seperate file
            }
        });
    }
);

2 Answers 2

0

You can use that function in enable property of button.

<button
  data-role="review-save"
  type="submit"
  data-bind="
    attr: {title: $t('Place Order')},
    enable: (getCode() == isChecked() && isAuthorizePayment()),
    click: processPayment, <--custom method-renderer function
    css: {disabled: !isPlaceOrderActionAllowed()}
  "
  class="action primary checkout"
  disabled
>
  <span data-bind="i18n: 'Place Order'"></span>
</button>

Method Render function

define([
        'jquery',
        'Magento_Payment/js/view/payment/cc-form',
    ],
    function ($, Component) {
        'use strict';

        return Component.extend({
            defaults: {
                template: '<Module>/payment/<File>'
            },
            context: function() {
                return this;
            },
            getCode: function() {
                return '<Code>';
            },
            isActive: function() {
                return true;
            },
            isAuthorizePayment: function() { //Custom Javascript Function
                //custom code goes here. You can return boolean
            }
        });
    }
);
2
  • I should hvae been more specific. I want that function to be from an external javascript file that i have created.
    – MCattaneo
    Oct 19, 2021 at 21:27
  • I have updated my question to reflect what I originally intended
    – MCattaneo
    Oct 20, 2021 at 5:10
0

I have resolved what I was trying to do. This required the creation of a requirejs-config.js file showing :

var config = {
    map: {
        '*' : {
             <ScriptObjectName> : '<Vendor>_<Module>/js/<script-name>'
            }
    }
}

Then it has to be imported into the method-renderer file:

define([
        'jquery',
        'Magento_Payment/js/view/payment/cc-form',
        '<ScriptObjectName>'
    ],
    function ($, Component) {
        return Component.extend({
            placeOrder() {
                //Custom Script execution goes here
                return true;
            }
        });
    }
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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