この記事では、Stripeを使った商品の決済やサブスクリプションの契約申し込み時のバックエンドのデータ処理について、Make.comを使ってノーコードに実現する方法を紹介します。Stripe Webhookを必要とする業務フローを実現させたい場合に、POCとして実験的にコードを書かずに実現する方法や、開発チームを持たない小規模なプロジェクトで実現させる際のヒントとしてお使いください。

決済処理は非同期処理

ECサイトやSaaSのシステムを開発する際、「決済処理部分」については、Webhookなどを利用した非同期なアーキテクチャで設計する必要があります。これは決済手段によって、「その場で決済が完了しないケース」が発生することに対応する目的があります。

例えばコンビニ決済をサポートした場合、ユーザーはサイトでの注文処理を完了した後に、コンビニエンスストアの店舗にて支払い処理を行う必要があります。システム側は、コンビニエンスストアでの支払い処理が完了したことを、ネットワークからイベントとして受け取ることで発送等の処理を開始します。

https://stripe.com/docs/payments/konbini?locale=ja-JP

銀行振込をサポートする場合も同様です、ユーザーが指定の銀行口座に振り込みを行い、その残高と請求金額の消し込みが成功してから、発送やアカウントの有効化などを行う必要があります。

https://stripe.com/docs/payments/bank-transfers/accept-a-payment?invoices=without

また、サブスクリプションに目を向けてみると、製品トライアルからの自動解約や有料プランへの切り替えなどの業務フローが非同期に発生します。サブスクリプションの請求管理等についてはStripe内部で完結しますが、Stripeの外にあるリソース、例えばCRMを使った顧客や担当営業への連絡や、業務システム側が持つデータベースとの連携などは、サブスクリプションのステータスが変わったタイミングをトリガーに処理を走らせる必要があります。

このようなアプリケーションの外からトリガーされる処理を実行する場合、通常Webhookを利用してシステム間の連携を行います。ここからはWebhookを使った連携を、ノーコードツールで実現する方法を紹介します。

Make.comを利用して、ノーコードにStripeからのイベントを処理するワークフローを構築する

Make.com(以降Make)は、Stripeと連携が可能なノーコードツールの1つです。ワークフローを視覚的に作成・編集することができるなど、サービス間の連携やデータの流れを視覚的に確認しながら作成・運用できます。このツールを使うことで、APIを開発するためのリソースがない場合でも、複数のサービスを連携させたワークフローが構築できます。

今回はStripe CheckoutやPayment Linksで決済された注文情報を、Make内で取得するフローを構築してみましょう。

Step1: MakeとStripeを連携する

まずはMakeとStripeを連携する準備から始めます。MakeでStripeを利用するには、APIキーが必要です。Stripeダッシュボード上部にあるメニューで、[開発者]をクリックしましょう。開発者ページのタブに[APIキー]がありますので、これを開きます。

APIキーは３種類あります。今回は[シークレットキー]を利用しますので、[テストキーを表示]ボタンをクリックしましょう。

sk_testから始まるAPIキーが表示されました。このAPIキーをコピーしましょう。

制限付きAPIキーで、より安全にStripeアカウントを運用する
シークレットキーは顧客情報や売上データなどにもアクセスできる、非常に強力な権限を持つAPIキーです。そのため、本番環境で利用する場合は、[制限付きキー(Restricted API Key | RAK)]の利用をお勧めします。

今回のワークショップで使用する場合、次の権限を有効化しましょう。

リソースタイプ	権限	Connectの権限
Balance	読み取り	なし
Events	読み取り	なし
Checkout Sessions	書き込み	なし
Webhook Endpoints	書き込み
（それ以外のリソース）	なし	なし

Stripeモジュールを追加する

StripeのAPIを利用するには、MakeのStripeモジュールを利用します。画面下部の[+]ボタンをクリックして、新しいモジュール追加画面を開きましょう。

検索窓に[Stripe]と入力して、[Enterキー]をクリックすると、Stripeモジュールが表示されます。これをクリックしましょう。

Stripeモジュールをクリックすると、追加するアクションが選べる画面が開きます。[Make an API Call]と検索窓に入力し、[Make an API Call]アクションをクリックしましょう。

新しいアクションが追加されました。右上に赤いバッジが表示されていますので、クリックしてみましょう。

モジュールに関する注意メッセージが表示されました。[The module is not connected to the data flow]は、このモジュールがシナリオ内のデータフローに接続されていないことを伝えています。これについては、後のステップで接続を行いますので、一旦後回しにしましょう。

もう１つのメッセージ[The module is not set up]は、MakeのStripeモジュールがStripeアカウントと接続できていないことを伝えています。接続を行うため、このテキストをクリックしましょう。

The module is not set up.　をクリックすると、次の画面に切り替わります。[Create a connection]をクリックして、接続のためのウィザードを開きましょう。

接続画面では、[Connectionの名前]と、[API Key]の2つを入力します。　[Connectionの名前]　はMakeでStripeモジュールを利用する際に、どのStripeアカウントと接続するかを判断するために利用します。ワークショップでテストするだけであれば、デフォルト値の[My Stripe connection]のままで進めましょう。

前のステップ取得したStripeのシークレットキーを API Keyにペーストしましょう。この状態で[Save]をクリックすると、接続設定が完了します。

