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
参考資料