この記事では、Stripeのチェックアウトセッションの作成と支払状況を kintone アプリ で管理する方法をご紹介します。


予約管理アプリとStripeでの支払の流れ

  1. 予約管理アプリにレコードを作成し、ステータスを「支払依頼中」に変更したタイミングでStripeのチェックアウトセッションを作成する

    1. チェックアウトセッションの支払URLを予約管理アプリの「支払URL」フィールドにセットする

    2. 支払いを識別するための「チェックアウトセッションID」もフィールドにセットしておく

  2. Stripeでチェックアウトセッションの支払が完了したら、予約管理アプリに支払完了を反映する

    1. ステータスを「支払完了・予約確定」に変更する

    2. 支払い完了日時をセットする


予約管理アプリの設定

予約Noはカスタマイン重複しない値を採番（参考：レコード保存直後に自動採番）してセットし、Stripeのチェックアウトセッションの支払画面で顧客が確認する商品名で使用します。


プロセス管理は下記のように設定しています。


チェックアウトセッションを作成する時に必要な情報を保存するフィールド

チェックアウトセッションを作成する際に、最低限下記の2つの情報が必要です。

  • 商品名

  • 単価


その他、商品コードや商品説明、数量などが必要であればフィールドを作成し、情報を登録しておきます。

今回は、商品名には「予約No」フィールドの値を使用し、単価には「料金」フィールドの値を使用します。


Stripeによって生成される情報を保存するフィールド

  • チェックアウトセッションID
    Stripeのチェックアウトセッションを識別するIDを保存するフィールドです

    • チェックアウトセッションIDはStripeのチェックアウトセッションを作成した時に生成されますので、生成時に取得してフィールドにセットしておきます

    • Stripe上でチェックアウトセッションの支払いが完了したときに、対象の支払いとkintone上の予約のレコードを識別するために使用します

  • 支払URL
    Stripeで用意された、顧客向けの支払ページのURLを保存するフィールドです

    • 今回は、Stripeによって作成された支払画面を使用します。Stripeのチェックアウトセッションが作成されるとStripeが支払画面のを生成してくれますので、支払画面のURLを取得してセットします

    • 支払URLは自分で顧客に連絡する必要があるため、カスタマインのカスタマイズであれば、やること「SendGrid でメールを送信する」などで顧客に送付します（今回の記事では省略します）


kintoneアプリとStripeのチェックアウトセッションの関係

チェックアウトセッション作成

kintoneアプリのカスタマイズであれば、やること「Stripe のチェックアウトセッションを作成する」、Job Runnerのカスタマイズであれば「Stripe のチェックアウトセッションを作成する」でチェックアウトセッションを作成できます。

チェックアウトセッション作成時に、商品名や金額などの支払に使用する情報としてkintoneアプリのフィールドの値を使用することができます。


また、Stripeが作成した支払用ページのURLをアクションの結果として取得し、支払URLをkintoneのフィールドにセットしておいて、メールで顧客に送る際などに使用します。


このカスタマイズの実行が完了したときの各フィールドの状態は下記の通りです。


それでは、カスタマインのカスタマイズでの、チェックアウトセッションの作成方法をご紹介します。


制限付き API キーの作成

やること「Stripe のチェックアウトセッションを作成する」は、パラメーター「Stripe APIキー」にStripeで発行した Stripe API キーを指定して利用します。


そのため、まずはStripeの画面で、Stripeの制限付き API キー を作成します。


Stripeにログインしたら、画面左下の「開発者」をクリックし、「APIキー」を選びます。


「自社のシステムを構築」を選びます。


次に、制限付き API キーの権限を設定します。


権限はドキュメントの記載を確認し、必要な権限を設定してください。今回は商品画像は登録しないため、Filesの権限は設定しません。


（以下、ドキュメントから転載）

この API キーには以下の権限が必要です。

  • Checkout Sessions: 書き込み

  • Files: 書き込み（※商品画像を登録する場合のみ必要で、画像を登録しないならば不要です）

  • Prices: 書き込み

  • Products: 書き込み



制限付きのキーができましたので、キーをクリックしてコピーします。


チェックアウトセッションを作成するカスタマイズの作成

今回は kintone アプリのカスタマイズで、やること「Stripe のチェックアウトセッションを作成する」を使用した設定をご紹介しますが、Job Runner のカスタマイズでも やること の使用方法はほぼ同じです。


kintone の プロセス管理 のアクション「支払依頼」が実行されたらチェックアウトセッションが作成されるように設定します。


