Below is my payment-method.js

    function ($, Component, quote) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'NameSpace_CustomPayment/payment/testpayment'

            placeOrder: function () {


            getMailingAddress: function() {
                return window.checkoutConfig.payment.checkmo.mailingAddress;

How can I post data of my quote object to third party.

Below is the sample Image to elaborate my query: Payment Description

1 Answer 1


Transfer data from the payment method form at checkout to the backend (order)

You can store additional data in the additional_data section of the payment, like this (in my case, I add this data in the method getData of my own payment method):

     * @return {Object}
    getData: function () {
        let self = this;

        return {
            method: this.item.method,
            'additional_data': {
                'sender': self.sender(),
                'transaction_id': self.transaction_id(),
                'amount': self.amount(),
                'fee': self.fee(),
                'timestamp': self.timestamp(),

then on the backend you can get this data this way:

/** @var \Magento\Payment\Model\MethodInterface $method */

The method instance could be accessible from the quote or the order object:

/** @var \Magento\Sales\Model\Order $order */
$additionalInfoFromPayment = $order->getPayment()->getData('additional_information');

which returns your data from the checkout. Here mine example with data which I transferred from the checkout to the backend:

Data example

Transfer data from the backend to the js-payment method component

If you wish to transfer data from the backend to the payment method on the checkout the preferred way to do this is a use of the checkout config. Magento provides a simple way to do this:

  1. Create your own checkout config provider class:

     * Copyright © MageWorx. All rights reserved.
     * See LICENSE.txt for license details.
    namespace MageWorx\WavesPayment\Model;
    use Magento\Checkout\Model\ConfigProviderInterface;
    class WavesCheckoutConfigProvider implements ConfigProviderInterface
         * @var \MageWorx\WavesPayment\Helper\Data
        private $helper;
         * @var \MageWorx\WavesPayment\Helper\Rate
        private $helperRate;
         * WavesCheckoutConfigProvider constructor.
         * @param \MageWorx\WavesPayment\Helper\Data $helper
         * @param \MageWorx\WavesPayment\Helper\Rate $helperRate
        public function __construct(
            \MageWorx\WavesPayment\Helper\Data $helper,
            \MageWorx\WavesPayment\Helper\Rate $helperRate
        ) {
            $this->helper = $helper;
            $this->helperRate = $helperRate;
         * Retrieve assoc array of checkout configuration
         * @return array
         * @throws \Exception
        public function getConfig()
            $output = [];
            if ($this->helper->isEnabled()) {
                // If method is not available - we do not display it on the checkout.
                // @see MageWorx/WavesPayment/view/frontend/web/js/view/payment/waves-payments.js
                try {
                    $output['mageworx']['waves']['conversion_rate']   = $this->helperRate->getCurrentConversionRate();
                    $output['mageworx']['waves']['recipient_address'] = $this->helper->getRecipientAddress();
                    $output['mageworx']['waves']['available'] = true;
                } catch (\Exception $e) {
                    $output['mageworx']['waves']['available'] = false;
            } else {
                $output['mageworx']['waves']['available'] = false;
            return $output;
  2. Add this class to the configProviders of the Magento\Checkout\Model\CompositeConfigProvider using the frontend/di.xml:

    <?xml version="1.0"?>
     * Copyright © MageWorx. All rights reserved.
     * See LICENSE.txt for license details.
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        <type name="Magento\Checkout\Model\CompositeConfigProvider">
                <argument name="configProviders" xsi:type="array">
                    <item name="mageworx_waves_payment_config_provider" xsi:type="object">MageWorx\WavesPayment\Model\WavesCheckoutConfigProvider</item>
  3. Now you can access your info in the js component of your method using window.checkoutConfig.mageworx.waves.available (same path as in the config array)

  • Can you mention how can I use self instance here?
    Mar 21, 2018 at 5:55
  • @DEEPJOSHI I updated my answer, if you have any questions, you can ask for clarification. Mar 22, 2018 at 9:32
  • Thank you for the details Can you elaborate more about how can I get data in Helper(Backend) what are the classes I need to include in helper? Or what will be the structure of Helper?
    Mar 22, 2018 at 14:02
  • @DEEPJOSHI Inject the \Magento\Sales\Api\OrderRepositoryInterface, get your order by id using the $orderRepository->get($id) method, then you can access your data from the checkout like in my example: $yourData = $order->getPayment()->getData('additional_information'); Mar 22, 2018 at 14:05
  • I need to fetch data before order is placed, so here I guess there will be no order generated. Also can I implement same using Observer DataAssignObserver
    Mar 22, 2018 at 14:20

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.