Magento 2: How to show error inside payment method?

Question

I am using Magento 2.3.5 and i need to show the error message on checkout page inside the payment method component, how can achieve that?

Actually shows this way (Top of the page)

I want to to show that message inside the payment method because if the user scroll down, the message is not visible.

I notice that the messages are loaded via knockoutJs using this code inside onepage.html

<!-- ko foreach: getRegion('messages') -->
   <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

vendor/magento/module-checkout/view/frontend/web/template/onepage.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('estimation') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

<div class="opc-wrapper">
    <ol class="opc" id="checkoutSteps">
    <!-- ko foreach: getRegion('steps') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    </ol>
</div>



<!-- ko foreach: getRegion('sidebar') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

This is the html of the payment method

<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="payment-method kueski" 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">
            <img data-bind="attr: { src: getImage() }" alt="" id="logokueski">
            <span>Paga en quincenas, sin bancos, sin tarjetas.</span>
        </label>
        <p class="instructions">
            <b>Con Kueski Pay puedes:</b>
            <br/>
            <br/>
            <ul>
                <li>Adquirir tus productos, pagarlos después y diferirlos en quincenas.</li>
                <li>Elegir la duración del crédito que más te convenga.</li>
                <li>Personalizar tu tasa de interés.</li>
            </ul>
        </p>
    </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="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>

    <div class="kueski-placeholder"></div>
</div>

This code below is inside de html of the payment method, but isn't showing

 <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->

I tried to move the location of this code inside cart_index_index.xml with not success

<item name="errors" xsi:type="array">
  <item name="sortOrder" xsi:type="string">0</item>
    <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
     <item name="displayArea" xsi:type="string">messages</item>
</item>

Answer 1

You need to overwrite payment information for guests and login customers like below.

overwrite using preference or plugin and add your custom exceptional handling message. Function savePaymentInformationAndPlaceOrder in *vendor/magento/module-checkout/Model/PaymentInformationManagement.php*

or for Guest orders in *vendor/magento/module-checkout/Model/GuestPaymentInformationManagement.php*

public function savePaymentInformationAndPlaceOrder(
        $cartId,
        $email,
        \Magento\Quote\Api\Data\PaymentInterface $paymentMethod,
        \Magento\Quote\Api\Data\AddressInterface $billingAddress = null
    ) {
        $this->savePaymentInformation($cartId, $email, $paymentMethod, $billingAddress);
        try {
            $orderId = $this->cartManagement->placeOrder($cartId);
        } catch (\Exception $e) {
            throw new CouldNotSaveException(
                __('An error occurred on the server. Please try to place the order again.'),
                $e
            );
        }
        return $orderId;
    }