2

I am try to create one custom payment module.

i want to show some options in drop down list during my payment selection.

and also i want to validate that drop down box before placing the order.

how to achieve this and how to add a custom block to my payment option.

Thanks in advance

Here is my stuff

<item name="testpayment" xsi:type="array">
<item name="component" xsi:type="string">vendor_payment/js/view/payment/testpayment</item>
<item name="methods" xsi:type="array">
<item name="testpayment" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>`

Component file is
`define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'testpayment',
                component: 'vendor_payment/js/view/payment/method-renderer/payment-method'
            }
        );
        return Component.extend({});
    }
);

method render js file is

define(
    [
        'jquery',
        'Magento_Checkout/js/view/payment/default',
        'Magento_Checkout/js/model/full-screen-loader',
        'mage/url'
    ],
    function ($,Component,fullScreenLoader,url) {
        'use strict';
        return Component.extend({
            redirectAfterPlaceOrder: false,
            defaults: {
                template: 'vendor_payment/payment/templatename'
            },            
            getMailingAddress: function() {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },
            isActive: function() {
                return true;
            },          
        });
    }
);

My template file is,

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>
    <div class="payment-method-content"> 
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
      <div class="control">
            <div class="fields group group-2">
               <label>Please choose your deposit percentage:</label>
                    <div class="control">
                        <select name="custom_field"></select>
                    </div>
            </div>
        </div>
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')},
                        css: {disabled: !isPlaceOrderActionAllowed()},
                        enable: (getCode() == isChecked())
                        "
                       disabled>
                    <span data-bind="text: $t('Place order')"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Now how to add dynamic values in "custom_field" select box. or its any possible to include .phtml file directly to that place?

1

For example, I have inserted customer data here and I validating if customer data is available Place Order button will appear in payment block and the message should be displayed otherwise it will not appear.

The same way you can do your stuff.

isDisplayed is the custom method in .js file and <!-- ko if: isDisplayed() --> and <!-- /ko --> is the function to validate in .html file.

method render js file is

define(
        [
            'jquery',
            'Magento_Checkout/js/view/payment/default',
            'Magento_Checkout/js/model/full-screen-loader',
            'Magento_Customer/js/customer-data',
            'mage/url'
        ],
        function ($,Component,fullScreenLoader, customer, url) {
            'use strict';

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

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

            return Component.extend({
                redirectAfterPlaceOrder: false,
                customerData: customerData,
                defaults: {
                    template: 'vendor_payment/payment/templatename'
                },            
                getMailingAddress: function() {
                    return window.checkoutConfig.payment.checkmo.mailingAddress;
                },
                isActive: function() {
                    return true;
                },
                isDisplayed:function () {
                    console.log(customerData.firstname);
                    if(customerData != null){
                        $('#custom_message').text('Custom Message');
                        return true;
                    }else{
                        return false;
                    }
                }           
            });
        }
    );

template file is,

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>
    <div class="payment-method-content"> 
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
      <div class="control">
            <div class="fields group group-2">
             <p id="custom_message" style="font-weight: bold;"></p>
               <label>Please choose your deposit percentage:</label>
                    <div class="control">
                        <select name="custom_field"></select>
                    </div>
            </div>
        </div>
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <!-- ko if: isDisplayed() -->
                    <button class="action primary checkout"
                            type="submit"
                            data-bind="
                            click: placeOrder,
                            attr: {title: $t('Place Order')},
                            css: {disabled: !isPlaceOrderActionAllowed()},
                            enable: (getCode() == isChecked())
                            "
                           disabled>
                        <span data-bind="text: $t('Place order')"></span>
                    </button>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

for more info see this thread. feel free to ask if any queries.

  • Hi thanks for your response. actually i did that. and my payment gateway was showing on that page also. but i need to add some dynamic select field on that page. so for dynamic if i use ".phtml" file then its easy for me do my stuff. but unfortunately i dont know how to implement that file into that place. please help me :( – kalidass678 Jan 6 '17 at 5:42
  • @kalidass678 update your thread with your code, it will help to suggest you on your requirement. – Bojjaiah Jan 6 '17 at 5:46
  • i have updated the my code please check that. thanks in advance – kalidass678 Jan 6 '17 at 6:13
  • @kalidass678 see my answer updated. – Bojjaiah Jan 6 '17 at 6:33
  • Hi thanks your answer is helps me for do my stuff other way. :) – kalidass678 Jan 6 '17 at 6:48

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.