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
