Stripe Products

The StarterStack backend provides an API route and middleware that returns your active products in your stripe account. These products, along with their pricing objects, are used to populate the StarterStack pricing plan page bundled in the frontend stack.

Request

curl --location 'http://localhost:8000/products'

Response

{
    "data": [
        {
            "id": "{ your stripe product id}",
            "object": "product",
            "active": true,
            "attributes": [],
            "created": 1724966866,
            "default_price": null,
            "description": "This is a description",
            "images": [],
            "livemode": false,
            "marketing_features": [
                {
                    "name": "Vue"
                },
                {
                    "name": "Form Components"
                },
                {
                    "name": "Node"
                }
            ],
            "metadata": {
                "popular": "false",
                "sort_order": "1"
            },
            "name": "Starter Stack",
            "package_dimensions": null,
            "shippable": null,
            "statement_descriptor": null,
            "tax_code": "txcd_10203001",
            "type": "service",
            "unit_label": null,
            "updated": 1725056245,
            "url": null,
            "prices": [
                {
                    "id": "price_1PtG0",
                    "object": "price",
                    "active": true,
                    "billing_scheme": "per_unit",
                    "created": 1724967363,
                    "currency": "usd",
                    "custom_unit_amount": null,
                    "livemode": false,
                    "lookup_key": null,
                    "metadata": {},
                    "nickname": null,
                    "recurring": null,
                    "tax_behavior": "unspecified",
                    "tiers_mode": null,
                    "transform_quantity": null,
                    "type": "one_time",
                    "unit_amount": 21900,
                    "unit_amount_decimal": "21900"
                }
            ]
        },
        {
            "id": "{ your stripe product id}",
            "object": "product",
            "active": true,
            "attributes": [],
            "created": 1725055861,
            "default_price": "price_1Ptd2",
            "description": "This is a description",
            "images": [],
            "livemode": false,
            "marketing_features": [
                {
                    "name": "Feature 1"
                },
                {
                    "name": "Feature 2"
                },
                {
                    "name": "Feature 3"
                }
            ],
            "metadata": {
                "popular": "true",
                "sort_order": "2"
            },
            "name": "Pro Stack",
            "package_dimensions": null,
            "shippable": null,
            "statement_descriptor": null,
            "tax_code": "txcd_10203001",
            "type": "service",
            "unit_label": null,
            "updated": 1725056264,
            "url": null,
            "prices": [
                {
                    "id": "price_1Ptd2",
                    "object": "price",
                    "active": true,
                    "billing_scheme": "per_unit",
                    "created": 1725055862,
                    "currency": "usd",
                    "custom_unit_amount": null,
                    "livemode": false,
                    "lookup_key": null,
                    "metadata": {},
                    "nickname": null,
                    "recurring": null,
                    "tax_behavior": "unspecified",
                    "tiers_mode": null,
                    "transform_quantity": null,
                    "type": "one_time",
                    "unit_amount": 24900,
                    "unit_amount_decimal": "24900"
                }
            ]
        }
    ]
}

Creating Stripe Products

While creating products in Stripe is beyond the scope of this document (although it's quite easy and well documented at Stripe) there are a few things to call out here.

When configuring your Stripe product, there is an option to add Metadata. This is essentially additional strucutured data about your product. For example, if one of your plans is more popular than others, you can add popular as the name and true as the value. The StarterStack products api will pick this up and use it on the UI to highlight this plan as "Most Popular".

Additionally, if there is an order you'd like to present your plans on the pricing page, you should add sort_order as the name and 1 as the value for the product you want first and sort_order as the name and 2 as the value to the product you want second and so on.

Stripe products also offer a setting for marketing features. The StarterStack UI makes use of these values to list the features your plan offers. Set these as well and the StarterStack products API return those.