1

I have implemented the custom Payment Method which is Payment Terms and it's working fine. Here I'm showing the text under Payment Terms payment method which is populated from the controller, and it's returning the value also.

When I'm debugging the page it's showing values at the same time returning text also showing in payment method, If not debugging it's showing undefined text.

See my screenshots.

If not debugging undefined text showing here.

enter image description here

If debugging values are returning and showing value also see below.

enter image description here

enter image description here

For the above stuff, I have written below code.

ABCSolutions/PaymentTerms/view/frontend/web/js/view/payment/method-renderer/paymentterms-method.js

/*browser:true*/
/*global define*/
define(
    [
        'Magento_Checkout/js/view/payment/default',
        'Magento_Customer/js/customer-data',
        'Magento_Checkout/js/model/quote',
        'jquery',
        'ko'
    ],
    function (Component, customer, quote, $, ko) {
        'use strict';

        var Payment;
        var isLoggedIn = ko.observable(window.isCustomerLoggedIn),
            customerData = {};

        if (isLoggedIn()) {
            customerData = window.customerData;
            //console.log(customerData);
        } else {
            customerData = {};
        }

        return Component.extend({
            customerData: customerData,
            customerDetails: {

            },
            defaults: {
                template: 'ABCSolutions_PaymentTerms/payment/paymentterms'
            },

            /** Returns send check to info */
            getMailingAddress: function() {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },

            isDisplayed:function () {

                //console.log(customerData.id);
                var customAttributes = customerData.custom_attributes;
                //console.log(customAttributes);
                var payment_terms_Attribute = customAttributes.payment_terms;
                //console.log(payment_terms_Attribute);
                var paymentTerms = payment_terms_Attribute.value;
                Payment = this.getPaymentTermsCode(customerData.id);

                var availableLimit = "An invoice will be sent to your registered address [ " + Payment + " ]";


                if(paymentTerms != "" && paymentTerms != null){
                    $('#custom_payment_content').text(availableLimit);
                    return true;
                }else{
                    $('#custom_payment_content').text('');
                    return false;
                }
            },

            getPaymentTermsCode:function(parentCustomerId){
                jQuery.post('http://192.168.10.144/abccompany/paymentterms/index/payment', {'parentCustomerId': parentCustomerId}, function(data) {
                    Payment = data;
                });
                return Payment;
            }

        });
    }
);

Controller

<?php
namespace ABCSolutions\PaymentTerms\Controller\Index;

class Payment extends \Magento\Framework\App\Action\Action
{
    /**
     * @var \Magento\Framework\View\Result\PageFactory
     */
    protected $resultPageFactory;

    /**
     * @param \Magento\Framework\App\Action\Context $context
     * @param \Magento\Framework\View\Result\PageFactory resultPageFactory
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    )
    {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {
        $res = "Payment Terms ";
        $res .= $this->getRequest()->getParam('parentCustomerId');
        echo $res;
    }
}

Please suggest me why it is not updating, without debugging?

Anything I went wrong?

1

Finally achieved my self.

paymentterms-method.js adding method.

/* declaring the variable */
PaymentList: ko.observableArray([]),

    getPayTerms:function(){
                    var self = this;
                    var serviceUrl = urlBuilder.build('paymentterms/index/payment?parentCustomerId=' + customerData.id);
                    return storage.post(
                            serviceUrl,
                            ''
                        ).done(
                        function (response) {
                            self.PaymentList.push(JSON.parse(response));
                        }
                    ).fail(
                        function (response) {
                            alert(response);
                        }
                    );
                }

paymentterms.html

<!-- ko if: getPayTerms() -->
        <div id="custom_payment_content_section1" data-bind="foreach: PaymentList">
            <p id="custom_payment_content1" data-bind="text: PaymentTerms" style="color:#0092cc;font-weight: bold;" class="custom_payment_content1"></p>
        </div>
        <!-- /ko -->

Controller.php file

/**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {
        $TData = [  ];
        $TData['PaymentTerms'] .= "Payment Terms " . $this->getRequest()->getParam('parentCustomerId');
        echo json_encode($TData);
    }
0

Problem lies in

getPaymentTermsCode:function(parentCustomerId) {
            jQuery.post('http://192.168.10.144/abccompany/paymentterms/index/payment', {'parentCustomerId': parentCustomerId}, function(data) {
                Payment = data;
            });
            return Payment;
        }

You are calling async ajax request with callback but the data passed to callback are not yet ready. I mean, you must wait for the proper response. Instead of calling callback that way either use promise or do something like:

var Payment = ko.observable('');
getPaymentTermsCode:function(parentCustomerId) {
  jQuery.post(url, {'parentCustomerId': parentCustomerId}).success(function(response) {
    Payment(response);    
  });
}

Here is more about $.POST: https://api.jquery.com/jquery.post/ Pay attention if you are actually calling asynchronous action or not.

  • Thanks for posting the answer, it's throwing error Payment is not a function. – Bojjaiah Nov 15 '17 at 7:37
  • var Payment = ko.observable(''); You have to declare payment as an ko observable. I am sure you did not. – Bartosz Herba Nov 15 '17 at 7:46
  • It's printing the text inside of the function, If I tried to print outside of the function it's not working. – Bojjaiah Nov 15 '17 at 9:25

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.