goal

My goal is to display products that I’m selling on Gumroad. You can do it by using Gumroad API.

requirements

• Gumroad account and products
• React
• TypeScript

How to display

1. Generate Access Token on Gumroad

Before write a code, we need to generate “Access Token” to access Gumroad API.

After logged in Gumroad, go to Setting > Advanced > Application. And type each filed at “Create application” section.

Application name: e.g. your website name Redirect URI: http://127.0.0.1 (You don’t use this anyway)

After completed, you will get “Application ID” and “Application Secret”. Then you will be able to generate “Access Token” by clicking “Generate access token”.

2. Create .env.local

Copy “Access Token” you generated and paste to .env.local like this:

GUMROAD_API_TOKEN=YOUR_ACCESS_TOKEN

3. Get json data from Gumroad API

This is a sample you can get from Gumroad API. You can see full information at API Reference | Gumroad.

{
  "success": true,
  "products": [{
    ...
    "customizable_price": null,
    "description": "I made this for fun.",
    "deleted": false,
    "max_purchase_count": null,
    "name": "Pencil Icon PSD",
    "preview_url": null,
    "require_shipping": false,
    "subscription_duration": null,
    "published": true,
    "url": "http://sahillavingia.com/pencil.psd",
    "id": "A-m3CDDC5dlrSdKZp0RFhA==",
    "price": 100,
    "purchasing_power_parity_prices": {
      "US": 100,
      "IN": 50,
      "EC": 25
    },
    "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",
    "file_info": {},
    ...
  }, {...}, {...}]
}

Create type for products based on the above json data.

export interface Product {
  name: string;
  id: string;
  shortUrl: string;
  formattedPrice: string;
}

You can get data by using fetch() method. The endpoint to get data is https://api.gumroad.com/v2/products .

Here’s an example to get data. The json data will be contained in products .

const url = `https://api.gumroad.com/v2/products?access_token=YOUR_ACCESS_TOKEN`;
const result = await fetch(url);
const { products } = await result.json();

By the way, this data include unlisted products. You need to remove that using filter() .

const filteredProducts = products.filter(({ published }: any) => published);

Here’s the whole code to get json data.

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

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)
    .map((product: any) => {
      return {
        id: product.id,
        name: product.name,
        shortUrl: product.short_url,
        formattedPrice: product.formatted_price,
      };
    });

  return filteredProducts;
};

4. Displaying on Component

/* Products.tsx */
import { getProducts } from "@utils/products";
import type { Product } from "@/types";

export default function Products() {
  return (
    <ul>
      {products.map((product: Product) => (
        <li key={product.id}>
          <a href={product.shortUrl} target="_blank" rel="noopener noreferrer">
            {product.name}
            {` `}
            {product.formattedPrice}
          </a>
        </li>
      ))}
    </ul>
  );
}

Now you can checn with npm run dev and go to the browser 🎉

5. Setting variables on the Cloudflare

Go to Workers & Pages > {your project name} > Settings > Variables and Secrets. Click [+ Add] and type like this:

• Type: Secret
• Key: GUMROAD_API_TOKEN
• Value: Your access token

References

• Create an application for the API | Gumroad https://help.gumroad.com/article/280-create-application-api（2023-12-29）
• API Reference | Gumroad https://app.gumroad.com/api（2023-12-29）