I want to extend the JS component: Magento_Checkout/js/view/payment/default.js.
I need to have a custom version of this component which uses an instance of MyCompany_CustomCheckout/js/action/place-order instead of Magento_Checkout/js/action/place-order for placeOrderAction.
How can I do this?

The code for the original Magento_Checkout/js/view/payment/default.js is:

    function (
    ) {
        'use strict';

        return Component.extend({
            ... doing something with 'placeOrderAction' ...

If you want override the functionality sort of like rewrite in backend, you can achieve it with following code in your requirejs:

var config = {
    map: {
         '*': {
                'Magento_Checkout/js/action/place-order': 'MyCompany_CustomCheckout/js/action/place-order',

But best practice would be to use mixin, where you extend instead of overwrite the original functionality. Also in requirejs:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/place-order': {
                'My_Module/js/action/place-order-mixin': true

In both scenarios your code will be used.

  • Thanks for the answer. I only need to override it for one of my components, but need to keep the rest of components as before. Doesn't your solution override it for all of the JS Components? Feb 3 '17 at 10:35
  • Ok, well normally then i would replace the instantiation of the script i'm replacing with <script type="text/x-magento-init" /> inside the phtml-template, but checkout module is a different animal :)
    – belfort1
    Feb 4 '17 at 9:41
  • Thanks for the answer though! Feb 5 '17 at 19:34

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.