[Connection]に作成した名前のConnectionが表示されました。

Step2: MakeからStripe Webhookを接続する

続いてMakeでStripeのWebhookが送信するイベントを受信するための準備を始めましょう。Makeでシナリオ一覧ページに移動し、[Create a new scenario]ボタンをクリックします。

新しいシナリオ作成画面が開きましたので、[+]ボタンをクリックします。

トリガーになるサービスや種類を選べます。検索フォームに[Stripe]と入力し、[Stripe]をクリックしましょう。

今回は[Watch Events]を選択します。これでStripe上で発生したイベントをトリガーに、Makeのシナリオを実行できます。

[Watch Events]を使ってStripeのイベントをトリガーにする場合、[Create a webhook]ボタンが表示されます。これをクリックしましょう。

[Webhook name]、[Connection]そして[Group]を設定します。[Connection]は、先ほど作成したものを選択しましょう。

Groupは、StripeのWebhookイベントを指定します。今回は次の２つを選択しましょう。

[Save]をクリックすると、Webhookの設定が完了します。

Stripeダッシュボードの[開発者 > Webhook]を見ると、make.comドメインのURLが設定されていることがわかります。

Stripe ワークベンチで、ブラウザからWebhookイベントを呼び出してみる

[Make an API call]と同じく、こちらもMake側でどんなデータが利用できるかを認識させる必要があります。今回はStripeダッシュボードから簡単にWebhookイベントをトリガーする方法を紹介します。

まずはMakeのシナリオ画面で、[Run Once]をクリックしましょう。

続いてStripeダッシュボードを開きましょう。画面右下に[>_]のようなアイコンがありますので、クリックします。

するとページ下部にツールバーが表示されます。これがStripeに関するデバッグやログの調査などを簡単に行うためのツール、ワークベンチです。

^アイコンをクリックすると、ワークベンチのUIが展開されます。ページ下部にシェルコマンドを入力するエリアがありますので、こレを使ってStripe CLIを利用したテストイベント送信を試してみましょう。

stripe trigger checkout.session.completedと入力してみましょう。stripe triggerはStripe上の任意のWebhookイベントをテストできるCLIコマンドで、今回はStripe Checkoutの決済が完了した際にトリガーされるcheckout.session.completedをテストしています。

コマンドを入力したら、[Enterキー]を押して実行しましょう。次のようなテキストが表示されて、[トリガーが成功しました]と表示されれば成功です。

Make側に戻って、先ほど作成した[Watch Events]をクリックしてみましょう。OUTPUTの中にcheckout.session.completedで送信されるイベントが表示されるようになりました。

このようにして、Stripeから送信されるデータを使ったワークフローを、Makeにて構築することができます。

checkout.session.completedに加えてcheckout.session.async_payment_succeededも利用する理由
コンビニ決済や銀行振込などの「注文後に支払い操作をユーザーが行う決済手段」もStripe Checkoutはサポートします。その場合、checkout.session.completedイベントがトリガーされた時点ではまだ支払いが完了していません。
コンビニ決済や銀行振込などの非同期型決済手段での入金・支払い確認を受け付けるには、checkout.session.completedだけでなくcheckout.session.async_payment_succeededもトリガーに利用しましょう。

この場合、[Watch Events]の次のステップに[Router]モジュールを配置して、payment_status==='paid'以外のイベントを処理しないように設定します。

注文内容を取得する

checkout.session.completedとcheckout.session.async_payment_succeededイベントには、注文した商品の数量などの情報が含まれていません。そのため、[Make an API Call]モジュールを利用して「カートの中身」を取得しましょう。

[Watch Event]（もしくは[Router]）のリンク先に新しくモジュールを作成しましょう。こちらも[Make an API Call]を選択します。

今回入力する内容は、次の通りです。

Connection: [作成したもの]
URL: v1/checkout/sessions/[1. Object: id]/line_items
Method: GET
Headers: デフォルトのまま
Query String: デフォルトのまま
Body: 空欄

URL内のIDについては、[Watch Events]のOutputからIDを取得しましょう。

こちらのレスポンス内容もMakeに認識させましょう。もう一度Stripeダッシュボードからstripe trigger checkout.session.completedを実行しましょう。

これで注文商品の中身が[Make an API Call]モジュールのOutputから取得できるようになりました。

まとめ

このようにMakeを利用することで、Stripeの決済やサブスクリプション申し込み・請求サイクルに関連するWebhookイベントを処理するワークフローを、ノーコードに構築できます。決済やサブスクリプションを顧客に提供する場合、注文やサブスクリプションの申し込みフローだけでなく、請求書の未払いやトライアルの終了・不正利用アラートなど、さまざまな場面でWebhookを利用した連携が必要になります。運用フェーズに入って、新しくWebhook APIや業務フローを構築・追加することが難しいケースや、実験的にフローを作成してみたいケースなどでは、Makeのようなノーコードで実装できるツールを利用することで、素早く仮説の検証や業務の効率化が行えます。

また、Stripeワークベンチを利用することで、このようなノーコードツールのテストやデバッグについても、1ブラウザで完結することができます。ぜひMakeとStripeワークベンチを活用して、様々な業務フローの自動化・効率化に挑戦してみましょう。

参考