2

I have a custom payment method which has a field. But I can't pass this field value to additional_data when submitting this payment. Here is code:

.../app/code/Test/Custompayment/view/frontend/web/js/view/payment/method-renderer.js

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/payment/renderer-list'
],
function (
    Component,
    rendererList
) {
    'use strict';
    rendererList.push(
        {
            type: 'custompayment',
            component: 'Test_Custompayment/js/view/payment/method-renderer/custompayment'
        }
    );
    return Component.extend({
        getData: function() {
            return {
                'method': this.item.method,
                'additional_data': {
                    'test': this.test()
                }
            };
        }
    });
}
);

.../app/code/Test/Custompayment/view/frontend/web/js/view/payment/method-renderer/custompayment.js

define(
[
    'Magento_Checkout/js/view/payment/default'
],
function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Test_Custompayment/payment/custompayment'
        }
    });
}
);

.../app/code/Test/Custompayment/view/frontend/web/template/payment/custompayment.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>

    <form class="form" data-bind="attr: {'id': getCode() + '-form'}">
        <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
            <label for="custompayment_test">CC email(s)</label><input type="text" name="payment[test]" data-bind="attr: {'id': getCode()+'_test'}">
        </fieldset>
    </form>

    <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="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>
</div>

...app/code/Test/Custompayment/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="custompayment" xsi:type="array">
                                                                <item name="component" xsi:type="string">Sellry_Custompayment/js/view/payment/method-renderer</item>
                                                                <item name="methods" xsi:type="array">
                                                                    <item name="custompayment" 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>

.../app/code/Test/Custompayment/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
    <payment>
        <custompayment>
            <model>Test\Custompayment\Model\PaymentMethod</model>
            <active>1</active>
            <title>Custom PO</title>
            <order_status>pending</order_status><!-- set default order status-->
        </custompayment>
    </payment>
</default>

Any idea what I missing? Thanks

1 Answer 1

1

add method getData() to your js method renderer payment/method-renderer/custompayment.js:

getData: function () {
    var data = {
        method: this.getCode(),
        additional_data: {
            myField: $('#myFieldId').val()
        }
    };

    return data;
}

then you should create observer PaymentAdditionalDataAssignObserver to assign this data to payment additional information:

namespace Test\Custompayment\Observer;

use Magento\Framework\Event\Observer;
use Magento\Quote\Api\Data\PaymentInterface;
use Magento\Payment\Observer\AbstractDataAssignObserver;

class PaymentAdditionalDataAssignObserver extends AbstractDataAssignObserver
{
    const MY_FIELD_NAME_INDEX = 'myField';

    /**
     * @param Observer $observer
     * @return void
     */
    public function execute(Observer $observer)
    {
        $data = $this->readDataArgument($observer);

        $additionalData = $data->getData(PaymentInterface::KEY_ADDITIONAL_DATA);
        if (!is_array($additionalData) || !isset($additionalData[self::MY_FIELD_NAME_INDEX])) {
            return; // or throw exception depending on your logic
        }

        $paymentInfo = $this->readPaymentModelArgument($observer);
        $paymentInfo->setAdditionalInformation(
            self::MY_FIELD_NAME_INDEX,
            $additionalData[self::MY_FIELD_NAME_INDEX]
        );
    }
}

and then describe this observer in your etc/events.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="payment_method_assign_data_custompayment">
        <observer name="custompayment_payment_data_assign"
                  instance="Test\Custompayment\Observer\PaymentAdditionalDataAssignObserver" />
    </event>
</config>

I haven't tested it so there may be some typos.

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.