How to move Stored Payment Methods Component to Account Information Page

Question

I tried moving the Stored Payment Methods Block of the module vault (Original at) (vendor/magento/module-vault/view/frontend/templates/cards_list.phtml) to the Account Information Block of the module customer. (Original at) (vendor/magento/module-customer/view/frontend/templates/account/dashboard/info.phtml)

In customer_account_index.xml I did:

<referenceBlock name="customer_account_dashboard_info">
  <block class="Magento\Vault\Block\Customer\CreditCards" name="vault.cards.list" cacheable="false" template="Magento_Vault::cards_list.phtml" />
</referenceBlock>

And then in info.phtml:

 <!-- Stored Payment Method Code -->
 <?php echo $block->getChildHtml('vault.cards.list'); ?>

but by doing this only its header is displayed and the card details aren't. I'm not sure what is wrong. Below I have attached the Screenshot.

For reference, In cards_list.phtml file the code responsible to render the body of the card details is

<tbody>
   <?php
   foreach ($tokens as $token) {
     echo $block->renderTokenHtml($token);
    }
   ?>
 </tbody>

I've tried different methods of moving but still, it isn't showing up. I've also moved other components this way and it has worked for me in the past.

What I would've to do for the card details to also show up.

The file responsible to render card details is at vendor/magento/module-vault/view/frontend/templates/customer_account/credit_card.phtml

Answer 1

The block vault.cards.list is responsible for rendering cards list is located in the vendor/magento/module-vault/view/frontend/layout/vault_cards_listaction.xml

The template responsible for rendering card details is located in the vendor/magento/module-vault/view/frontend/templates/customer_account/credit_card.phtml file.
In the Magento default, this template belongs to

• the paybraintree.card.renderer block, which is defined in the vendor/paypal/module-braintree-core/view/frontend/layout/vault_cards_listaction.xml file in the Paypal Braintree Core module.

<referenceBlock name="vault.cards.list">
    <block class="PayPal\Braintree\Block\Customer\CardRenderer" name="braintree.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
</referenceBlock>

• the payflow.card.renderer block, which is defined in the vendor/magento/module-paypal/view/frontend/layout/vault_cards_listaction.xml file in the Paypal module.

<referenceBlock name="vault.cards.list">
    <block class="Magento\Paypal\Block\Payflow\Customer\CardRenderer" name="payflow.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
</referenceBlock>

As shown, the braintree.card.renderer and the payflow.card.renderer blocks reference the vault.cards.list block to render their content within the vault.cards.list block.

Therefore, to add the Magento_Vault::customer_account/credit_card.phtml template to your vault.cards.list block in the Account information page, you have to define the braintree.card.renderer and the payflow.card.renderer blocks within the vault.cards.list block in your account index layout (customer_account_index.xml).

Your vault.cards.list block should be like this:

<block class="Magento\Vault\Block\Customer\CreditCards" name="vault.cards.list" cacheable="false" template="Magento_Vault::cards_list.phtml">
    <block class="Magento\Paypal\Block\Payflow\Customer\CardRenderer" name="payflow.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
    <block class="PayPal\Braintree\Block\Customer\CardRenderer" name="braintree.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
</block>

In case you using a third-party extension that has a block reference the vault.cards.list block to render its content within the vault.cards.list block:
<module dir>/view/frontend/layout/vault_cards_listaction.xml:

<referenceBlock name="vault.cards.list">
    <block class="Magetu\Payment\Block\Customer\CardRenderer" name="magetu.card.renderer" template="Magetu_Payment::vault/customer_account/credit_card.phtml"/>
</referenceBlock>

You can do the same like I mentioned for the Paypal and Paypal Braintree Core modules. Your vault.cards.list block should be like this:

<block class="Magento\Vault\Block\Customer\CreditCards" name="vault.cards.list" cacheable="false" template="Magento_Vault::cards_list.phtml">
    <block class="Magento\Paypal\Block\Payflow\Customer\CardRenderer" name="payflow.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
    <block class="PayPal\Braintree\Block\Customer\CardRenderer" name="braintree.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
    <block class="Magetu\Payment\Block\Customer\CardRenderer" name="magetu.card.renderer" template="Magetu_Payment::vault/customer_account/credit_card.phtml"/>
</block>