Magento 2 – Payment Methods Missing on Custom Checkout Module

magento2onepage-checkout

I'm modifying all Magento 2 to accept login with mobile phone instead of email. Register, login, account info, backend, login at checkout, everything is going well.

But when I use my own checkout_index_index.xml instead of the core one, the object which stores the list of renders of each payment method (rendererList) is not filled in.

In the moment of the checkout, using the original checkout_index_index.xml I got this when I debug list.js:

rendered list in the beginning >> 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] list.js:30

Using my checkout_index_index.xml:

rendered list in the beginning >> 
[] list.js:30

The object with the payment methods in both situations:

[Object, Object, Object, Object]
0: Object
method: "paypal_express"
title: "PayPal Express Checkout"
__proto__: Object
1: Object
method: "purchaseorder"
title: "Purchase Order"
__proto__: Object
2: Object
method: "checkmo"
title: "Check / Money order"
__proto__: Object
3: Object
method: "free"
title: "No Payment Information Required"
__proto__: Object
length: 4
__proto__: Array[0]

So, the rendererList used in list.js to render each payment method for my custom module is empty. I spend a whole day trying to find where does this object is filled in without success.

I must say I'm editing checkout_index_index.xml to use my own js files on checkout steps like this:

<item name="component" xsi:type="string">Tmo_Checkout/js/view/shipping</item>
     <item name="provider" xsi:type="string">checkoutProvider</item>
     <item name="sortOrder" xsi:type="string">1</item>
     <item name="children" xsi:type="array">
           <item name="customer-email" xsi:type="array">
                <item name="component" xsi:type="string">Tmo_Checkout/js/view/form/element/username</item>
                <item name="displayArea" xsi:type="string">customer-email</item>
                <item name="tooltip" xsi:type="array">
                      <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                </item>
                <item name="children" xsi:type="array">
                      <item name="before-login-form" xsi:type="array">
                      <item name="component" xsi:type="string">uiComponent</item>
                      <item name="displayArea" xsi:type="string">before-login-form</item>
                      <item name="children" xsi:type="array">
                            <!-- before login form fields -->
                      </item>
               </item>
               <item name="additional-login-form-fields" xsi:type="array">
                   <item name="component" xsi:type="string">uiComponent</item>
                   <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                   <item name="children" xsi:type="array">
                      <!-- additional login form fields -->
               </item>
          </item>
     </item>
</item>

Finally, the questions are: how do I fill that rendererList?? or where Magento does it?? or how can I specify custom js files for checkout without touching checkout_index_index.xml?? Thanks in advance!

Best Answer

The rendererList is observable JavaScript array provided by the Magento_Checkout/js/model/payment/renderer-list component.

In order to use rendererList in custom payment module the following should be done:

Create in your module view/frontend/layout/checkout_index_index.xml file and declare new payment renderer component (adding as an image to give an idea):

Create the Custom_Payment/js/view/payment/custom_payment.js component and add rendererList component as a dependency. It will allow you to add custom payment renderer into rendererList array:

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'custom_payment',
                component: 'Custom_Payment/js/view/payment/method-renderer/custom-payment-renderer'
            }
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

Create Custom_Payment/js/view/payment/method-renderer/custom-payment-renderer component and assign template to render custom payment:

define(
    [
        'jquery',
        'Magento_Payment/js/view/payment/iframe',
        'Magento_Checkout/js/action/set-payment-information'
    ],
    function ($, Component, setPaymentInformationAction) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Custom_Payment/payment/custom-payment'
            },
            ...
        });
    }
);

Finally, create Custom_Payment/view/frontend/web/template/payment/custom-payment.html template to have custom payment form.

All Core Payment modules modifies rendererList in the way described above.

I hope answer gives you an idea how rendererList is filled with payment methods.

It is recommended to add custom js files via checkout_index_index.xml. This has to be done very carefully, respecting nested levels of jsLayout component.

Let me know if you still have questions.

Related Solutions

Magento – Checkout saveBilling generates error due to extractData method not working properly

After spending lot of time, I got solution for this. If data is not getting from the extractData, you can set the value again for the firstname, lastname, email in app\code\core\Mage\Checkout\Model\Type\Onepage.php. You can copy paste Onepage.php to your local folder add the below lines look like below code.

