The Payment Provider Gateway documentation uses the Magento 2.3 (now Adobe Commerce and Magento Open Source) of the Braintree module as a reference application. The Braintree module was removed in version 2.4.0. The concepts described in this guide are still applicable to version 2.4.x, but the code samples are not supported.

Display the stored information

This topic describes how to display stored tokens in the customer account and give customers ability to remove the tokens.

Token renderer

To implement the displaying functionality, create a token renderer. Its implementation depends on token type (card or account). But both types of renderers implement the common TokenRendererInterface and IconInterface interfaces.

If your vault integration uses card token type, then you need to extend AbstractCardRenderer. In other case extend AbstractTokenRenderer.

AbstractCardRenderer implements CardRendererInterface and has additional method to get card details.

The simple card renderer implementation might be like following:

class CardRenderer extends AbstractCardRenderer
{
    /**
     * Can render specified token
     *
     * @param PaymentTokenInterface $token
     * @return boolean
     */
    public function canRender(PaymentTokenInterface $token)
    {
        return $token->getPaymentMethodCode() === ConfigProvider::CODE;
    }

    /**
     * @return string
     */
    public function getNumberLast4Digits()
    {
        return $this->getTokenDetails()['maskedCC'];
    }

    /**
     * @return string
     */
    public function getExpDate()
    {
        return $this->getTokenDetails()['expirationDate'];
    }

    /**
     * @return string
     */
    public function getIconUrl()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['url'];
    }

    /**
     * @return int
     */
    public function getIconHeight()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['height'];
    }

    /**
     * @return int
     */
    public function getIconWidth()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['width'];
    }
}
Copied to your clipboard
class CardRenderer extends AbstractCardRenderer
{
    /**
     * Can render specified token
     *
     * @param PaymentTokenInterface $token
     * @return boolean
     */
    public function canRender(PaymentTokenInterface $token)
    {
        return $token->getPaymentMethodCode() === ConfigProvider::CODE;
    }

    /**
     * @return string
     */
    public function getNumberLast4Digits()
    {
        return $this->getTokenDetails()['maskedCC'];
    }

    /**
     * @return string
     */
    public function getExpDate()
    {
        return $this->getTokenDetails()['expirationDate'];
    }

    /**
     * @return string
     */
    public function getIconUrl()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['url'];
    }

    /**
     * @return int
     */
    public function getIconHeight()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['height'];
    }

    /**
     * @return int
     */
    public function getIconWidth()
    {
        return $this->getIconForType($this->getTokenDetails()['type'])['width'];
    }
}

Layout and template

Next, you need to create the layout to be used for displaying token details. In this layout, specify the previously created token renderer.

Example (vault_cards_listaction.xml):

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <referenceBlock name="vault.cards.list">
                <block class="Magento\Braintree\Block\Customer\CardRenderer" name="braintree.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>
Copied to your clipboard
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <referenceBlock name="vault.cards.list">
                <block class="Magento\Braintree\Block\Customer\CardRenderer" name="braintree.card.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

In this example the default credit_card.phtml vault template is used. But you can create and specify a custom template. Add the template in the payment method module.

Token UI component provider

Vault implementation for Admin

Last updated 9/8/2023

Was this helpful?

Yes

Display the stored information

Token renderer.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Layout and template

Token renderer