やること「Stripe のチェックアウトセッションを作成する」の設定は下記の通りです。

  • Stripe APIキー

    • Stripe の画面で作成した、制限付きのキーを指定してください

  • 明細になるレコード

    • チェックアウトセッションに明細として登録する、商品やサービスの情報を持ったレコードを指定します

    • 省略した場合は現在の画面のレコードが使用されますので、今回の例ですと詳細画面に表示されたレコードが1明細としてチェックアウトセッションに登録されます

  • 明細マッピング

    • 明細に登録する情報をマッピングで指定します

    • 最低限、商品名と単価は指定が必要です

    • 「明細になるレコード」で指定したレコードのフィールドの値を明細に指定したい場合は、「= フィールドコード」と指定してください

    • 今回は、商品名に下記のように指定して、予約Noフィールドの値を商品名に使用しています
      = “予約No.” & 予約No & " の支払”

    • 詳細はドキュメントをご確認ください

  • 成功URL

    • チェックアウトセッションの作成が完了したら遷移するWebページのURLを指定します。「支払いが完了しました」と表示するような、支払を行う顧客がアクセス可能なページを用意しておく必要があります



また、アクションの結果として、チェックアウトセッションIDと支払URLを取得できますので、

アクション5と6で、やること「フィールドに値をセットする」でフィールドにセットしておきます。

これでチェックアウトセッションの作成は完了です。


顧客による支払

支払URLにアクセスすると、下記のようなStripeから提供された支払い画面が表示されます。顧客はこの画面でクレジットカード情報を入力し、支払いを行います。


上記の画面で顧客が支払いを行うとStripeからWebhookの通知が送られます。


その通知をカスタマインの「kintoneアプリのWebhook」のカスタマイズで受け取り、kintoneアプリに支払完了を示す値をセットするカスタマイズを、以下でご紹介します。


Stripeでの支払完了をkintoneアプリに反映する

StripeからのWebhookの通知には、支払対象となったチェックアウトセッションIDが含まれます。カスタマイズではWebhookの通知を受け取ったら、通知からチェックアウトセッションIDを取得して対象となるkintoneアプリのレコードを特定します。


では、支払完了をkintoneアプリに反映するために、

支払管理アプリの「kintoneアプリのWebhook」のカスタマイズを作成します。


やること「kintone 接続設定を行う」で接続先として「予約管理」アプリ、kintone アプリの API トークンに指定する API トークンには、「レコード閲覧」と「レコード編集」を設定します。


条件は「Webhook を開始した時」と共に、「Webhookの発生がStripeのチェックアウトセッション完了によるならば」を指定します。


今回のカスタマイズは、ジョブ実行の起点となるWebhookの通知元が kintone ではなくStripeです。

条件「Webhookの発生がStripeのチェックアウトセッション完了によるならば」は、Webhook の通知元の Stripe のイベントが「checkout.session.completed イベント」かどうかを識別するための条件です。このイベントはチェックアウトセッションの支払いが完了した時のイベントですので、後述の Stripe の Webhook の設定と、カスタマインの条件を合わせておきます。


次に、やること「Stripeの Webhook から渡されたチェックアウトセッションのIDを取得する」で Stripe の Webhook の通知に含まれるチェックアウトセッションIDを取得します。


やること「条件を組み立ててレコードを取得する」で、予約管理アプリからチェックアウトセッションIDを条件にレコードを取得します。

取得したレコードの「支払い完了日時」に現在日時を示すnow 関数の値をセットし、ステータスを「支払完了」に変更すれば支払完了処理は完成です。

これでカスタマイズは完了しました。


次に、カスタマインによって生成された URL を Stripe に登録し、Stripe からの Webhook の通知先としてカスタマインを登録します。


なお、生成されたURLをコピーする際は「URLをコピー」ボタンは使用しないでください。このボタンは kintone の Webhook 向けに設置しているもので、クリックすると「https://」を除いたURLがコピーされてしまいます。


Stripeに登録する際は「https://」からのURLが必要ですので、手動で選択してコピーしてください。



Stripe の画面を開いて、コピーした URL を Webhook の通知先として登録します。

「開発者」メニューから「Webhook」を選択し、「＋通知先を追加する」ボタンをクリックしてください。


イベントを選択します。やること「Stripeの Webhook から渡されたチェックアウトセッションのIDを取得する」のドキュメントの使い方に記載がある通り、ここでは「チェックアウトセッションの完了(checkout.session.completed)」を選択してください。


次に、送信先のタイプを選択します。

「Webhook エンドポイント」を選択してください。


送信先を設定します。

「送信先名」にはわかりやすい任意の名前を、

「エンドポイント URL」に、コピーしておいたカスタマインの「kintone アプリの Webhook」で生成されたURLを貼り付けます。


「説明」は、必要であれば設定してください。


「送信先を作成する」ボタンを押せば、設定は完了です。



以上ですべての設定は完了です。


kintoneアプリにレコードを追加し、ステータスを「支払依頼中」に変更して、チェックアウトセッションが問題なく作成されるか確認してみてください。


支払URLが生成されたら、テストであればテストカードを使用するなどして支払を実行し、kintoneのレコードのステータスが変わる事を確認してください。


いかがでしょうか。想定通りの結果になりましたでしょうか？


お試しいただいて、想定通り動作しないなどありましたら、チャットでお問合せください。