昨今は様々な自動化ツールの登場で、ノーコードでも業務アプリを簡単に実装できる時代になりました。
今回は自動化ツール「Make」と弊社SonicGardenのサービス「じぶんシリーズ」を活用し、ノーコードで商品の注文から決済まで完了できる仕組みをご紹介します。
本記事は「Make」による各サービスの連携部分がメインとなりますので、その他のサービスについてはざっくりレベルでの説明となります。
実装するサービスの概要
本記事では以下のようなセミナー申し込みアプリを想定し、セミナーの申し込みから決済までノーコードで実装します。
- それぞれのセミナーにはセミナー名と開催日時、参加費が設定されている
- ユーザーは申し込み画面からセミナーに申し込みができる
- ユーザーは1つのセミナーに複数人数分の申し込みが可能
- ユーザーは複数セミナーへの同時申し込みも可能
- ユーザーの申し込み後、stripeの決済URLがユーザーに案内される
- ユーザーはそのURLから決済画面にアクセスし、セミナー料の支払いができる
- システム管理者はユーザーが支払いを完了したかどうかを確認できる
利用サービス
連携させるサービスは以下の通りです。
kintone
- サイボウズ社が提供するクラウドベースの業務アプリ作成プラットフォーム
- 売上情報、顧客情報、請求書など、様々なデータ管理アプリをノーコードで作成可能
kintoneはレコード登録や更新といったイベント時にwebhookで外部サービスと連携することができます。
今回はその機能を利用してstripeと連携させていきます。
じぶんシリーズ
- kintoneを拡張してより便利に活用できる連携サービス
- じぶんページ、じぶんフォーム、じぶんレコードの3つの製品が存在
- 今回はその中で「じぶんフォーム」「じぶんレコード」を使用する
- じぶんフォーム
- kintoneと連携したWebフォームを作成できるサービス
- じぶんレコード
- kintoneのレコードを閲覧できるページを作成できるサービス
「じぶんフォーム」「じぶんレコード」を活用することで、kintoneにアクセス権限がないユーザーでもkintoneへのデータの登録、登録された情報の閲覧が可能となります。
この特徴を活かし、セミナーへの申し込みフォーム、申し込み情報の閲覧ページをノーコードで作成します。
stripe
オンライン決済を簡単に導入できるプラットフォームです。
今回はCheckoutのSession作成をノーコードで実装していきます。
Make
- 様々なモジュールを組み合わせて複雑な自動化シナリオを作成可能なツール
- 特定のイベントをトリガーとして、一連のアクションを自動で実行可能
サービスの画面は以下のようになっており、モジュールを組み合わせることで様々なタスクを自動化することができます。
本記事ではMakeを使って「決済画面URLの作成」や、「ユーザーの決済完了の検知」をノーコードで実装していきます。
後ほど詳しくご説明します。
事前準備
事前準備としてstripeでの商品の作成と、kintoneでアプリの作成を行います。
stripeで商品を作成する
以下のように、各セミナーをstripeの商品として登録します。
stripeに登録すると、価格IDが作成されるため、それをコピーしておきます。
kintoneで必要なアプリを作成する
セミナーアプリの作成
kintoneでセミナーアプリを作成し、必要な情報を登録します。
今回は「セミナー名」「日時」「価格」「stripe_price_id」のフィールドを用意します。
stripeからコピーした「価格ID」は「stripe_price_id」に入力します。
申込者アプリの作成
セミナー申込者を登録するアプリを作成します。以下のようなイメージです。
「氏名」「メールアドレス」「決済URL」「希望セミナー」「決済状況」のフィールドを作成しています。
「決済URL」にはstripeの決済画面のURLが入力されますが、最初は空の状態です。後々Makeによってstripeの決済URLを発行し、kintoneに登録する仕組みを実装します。
「希望セミナー」は先に登録したセミナーアプリからルックアップで選択します。
「単価」と「stripe_price_id」もセミナーアプリから参照します。希望セミナーごとに任意の「申込数」を入力できるようにしています。
「決済状況」は申込者が決済画面URLから決済後、自動で決済済みになるイメージです。
以上で事前準備は完了です。
じぶんフォームでセミナーの申し込み画面を作成する
まずユーザーがセミナーに申し込む画面を、じぶんフォームを利用しノーコードで作成します。
事前準備で作成したkintoneの申込者アプリと連携することで、以下の画面のようにkintone側で設定したフィールドが表示されます。
各フィールドはドラッグ&ドロップで並べ替えができ、必須項目や非表示にする項目の設定もできます。
設定が完了すると、以下のような申し込み画面が作成できます。
kintoneのテーブルにも対応しており、テーブルの行追加・削除も可能です。
同じようなことができるWebフォームって意外とないんですよね。
これでユーザーに案内できる申し込みフォームを作成できました。
じぶんレコードで申込者用画面を作成する
次にじぶんレコードで申し込み者用画面を作成します。
じぶんフォームと同じように、ドラッグ＆ドロップで簡単に作成できます（作成画面は省略します）。
作成した画面が以下のようになります。
じぶんレコードはkintoneとwebhookで連携させることで、上記画面のURLをユーザーに自動でメール送信することができます。
例えば、ユーザーがセミナーに申し込んだタイミングで申し込み内容の確認画面のURLをメールで案内するといった使い方ができます。
連携は簡単で、以下の設定画面でWebhook URLを発行し、kintoneのwebhook設定画面で発行したURLを登録するだけです。
ついでに設定画面でメールの内容も変えておきます。
上記設定をすることで、以下のようにセミナー申し込み受付時にユーザーへメールを送信することが可能です。
以上でユーザーが申し込み内容を確認する画面の実装は完了です
Makeでセミナー申込者の決済画面URLを作成する
セミナー申し込み画面、申し込み内容確認画面の実装が完了したので、次にセミナーの代金を支払うための決済画面のURLを作成していきます。
念のため整理しておくと、申し込みのフローは次のようになっています。
- ユーザーはじぶんフォームからセミナーへの申し込みを行う
- じぶんフォームから送信された申し込み内容がkintoneへ登録される
- Makeによってstripeの決済URLを発行し、申し込みレコードに上書き登録する
- じぶんレコードのURL（申し込み内容確認画面）がユーザーに送信される
これまでで1, 2, 4は実装できているため、このステップでは手順3の部分の実装を行います。
Makeによって決済画面のURLを作成し、そのURLを申込者情報に追記することで、ユーザーは申し込み内容確認画面から決済画面のURLを確認できるという手筈です。
申し込みを検知できるようにする
まずMakeでkintoneに登録された申し込みレコードを検知させるため、Webhookの受信ポイントを作成します。
モジュールのリストから、Custom webhookを選択します。
Addボタンをクリックすると、webhookの作成ウィンドウが開くため、webhookの名前と必要があればIP制限を設定します。
ちなみにcybozu.comのアウトバウンドIPアドレスは103.79.14.0/24なので、実際に運用する際は以下のように設定することを推奨します。
設定すると以下のようにWebhook URLが発行されます。
それでは、kintoneと通信できるかテストしてみます。
Webhookモジュールが以下の画像の状態でkintone側にレコードを登録してみてください。
成功するとモジュールが受け取ったデータを解析し、後のモジュールでデータを扱うことができるようになります。
じぶんフォームから以下のようなデータを送信してみましょう。
受信に成功すると以下の状態になります。
以下のようにkintoneのresponseが解析された状態になります。
これらのデータから必要なデータを抽出し、stripeのリクエスト作成に使用していきます。
stripeの決済URLを発行する
決済URLの発行は以下の2つの手順に分かれます。
- stripeへのリクエストコンテントの作成
- stripeへのリクエストの作成
それぞれ説明していきます。
stripeへのリクエストコンテントの作成
リクエストコンテントを作成するにはまず、kintoneのレスポンスから必要なデータを抽出する必要があります。
そのためにまず、Iteratorモジュールを使用します。
Iteratorモジュールは配列を渡すことで、次に接続するモジュールで繰り返し処理を行うことができます。
今回のケースでは希望セミナーのリストを渡します。
これにより次のモジュールで、希望セミナーごとに繰り返し処理を行い、stripeへのリクエストコンテントを作成することができます。
次のモジュールにはText aggregatorを使用します。
このモジュールは複数の文字列データを1つの文字列にまとめることができます。
以下のように、Source Moduleには直前のIteratorを指定します。
Textは以下のように設定します。
stripeのリクエストのうち、line_itemsの部分を作っている感じです（ここは微妙にコードを書いていると言えなくもない・・・）。
以上でstripeのリクエストコンテントの作成は完了です。
stripeへのリクエストの作成
次にstripeへのリクエストモジュールを作成していきます。
Makeにはstripe用のモジュールが用意されているのですが、stripe CheckoutのSession用モジュールは用意されていないので、HTTPリクエストモジュールを使用して自作していきます。
HTTPモジュールの設定内容は以下のようになります。
設定内容は以下のとおりです。
- Credentials
- StripeのAPI tokenを設定する（後述）
- URL
- Method
- Post
- Body type
- Raw
- Content type
- Custom
- Value
- application/x-www-form-urlencoded
- stripe v1 APIでは フォームのエンコード方式
application/x-www-form-urlencodedを使用する必要があります。
- Request content
- mode: payment
- success_url: テスト環境なので適当なURLを設定
-
7. textの部分は、Text aggregatorのアウトプットを指定する - metadata
- kintoneの申込者アプリのIDと、申し込みレコードのIDを渡す
- ユーザーが支払いを完了したことを検知する仕組みで利用
- kintoneの申込者アプリのIDと、申し込みレコードのIDを渡す
CredentialsはStripeのシークレットキーをコピーして設定します。今回はテスト環境なのでシークレットキーを使用します。
Credentialsの設定内容は次の通りです。
Keyの部分はBearer sk_test_xxxxxのようにBearer を先頭に追加する必要があるので、ご注意ください。
以上でstripeへのリクエストモジュールの設定は完了です。
実際にkintoneにレコードを登録して、決済URLが発行されるかテストしてみましょう。
以下のようにstripeからレスポンスが帰ってくれば成功です。
レスポンス内に決済URLが含まれているのでそのURLアクセスすれば、以下のようにstripeの決済ページにアクセスできるはずです！
以上でstripeの決済URLの発行は完了です。
stripe決済URLを申込者レコードに登録する
最後に、発行した決済URLをkintoneの申込者レコードに登録します。
まず、stripeのJSONレスポンスを解析して、kintoneへのリクエストに使える形にします。
Parse JSONモジュールを使用します。
Parse JSONモジュールで、解析させるJSONの構造を入力していきます。今回必要なのはURLだけなので、以下のようにName: url, Type: Textで作成します（idも追加していますが、今回は不要です）。
解析させるJSONは直前のモジュールのDataに入っているので、JSON stringにはDataを指定します。
以上で決済URLの抽出はできたので、kintoneに登録します。
kintoneへの登録にはKintoneのMake an API Callモジュールを使用します。
モジュールの設定内容は以下の画像のようになります（Connectionの設定は今回は省略します）。
Bodyの内容は公式のAPIリファレンスを参考に作成します。必要な情報は今までのモジュールで揃っているので、必要なものを必要なところに当てはめるだけで作成できます。簡単ですね。
作成できたら実際に動かしてみましょう。
正しく設定できていれば、以下のようにkintoneモジュールがステータスコード200を返してくれるはずです。
また、kintoneの決済URLフィールドにもURLが登録されていることが確認できるはずです。
以上で、stripeの決済URLの発行は完了です。
管理者がユーザーの支払いを確認できるようにする
これまでで「ユーザーがセミナーに申し込む画面」「申し込み内容を確認する画面」「セミナーの代金を支払う画面」の3つをノーコードで実装することができました。
最後に、ユーザーがセミナーの代金を支払ったことを管理者が確認できる仕組みを実装していきます。
ここでもMakeを活用していきます。
stripeの支払い完了イベントをMakeで検知できるようにする
新しくMakeのシナリオを作成し、StripeのWatch Eventsモジュールを追加します。
「Create a webhook」をクリックし、以下のように設定します。
Connectionは、stripe側でAPI KEYを作成し、その値を入力してください。
Groupは「Checkout」を選択します。そうするとEventsが2件に絞り込まれるので、両方にチェックを入れます（厳密には、今回はクレジット決済しか対応していないので、「Checkout Session completed」だけでOKです）
設定が完了したら保存します。そうするとstripeg側の管理画面で、以下のようにWebhookのエンドポイントが追加されているはずです。
ここまで確認できたら、実際に支払い完了のイベントが検知できるかテストしてみましょう。
kintoneで申し込みを1件作成し、発行された支払い画面からstripeのテスト用カードで決済をしてみてください。
うまくいけば以下のように、「checkout.session.completed」イベントを検知できるはずです。
以上でstripeの支払い完了イベントの検知は完了です。
決済完了をkintoneのレコードに反映する
stripeの決済完了を検知できるようになったため、あとはkintone側のレコードの反映するようにします。
再びkintoneのMake an API Callモジュールを使用します。
設定内容は以下の通りです。
stripeのSession作成時、metadataにapp_idとrecord_idをセットしましたね。
決済完了イベントのレスポンスにその情報が含まれるため、それを利用して更新対象を特定しています。
これで決済が完了したことをkintone側へ連携できるようになりました。
実際に動かして確認してみましょう。
以下のようにStatus code: 200のレスポンスが確認できれば成功です！
まとめ
だいぶ長くなってしまいましたが、以上で「ユーザーがセミナーに申し込む画面」「申し込み内容を確認する画面」「セミナーの代金を支払う画面」「管理者が決済完了を確認する仕組み」の4つをノーコードで実装することができました。
実際に使用するには在庫など他にも考慮が必要なこともありますが、要となる決済周りに関してはコードを書くことなく実装できてしまいました。
便利な時代になりましたね。
今回の記事では省略しましたが、決済URL発行シナリオの途中でstripeのカスタマー作成を入れると、stripeの銀行決済にも対応させることができます。
またそのうち、そちらも別記事として書いてみようかと思います。
それではお読みいただきありがとうございました。