DJ-Stripe metadata not attaching to product - django

Question

I am following this guide:
https://www.saaspegasus.com/guides/django-stripe-integrate/#contents
I get to "Adding metadata to your Stripe objects" and am told to create a metadata.py file. It doesn't tell me where to import #dataclass and List from so I had to guess. The issue is that, moving forward from this point in the guide, the metadata does not print to my template but I can retrieve product information. I'm thinking this guide is missing or assuming I know stuff about metadata that is required to make it work.
my metadata.py:
from dataclasses import dataclass
from pip import List
from project.subscriptions import features
#dataclass
class ProductMetadata(object):
"""
Metadata for a Stripe product.
"""
stripe_id: str
name: str
features: List[str]
description: str = ''
is_default: bool = False
PREMIUM = ProductMetadata(
stripe_id='<prod id>',
name='Premium',
description='yerp',
is_default=False,
features=[
features.UNLIMITED_WIDGETS,
features.LUDICROUS_MODE,
features.PRIORITY_SUPPORT,
],
)
features.py:
UNLIMITED_WIDGETS = 'Unlimited Widgets'
LUDICROUS_MODE = 'Ludicrous Mode'
PRIORITY_SUPPORT = 'Priority Support'
views:
from django.shortcuts import render
from djstripe.models import Product
def pricing_page(request):
context = {
'products': Product.objects.all()
}
return render(request,'subscriptions/pricing_page.html', context=context)
urls:
path('pricing_page/', view=pricing_page, name='pricing_page'),
template:
{% extends "base.html" %}{% load static socialaccount %}
{% block content %}
<h1>Plans</h1>
<section>
<p class="title">Pricing Plans</p>
<div class="columns">
{% for product in products %}
<div class="column">
<p class="subtitle">{{ product.name }}</p>
{% for plan in product.plan_set.all %}
<div>
<p class="heading">{{ plan.nickname }}</p>
<p>{{ plan.human_readable_price }}</p>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</section>
<div class="plan-interval-selector">
{% for plan in plans %}
<button class="button">{{ plan.name }}</button>
{% endfor %}
</div>
<div class="columns plan-selector">
{% for product in products %}
{{ product.metadata|pprint }}
<div class="column">
<div {% if product.metadata.is_default %}class="is-selected"{% endif %}>
<span class="icon">
<i class="fa {% if product.metadata.is_default %}fa-check{% else %}fa-circle{% endif %}">
</i>
</span>
<p class="plan-name">{{ product.metadata.name }}</p>
<p class="plan-description">{{ product.metadata.description }}</p>
<div class="plan-price">
<span class="price">{{ product.metadata.monthly_price }}</span> / month
</div>
<ul class="features">
{% for feature in product.metadata.features %}
<li>
<span class="icon"><i class="fa fa-check"></i></span>
<span class="feature">{{ feature }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
The first forloop gets attributes directly from the product and it works. The second one tries to get the attributes from the metadata. It loops for each product but does not output the metadata. Any advice?