Skip to content

Add Custom Field to Braintree Credit Card Payment Method in Magento 2.4

I want to add the custom field i.e. po_number in the braintree credit card method in the payment page. Here is the code which I have added for field.

<?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="afterMethod" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="po_number" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Abc_PoNumber/js/checkout/poNumber</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                                    <item name="dataScope" xsi:type="string">checkoutcomments</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
 

The field is coming but it is appearing for all the payment methods, but I only needs to be in the credit card method.

Any Help is appreciated.