1

I'm trying to implement a new payment method with Magento 2 , so i have implemented the below code to display the payment method as an option within payment methods list , however the issue is "onemethod.js" is not loading from "method.js" despite method.js loading successfully without issues , thank you in advance for the assistance .

test/test1/view/frontend/web/js/view/payment/method.js:

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/payment/renderer-list'
],
function (
    Component,
    rendererList
) {
    'use strict';

    var config = window.checkoutConfig.payment,
    testType = 'test';
    if(config[testType].isActive)
    {  
    rendererList.push(
        {
            type: testType,
            component: 'test_test1/js/view/payment/method-renderer/onemethod'
        }
    );
    }

    /** Add view logic here if needed */
    return Component.extend({});
}
);

test/test1/view/frontend/web/js/view/payment/method-renderer/onemethod.js:

define(
[

'jquery',
'Magento_Payment/js/view/payment/iframe',
'mage/translate'
],
function ($, Component, $t) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'test_test1/payment/method',
            timeoutMessage: $t('Sorry, but something went wrong. Please contact the seller.')
        },

        getCode: function() {
            return 'test';
        },

        isActive: function() {
            return window.checkoutConfig.payment.isActive;
        },

        getScript: function(){
            return window.checkoutConfig.payment.urlForm;
        },

        getAction: function(){
            return window.checkoutConfig.payment.redirect;
        },

        getPaymentMethod:function()
        {
            return window.checkoutConfig.payment.paymentmethod;
        }
    });
}
);

test/test1/view/frontend/web/template/payment/payment/method.html:

<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>
        <script type="text/javascript" data-bind="attr: {src: getScript()}">
        </script>
        <form class="paymentWidgets" data-bind="attr: {action: getAction(),data-brands: getPaymentMethod()}">
            <!-- ko template: --><!-- /ko -->
        </form>

        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>

test\test1\Model\Ui\ConfigProvider.php

<?php

namespace test\test1\Model\Ui;


use Magento\Checkout\Model\ConfigProviderInterface;
use test\test1\Gateway\Config\Config;
use test\test1\Model\Adapter\testAdapter;
class ConfigProvider implements ConfigProviderInterface
{
    const CODE = 'test';
    private $config;
    private $adapter;
    public function __construct(
        Config $config,
        testAdapter $adapter
    ) {
        $this->config = $config;
        $this->adapter = $adapter;
    }
    /**
     * Retrieve assoc array of checkout configuration
     *
     * @return array
     */
    public function getConfig()
    {
        return [
            'payment' => [
                self::CODE => [
                    'isActive' => $this->config->isActive(),
                    'redirect' => $this->config->getRedirectUrl(),
                    'paymentmethod' => $this->config->getPaymentMethod(),
                    'urlForm' => $this->adapter->makeReqCAP()
                ]
            ]
        ];
    }
}

test/test1/etc/frontend/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\Payment\Model\CcGenericConfigProvider"> <arguments> <argument name="methodCodes" xsi:type="array"> <item name="test" xsi:type="const">test\test1\Model\Ui\ConfigProvider::CODE</i‌​tem> </argument> </arguments> </type>    
<type name="Magento\Checkout\Model\CompositeConfigProvider"> <arguments> <argument name="configProviders" xsi:type="array"> <item name="test_test1_config_provider" xsi:type="object">test\test1\Model\Ui\ConfigProvider</item> </argument> </arguments> </type> </config> 

test/test1/view/frontend/layout/checkout_index_index.xml:

<?xml version="1.0"?>
<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="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                            <item name="children" xsi:type="array">
                                                                <item name="test" xsi:type="array">
                                                                    <item name="component" xsi:type="string">test_test1/js/view/payment/method</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="test" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

1 Answer 1

0

Here is complete guidance for custom payment display on front end. Please take this as reference . You have missed di.xml.

13
  • my di.xml in frontend <type name="Magento\Payment\Model\CcGenericConfigProvider"> <arguments> <argument name="methodCodes" xsi:type="array"> <item name="test" xsi:type="const">test\test1\Model\Ui\ConfigProvider::CODE</item> </argument> </arguments> </type>
    – Husam
    Commented Oct 31, 2017 at 14:46
  • <type name="Magento\Checkout\Model\CompositeConfigProvider"> <arguments> <argument name="configProviders" xsi:type="array"> <item name="test_test1_config_provider" xsi:type="object">test\test1\Model\Ui\ConfigProvider</item> </argument> </arguments> </type> </config>
    – Husam
    Commented Oct 31, 2017 at 14:48
  • it's seem that there is no error. right?
    – Husam
    Commented Oct 31, 2017 at 14:49
  • and this my configprovider const CODE = 'test'; public function getConfig() { return [ 'payment' => [ self::CODE => [ 'isActive' => $this->config->isActive(), 'redirect' => $this->config->getRedirectUrl(), 'paymentmethod' => $this->config->getPaymentMethod(), 'urlForm' => $this->adapter->makeReqCAP() ] ] ]; }
    – Husam
    Commented Oct 31, 2017 at 14:53
  • Please update question with this code.
    – Yogesh
    Commented Oct 31, 2017 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.