kintoneには外部サービスとの連携をスムーズに実現するための拡張機能・プラグインが用意されています。

この仕組みを利用して、kintoneとStripeを連携することが可能です。

ただし、Stripeの情報にkintoneからアクセスするには、StripeのAPIキーを拡張機能・プラグインに渡す必要があります。

この記事では、「StripeのAPIキーを、kintoneの拡張機能・プラグインで安全に保存・利用する方法」を紹介します。

基本的な作り方の流れ

保存・利用する仕組みは、大まかに３つのステップで用意します。

@kintone/create-pluginでプラグインをセットアップ
Proxy configを利用して、StripeのAPIキーを保存する仕組みを用意
Proxy configに保存したAPIキーを利用して、Stripe APIを呼び出す

プラグインのセットアップ

まずはプラグインをセットアップします。

ここでは、create-pluginパッケージを利用します。

$ npx @kintone/create-plugin hello-kintone-plugin-ts --lang ja --template modern


  
kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください :)
では、はじめましょう！


  
? プラグインの英語名を入力してください [1-64文字] hello-kintone-plugin-ts
? プラグインの説明を入力してください [1-200文字] hello-kintone-plugin-ts
? 日本語をサポートしますか？ Yes
? プラグインの日本語名を入力してください [1-64文字] (省略可) 
? プラグインの日本語の説明を入力してください [1-200文字] (省略可) 
? 中国語をサポートしますか？ No
? プラグインの英語のWebサイトURLを入力してください (省略可) 
? プラグインの日本語のWebサイトURLを入力してください (省略可) 
? モバイルページをサポートしますか？ Yes
? @kintone/plugin-uploaderを使いますか？ Yes
依存ライブラリをインストールします
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠙ idealTree:hello-kintone-plugin-ts: sill idealTree buildDeps

セットアップが完了した後は、プロジェクトのディレクトリで以下のコマンドを起動しましょう。

npm run upload \
--base-url https://YOUR_SPACE_NAME.cybozu.com \
--username user@example.com \
--password YOUR_PASSWORD
--watch

このコマンドを実行中は、npm run buildでアプリをビルドすることでプラグインを自動的にアップロードしてくれます。

1: プラグイン設定画面を用意する

プラグインの設定画面を実装して、APIキー登録などの設定ができる画面を作りましょう。

plugin/html/config.htmlを次のように変更します。

<section class="settings">
  <h2 class="settings-heading">Stripe API連携</h2>
  <p class="kintoneplugin-desc">Stripeと連携するためのAPIキーを設定します</p>
  <form class="js-submit-settings" id="js-submit-settings">
    <p class="kintoneplugin-row">
      <label for="message">
        Secret API KEY:
        <input type="text" id="stripe-secret-api-key" class="js-text-message kintoneplugin-input-text">
      </label>
    </p>
    <p class="kintoneplugin-row">
        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
        <button class="kintoneplugin-button-dialog-ok" id="plugin-submit">Save</button>
    </p>
  </form>
</section>

npm run buildでビルドし、アップロードしましょう。

設定画面のテキストが変われば変更完了です。

2: APIキー保存機能を作成する

続いて保存機能を追加します。

src/js/config.tsを次のように変更し、APIプロキシーを登録しましょう。

const PLUGIN_ID = kintone.$PLUGIN_ID;

const form = document.querySelector(".js-submit-settings");
const cancelButton = document.querySelector(".js-cancel-button");
const messageInput =
  document.querySelector<HTMLInputElement>(".js-text-message");
if (!(form && cancelButton && messageInput)) {
  throw new Error("Required elements do not exist.");
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const secretAPIKeyField = document.getElementById("stripe-secret-api-key");
  if (!secretAPIKeyField) return;
  const secretAPIKeyFieldValue = (secretAPIKeyField as HTMLInputElement).value;
  if (!secretAPIKeyFieldValue) return;
  const stripeAPIUrl = "https://api.stripe.com/v1";
  const requestHeader = {
    Authorization: `Bearer ${secretAPIKeyFieldValue}`,
  };
  kintone.plugin.app.setProxyConfig(stripeAPIUrl, "GET", requestHeader, {});
  kintone.plugin.app.setProxyConfig(
    stripeAPIUrl,
    "POST",
    {
      ...requestHeader,
      "Content-Type": "application/x-www-form-urlencoded",
    },
    {}
  );
  alert("Saved");
});
cancelButton.addEventListener("click", () => {
  window.location.href = "../../" + kintone.app.getId() + "/plugin/";
});

npm run buildでビルド・アップロードを完了したのち、設定画面にてStripeのシークレットAPIキーを保存しましょう。

次の画面・メッセージが表示されれば保存成功です。

3: アプリの設定を更新する

アプリ設定画面で、アプリの更新を行いましょう。

[アプリの更新]をクリックして数秒待機すれば完了です。

この操作を行わないと、設定画面で登録したAPIキーが反映されませんのでご注意ください。

4: Stripe APIを呼び出す

APIキーの登録が完了したので、Stripe APIを呼び出しましょう。

src/js/desktop.tsに次のコードを追加します。

kintone.events.on("app.record.index.show", async () => {
  const customers = await new Promise<
    Array<{
      id: string;
    }>
  >((resolve, reject) => {
    kintone.plugin.app.proxy(
      PLUGIN_ID,
      `https://api.stripe.com/v1/customers`,
      "GET",
      {},
      {},
      (response) => {
        const result = JSON.parse(response);
        if (!result.data) return [];
        resolve(result.data);
      },
      (e) => {
        console.log(e);
        reject(e);
      }
    );
  });
  const kintoneSpaceElement = kintone.app.getHeaderSpaceElement();
  const simpleTextElement = document.createElement("p");
  simpleTextElement.innerText = `Stripeには、${customers.length}件の顧客データが存在します。`;
  kintoneSpaceElement?.appendChild(simpleTextElement);
});

npm run buildでビルド・アップロードを完了すると、アプリの一覧ページにStripe APIの実行結果が表示されます。

Stripe APIは、SDKを利用せずに呼び出す

APIプロキシー機能を利用するため、Stripe APIはSDKを利用せずに呼び出します。

たとえば「特定の顧客IDに紐づく、openステータスの請求書」は次のように取得します。

  const invoices = await new Promise((resolve, reject) => {
    const params = new URLSearchParams({
      customer: "cus_xxx",
      status: "open",
    });
    kintone.plugin.app.proxy(
      PLUGIN_ID,
      `https://api.stripe.com/v1/invoices?${params}`,
      "GET",
      {},
      {},
      (response) => {
        const result = JSON.parse(response);
        if (!result.data) return [];
        resolve(result.data);
      },
      (e) => {
        console.log(e);
        reject(e);
      }
    );
  });

SDKを利用しないため、APIドキュメントのcurlを参考にリクエスト内容を組み立てましょう。

おわりに

Stripe APIをkintoneから呼び出すための、APIキー管理について紹介しました。

請求管理やサブスクリプションの契約管理などでkintoneをお使いの場合、Stripeのデータとの連携やアクションの設定で、よりバックオフィス業務を効率化することができます。

また、Stripeには決済や収益管理といったお金の流れをスムーズ・自動化するための仕組みを、複数用意しています。

https://stripe.com/jp/use-cases/finance-automation

参考資料