
Learn how to use the Gumroad API to display a list of products on your website.

## Goal

Display the products on your own website using Gumroad API

[Gumroad API](https://app.gumroad.com/api)

## Requirements

- Gumroad account and published products
- Next.js (v12)
- React
- TypeScript

## How to Display

### 1. Generate an access token on Gumroad

Login to Gumroad and go to Setting > Advanced > Application. Fill in the required fields in the "Create application".

The Application name should be a descriptive name that identifies the purpose. The Redirect URI can be set to `http://127.0.0.1` (not used in this case).

![](how-to-display-products-using-gumroad-api-in-nextjs-01.png)

Once the registration is complete, you will be provided with an Application ID and Application Secret, which allows you to generate an access token.

![](how-to-display-products-using-gumroad-api-in-nextjs-02.png)

Click on "Generate access token" to generate the access token.

### 2. Create a .env.local file for environment variables

Paste the copied access token into the .env.local file.

```text
GUMROAD_API_TOKEN=your_access_token
```

### 3. Fetch Gumroad API data

The API endpoint to fetch product information is:

```tsx
https://api.gumroad.com/v2/products
```

Pass the access token as a parameter to this endpoint to retrieve the information.

The available information includes the product name, price, description, thumbnail image, and product URL and more. You can find a complete list of available information in the Gumroad [API Reference](https://app.gumroad.com/api).

```json
{
  "success": true,
  "products": [{
    ...
    "customizable_price": null,
    "description": "I made this for fun.",
    "deleted": false,
    "max_purchase_count": null,
    "name": "Pencil Icon PSD",
    "published": true,
    "url": "<http://sahillavingia.com/pencil.psd>",
    "id": "A-m3CDDC5dlrSdKZp0RFhA==",
    "currency": "usd",
    "short_url": "<https://sahil.gumroad.com/l/pencil>",
    "thumbnail_url": "<https://public-files.gumroad.com/variants/72iaezqqthnj1350mdc618namqki/f2f9c6fc18a80b8bafa38f3562360c0e42507f1c0052dcb708593f7efa3bdab8>",
    "tags": ["pencil", "icon"],
    "formatted_price": "$1",
    ...
  }, {...}, {...}]
}

```

Create a function to fetch the data using `fetch()` method.  
Modify the `Product` type according to the required information if you need.

```tsx
/* products.ts */
const API_BASE_URL = "<https://api.gumroad.com/v2>";
const API_TOKEN = process.env.GUMROAD_API_TOKEN;

export interface Product {
  name: string;
  id: string;
  short_url: string;
  formatted_price: string;
}

export const getProducts = async (): Promise<Product[]> => {
  const url = `${API_BASE_URL}/products?access_token=${API_TOKEN}`;
  const result = await fetch(url);
  const { products } = await result.json();

  const filteredProducts = products
    .filter(({ published }: any) => published) /* Filter published products */
    .map((product: Template) => {
      /* Extract necessary information */
      return {
        id: product.id,
        name: product.name,
        short_url: product.short_url,
        formatted_price: product.formatted_price,
      };
    });

  return filteredProducts;
};
```

### 4. Display in Next.js (React)

Create a page to display the products and load the product information using the `getStaticProps` function.
(Note: The components and styles are not included for demonstration purposes)

```tsx
/* pages/products.tsx */
import { GetStaticProps, NextPage } from "next";
import { getProducts, Product } from "@utils/templates";

const Templates: NextPage<Products> = ({ products }) => {
  return (
    <ul>
      {products.map((product: Product) => (
        <li key={product.id}>
          <a href={product.short_url} target="_blank" rel="noopener noreferrer">
            {product.name}
            {` `}
            {product.formatted_price}
          </a>
        </li>
      ))}
    </ul>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const products = await getProducts();

  return {
    props: {
      products,
    },
    revalidate: 30,
  };
};
```

When the list of products is displayed in the local environment, you're all set 🎉

![](how-to-display-products-using-gumroad-api-in-nextjs-03.png)

On this site, I retrieve and display information such as thumbnails, prices, tags, and more.

![](how-to-display-products-using-gumroad-api-in-nextjs-04.png)

### 5. Configure environment variables in Vercel

※ Assuming the deployment is already done on Vercel

Login to Vercel and go to Settings > Environment Variables for the relevant site.

Copy and paste the contents of the .env.local file into the Key and Value fields.

- Key: `GUMROAD_API_TOKEN`
- Value: `Your access token`

Check the necessary options on checkboxes and click the Save button.

## References

- Create an application for the API | Gumroad [https://help.gumroad.com/article/280-create-application-api](https://help.gumroad.com/article/280-create-application-api) (accessed on December 29, 2023)
- API Reference | Gumroad [https://app.gumroad.com/api](https://app.gumroad.com/api) (accessed on December 29, 2023)


How to Display Your Products on Your Website using Gumroad API [Next.js]

Tags