$customer->setEmail($data['email']); $customer->setFirstname($data['firstname']); $customer->setLastname($data['lastname']);

    if ($quote->getCheckoutMethod() == self::METHOD_REGISTER) {
        // set customer password
        $customer->setPassword($customerRequest->getParam('customer_password'));
        $customer->setPasswordConfirmation($customerRequest->getParam('confirm_password'));
    } else {
        // spoof customer password for guest
        $customer->setEmail($data['email']); //email
        $customer->setFirstname($data['firstname']); //firstname
        $customer->setLastname($data['lastname']); //lastname
        $password = $customer->generatePassword();
        $customer->setPassword($password);
        $customer->setPasswordConfirmation($password);
        // set NOT LOGGED IN group id explicitly,
        // otherwise copyFieldset('customer_account', 'to_quote') will fill it with default group id value
        $customer->setGroupId(Mage_Customer_Model_Group::NOT_LOGGED_IN_ID);
    }

    $result = $customer->validate();`

I hope it will work fine and it will be helpfull for someone.

Magento – How to add a custom form in a custom payment method

app/code/Ktpl/Ordercomment/etc/frontned/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="sr_add_custom_field"
                type="Ktpl\Ordercomment\Plugin\Checkout\Model\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

app/code/Ktpl/Ordercomment/Plugin/Checkout/Model/Checkout/LayoutProcessor.php

<?php
namespace Ktpl\Ordercomment\Plugin\Checkout\Model\Checkout;

class LayoutProcessor
{
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ){
        $jsLayout = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'customCheckoutForm',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
            ],
            'provider' => 'checkoutProvider',
            'dataScope' => 'customCheckoutForm.text_field',
            'label' => 'Text Field',
            'sortOrder' => 1,
            'validation' => [
                'required-entry' => true,
            ],
        ];

        return $jsLayout;
    }
}

app/code/Ktpl/Ordercomment/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="custom-checkout-form-container" xsi:type="array">
                                            <item name="component" xsi:type="string">Ktpl_Ordercomment/js/view/ordercomment</item>
                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <item name="custom-checkout-form-fieldset" xsi:type="array">

                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                    <!-- the following display area is used in template (see below) -->
                                                    <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="text_field" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                            <item name="config" xsi:type="array">
                                                                <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                                                                <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                <item name="template" xsi:type="string">ui/form/field</item>
                                                                <item name="elementTmpl" xsi:type="string">ui/form/element/textarea</item>
                                                            </item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                            <item name="dataScope" xsi:type="string">customCheckoutForm.ordercomment</item>
                                                            <item name="label" xsi:type="string">Order Comment</item>
                                                            <item name="sortOrder" xsi:type="string">1</item>
                                                            <item name="validation" xsi:type="array">
                                                                <item name="required-entry" xsi:type="string">true</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>

                                        </item>

                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Ktpl/Ordercomment/view/frontend/web/js/view/ordercomment.js

define(
    [
        'ko',
        'Magento_Ui/js/form/form',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
         *
         * mystep - is the name of the component's .html template,
         * my_module - is the name of the your module directory.
         *
         */
        return Component.extend({
            defaults: {
                template: 'Ktpl_Ordercomment/ordercomment'
            },

            //add here your logic to display step,
            isVisible: ko.observable(false),


            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'custom-checkout-form-container',
                    //step alias
                    'custom-checkout-form-container',
                    //step title value
                    'Order Comment',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * sort order value
                     * 'sort order value' < 10: step displays before shipping step;
                     * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                     * 'sort order value' > 20 : step displays after payment step
                     */
                    15
                );
                return this;
            },

            /**
             * The navigate() method is responsible for navigation between checkout step
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             */
            navigate: function () {
                var self = this;
                //getPaymentInformation().done(function () {
                    self.isVisible(true);
                //});
            },

            navigateToNextStep: function () {

                this.source.set('params.invalid', false);
                this.source.trigger('customCheckoutForm.data.validate');
                if (!this.source.get('params.invalid')) {
                    var formData = this.source.get('customCheckoutForm');
                    // do something with form data
                    console.dir(formData);
                }
                //stepNavigator.next();
            }
        });
    }
);

app/code/Ktpl/Ordercomment/view/frontend/web/template/ordercomment.html

<li id="custom-checkout-form" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Order Comment'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form name="customCheckoutForm" id="customCheckoutForm" class="form" data-bind="submit: navigateToNextStep" ><!---->
            <fieldset class="fieldset">
                <legend data-bind="i18n: '  '"></legend>
                <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </fieldset>
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>

        </form>

    </div>
</li>

this worked for me you can try this

Best Answer

Related Solutions

Magento – Checkout saveBilling generates error due to extractData method not working properly

Magento – How to add a custom form in a custom payment method

Related Topic