The Payment Provider Gateway documentation uses the Magento 2.3.x version of the Braintree module as a reference application. The Braintree module was removed in Magento 2.4.0. The concepts described in this guide are still applicable to Magento 2.4.0, but the code samples are not supported.
This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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):

1
2
3
4
5
6
7
8
9
<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.

What’s next

Using stored tokens to place order from Admin panel.