I created a custom step login in checkout which being my first step I used the below mixins:

In requirejs-config.js:

var config = {
'config': {
    'mixins': {
        'Magento_Checkout/js/view/shipping': {
            'MyVendor_Customcheckout/js/view/shipping-payment-mixin': true
        'Magento_Checkout/js/view/payment': {
            'MyVendor_Customcheckout/js/view/shipping-payment-mixin': true

and in shipping-payment-mixin.js:

 function (ko) {
 'use strict';

var mixin = {

    initialize: function () {

// this.isVisible variable is used by Magento_Checkout/js/view/payment. this variable is missing from the sample code.
        this.isVisible = ko.observable(false);

// this.visible variable is used by Magento_Checkout/js/view/shipment.
        this.visible = ko.observable(false);
        return this;

return function (target) {
    return target.extend(mixin);

Now I created another step say scheduling which is an additional step between shipping and payment.

I haven't created any mixin for this yet but on page load, my shipping and scheduling form shows on the same page.

Is it an issue related to mixin? Or is it some other issue? How do I create a mixin for this?

Your Answer

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

Browse other questions tagged or ask your own question.