Skip to content

English / 日本語

Gumroad API + React で自分のwebサイトに商品を表示する方法

Jan 9, 2024

・react

Send a little tip of support 💚

Gumroad で販売している商品を自分のwebサイトにも掲載したい場合、Gumroadが提供しているAPIを利用して情報を取得することができます。

目的

Gumroad API を利用して販売中の商品を自分のwebサイトに表示する

Gumroad API

要件

  • Gumroadのアカウントと販売中の商品
  • React
  • TypeScript

実装手順

1. Gumroad でアクセストークンを発行する

コードの実装に入る前にAPIにアクセスするためのトークンを発行する必要があります。

Gumroad にログインして Setting > Advanced > Application へ進み「Create application」の各項目に入力します。

Application name は商品を表示したいサイトの名前など使用目的・場所がわかる名前にします。Redirect URI は http://127.0.0.1 と入れておきます（今回の用途には使用しません）。

登録が完了するとApplication ID と Application Secret が付与され、アクセストークンの発行が可能になります。Generate access token をクリックしてアクセストークンを発行します。

2. 環境変数用のファイル .env.local を作成

先ほどコピーしたアクセストークンをコピーペーストします（トークンが記載されたファイルをGitHubなどにアップロードしないように注意してください）。

GUMROAD_API_TOKEN=あなたのアクセストークン

3. Gumroad API から商品情報のjsonデータを取得

以下は取得できる情報のサンプルです。商品名、価格、商品説明、サムネイル画像、商品ページのURLなど全情報のリストはGumroad の API Reference のページで確認できます。

{
  "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": {},
    ...
  }, {...}, {...}]
}

上記をもとに商品用の型を作成しておきます。以下は型の例です。

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

商品情報の取得は fetch() メソッドを使用します。商品情報を取得するための API エンドポイントは https://api.gumroad.com/v2/products です。

以下が fetch() メソッドでAPIから情報を取得する基本的な書き方で、 products に先ほどの例のようなjsonデータが格納されます。

const url = `https://api.gumroad.com/v2/products?access_token=<あなたのアクセストークン>`;
const result = await fetch(url);
const { products } = await result.json();

こちらのデータにはGumroad側で非公開にしている商品も含まれるため、 filter() を使用して公開済みの商品に絞り込みをします。 published が true であれば公開済みになります。

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

jsonデータを取得するためのコード全体です。

/* 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. コンポーネントで表示する

/* 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>
  );
}

ターミナルで npm run dev でlocal 環境で商品のリストの表示が確認できたら完了です 🎉

実際に商品を表示している当サイトの例がこちらです。

5. デプロイ先での環境変数の設定

ここでは Cloudflare Pages での設定方法の例です。 Workers & Pages > 対象のプロジェクト > Settings > Variables and Secrets と移動します。 [+ Add]をクリックして以下のように入力して保存します。

  • Type: Secret
  • Key: GUMROAD_API_TOKEN
  • Value: 発行したアクセストークン

参照

Tags

how-to api rest-api