Stripeパート - [kintone+Stripe+LINE]をノーコードで組み合わせて無人店舗を実現！

Last updated at 2024-01-17Posted at 2024-01-17

はじめに

本資料は下記イベントの説明用資料です。

事前にMakeを利用してLINEのチャットbotを用意するパートを完了した状態から開始します。そのため、この記事に直接アクセスされた方や、資料内で紹介されている前提条件がわからないという方は、まず初めに以下の資料をお読みください。

このパートで取り組むこと

このパートでは、Makeのシナリオがおおよそ次のような状態から始まります。

Stripe編では、この[ここを Stripe Checkout URLに変更する]テキストを、実際のURLに変更する作業を行います。このパートを完了すると、次のようにLINE上のチャット入力に対する返信に、注文用URLが含まれるようになります。

また、後半のステップでは、kintoneに連携するための注文情報を取得するシナリオも新しく作成します。

Stripeアカウントを準備する

さっそく始めていきましょう。このパートでは、前のパートで利用したLINEとMakeに加えて、Stripeアカウントが必要です。すでにアカウントをお持ちの方は、次のURLからログインしましょう。

Stripeアカウントは、メールアドレスがあれば無料で作れる
もしStripeアカウントがない方も安心してください。有効なメールアドレスがあれば、無料ですぐにStripeアカウントが作成できます。

https://dashboard.stripe.com/register から、アカウントを作成して、ログインしましょう。

ワークショップ用のストアアカウント

Stripeでは、ストアやサービス毎に複数のアカウントを作成・管理することが可能です。アカウントを分けることで、APIの動作確認やワークショップ中の事故で顧客データや請求内容に予期せぬ変更が入るリスクなどを回避できます。

ページ左上のアイコンをクリックし、[新規アカウント]をクリックしましょう。

アカウントでは、ビジネス・企業名とどの国で業務を行なっているかの２点を設定します。

今回はデモアプリですので、以下のように設定しましょう。

アカウント名: demo.furni.com
業務をおこなっている国: Japan

設定が完了すると、アカウントのTOPページに移動します。

Tips: 本番環境での利用について

アカウント作成すると、テスト環境が用意されます。

テスト環境では、「Stripeが用意するテストカード番号以外の入力を拒否する」「請求書などのメールを送信できるアドレスが制限されている」などの制限があります。

実際に顧客の決済を受け付けるには、なるべく早い段階で本番環境の利用申請を行うようにしましょう。

なお、「サービス内容の詳細などの情報が不十分だと判断された場合」や「禁止/制限付き業種に該当すると判断された場合」、アカウントが停止される可能性があります。禁止・制限付き業種に該当しないかの事前に確認や、できるだけ詳細なビジネス情報の入力をお勧めします。

LINEから注文する商品と料金を作成する

今回のワークショップで販売する商品の情報は、Stripe上で管理します。ここからはStripe上に販売する商品を登録する方法を紹介します。
まず左側のメニューから[商品カタログ]をクリックします。

もしメニューにない場合は、[その他+]をクリックしましょう。サブメニューが表示されますので、その中にある[商品カタログ]をクリックします。

商品カタログページの右側にある[商品を追加]ボタンをクリックしましょう。

商品の登録画面が開きます。

デモ用の商品として、以下のテキストと画像を入力・アップロードしましょう。

商品名	画像（フリー素材DLページ）	説明文
焙煎済みコーヒー豆	https://www.pakutaso.com/20170200038post-10294.html	厳選したコーヒー豆をお届けします。

続いて料金を登録します。

種類	金額	通貨
1回限り	2000	JPY

[商品を追加]ボタンをクリックして保存しましょう。保存に成功すれば、[商品カタログ]の一覧に商品が追加されます。

これで商品の登録が完了しました。

Stripe Payment Linksで支払いURLを作成する

続いて決済ページのURLを簡単に作ってみましょう。商品カタログの一覧ページで、作成した商品をクリックします。

商品情報と、設定された料金プランが表示されます。料金が１つ登録されていますので、[支払いリンクを作成]ボタンをクリックしましょう。

決済ページの設定画面とプレビューが表示されました。

少し設定をカスタマイズしてみましょう。[オプション]にある[支払い件数を制限]をオンにします。すると数量が指定できるフィールドが表示されますので、2や5などの数字を入れましょう。この設定を有効にすることで、支払いリンクから決済できる回数を制限することができます。

ページ右上の[リンクを作成]ボタンをクリックすると、支払いリンクが作成されます。

支払いリンクのURLが生成されました。[コピー]ボタンをクリックして、URLをコピーしましょう。

Makeで、LINEの返信メッセージに支払いURLを設定する

決済用のURLを取得しましたので、Makeに設定した返信メッセージを変更しましょう。Makeで設定した返信メッセージのテキストのうち、[ここを Stripe Checkout URLに変更する]を先ほど取得したURLに変更します。

これで最小ステップでのLINEとStripeを使ったチャットコマースを実現できます。

MakeのシナリオにStripeを組み込む

LINEとStripeの連携を最小構成で済ませる方法を紹介しました。しかしこの方法では、注文する商品や数量・組み合わせごとにURLを発行する必要があります。そこでMakeを使って「リダイレクト型の決済フォーム」を動的に作る方法も体験しましょう。

StripeのAPIキーを取得する

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モジュールを追加する

動的に支払いURLを作成する場合、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が表示されました。

ここからはStripe Checkoutを利用した注文URLを作成する設定を行いましょう。

Stripe Checkoutで動的に注文URLを作成する

[Make an API Call]では、APIリクエスト内容をそれぞれ設定する必要があります。次の表とスクリーンショットを参考に、情報を入力しましょう。

各項目に入力する情報

Connection: [作成したもの]
URL: v1/checkout/sessions
Method: POST
Headers: デフォルトのまま
Query String: 下の表を参考に設定する
Body: 空欄

[Query String]に登録する情報

Key	Value	Valueに入力する値の作り方
`mode`	`payment`	`payment`をそのまま入力 or コピーアンドペーストしてください
`line_items[0][quantity]`	`1`	注文数量です。整数を入力してください。
`line_items[0][price]`	`<price_から始まる、作成した商品の料金ID>`	`price`の作り方を見る
`success_url`	`https://line.me/R/oaMessage/%40{@を除いたLINE ID}`	`success_url`の作り方を見る
`metadata[line_user_id]`		`line_user_id`の作り方を見る

`success_url`作成方法

success_urlは、決済が完了した後に遷移するページのURLを指定します。今回はLINEのチャットに戻る必要がありますので、LINEのURLを作成しましょう。

LINE Official Account Managerを開き、下の画像を参考にbotのLINE IDを取得しましょう。

取得したLINE IDを使って、次のようなURLを作ります。

https://line.me/R/oaMessage/%40{@を除いたLINE ID}

このURLを、success_urlの値に設定しましょう。

参考: https://developers.line.biz/ja/docs/line-login/using-line-url-scheme/#opening-chat-screen

LINEのユーザーIDを設定する方法

kintoneに情報を送信するため、metadataにLINEのユーザーIDを設定します。Valueには、Watch Eventsのデータから、Events[].Source.User IDを選択しましょう。

料金IDの取得方法

料金IDは、Stripeダッシュボードの[商品カタログ]から取得できます。商品カタログの一覧ページで、作成した商品をクリックします。

商品詳細ページの中段に、[料金]セクションが表示されています。ここに表示されている料金の[API ID]をコピーして入力しましょう。

price_から始まるIDの右側に、コピーボタンがありますので、これを使うと簡単にコピーできます。

MakeのシナリオにStripeを連結する

用意したモジュールをシナリオに組み込んでいきましょう。組み込みは「既存のステップのunlink」と「新しいlinkの設定」の２手順で行います。

作成済みのステップをunlinkする

まずは作成済みのステップをunlinkしましょう。[Watch Events]と[Send a Reply Message]を結ぶ線をクリックし、[Unlink]をクリックしましょう。これで一度リンクしたステップのつながりを解除できます。

解除に成功すると、次の画像のように3つのステップが孤立した状態の画面ができあがります。

新しいリンクを設定する

新しいシナリオでは、次のようなステップで処理を行います。

LINEのWebhookイベントを受け付ける
Stripe Checkout Sessionを作成する
Checkout SessionのURLを含む返信文をLINEに返す

そのため、[LINE - Watch Events]→[Stripe Make an API Call]→[Send a Reply Message]の順番でリンクを作りましょう。

APIレスポンスを記録するため、シナリオを一度呼び出す

シナリオの流れをつなぐことができました。しかしLINEの返信文にCheckout SessionのURLを含めるには、[Make an API Call]のレスポンスをMakeに認識させる必要があります。これはデフォルトではどのようなAPIレスポンスがくるか、Make側が判断できないモジュールであるため、Bodyの中身をUIで選択できないためです。

APIレスポンスを認識させるには、一度シナリオを実行させましょう。画面左下の[Run once]をクリックしましょう。

すでにシナリオを一度実行させたことがある場合、このようなメッセージが表示されます。

この場合、[Wait for new data]をクリックしましょう。

[Run once]が[Stop]に変わりました。これでLINEへのメッセージ送信からシナリオを実行する準備ができました。

LINEのチャット画面から、メッセージを送信しましょう。（入力するテキストは、どんな内容でも構いません）。シナリオにエラーが発生していなければ、前のステップで設定したPayment Linksの支払いURLが含まれたメッセージが表示されるはずです。

これでMakeが[Make an API Call]モジュールでどんなレスポンスを受け取るかを認識するようになりました。

LINEの返信文に、Stripe　Checkoutの注文リンクを追加する

[Send a Reply Message]モジュールの返信文を入力している部分に、[Make an API Call]モジュールの結果を入れましょう。Bodyの中にurlがありますので、次の画像のように設定しましょう。この際Payment Linksで作成した支払いURLは削除します。

これで注文URLを作成するシナリオが完成しました。

注文してみる

実際に動作させてみましょう。先ほどのステップと同様、[Run once]をクリックしてシナリオを起動させます。

LINEからテキストを送信すると、checkout.stripe.comから始まる注文URLが自動返信されるようになります。

リンクにアクセスすると、Stripeが提供する注文フォームが表示されます。

テストモードでは、ダミーのカード情報を入力することで、決済処理を試すことができます。下のスクリーンショットを参考にカード情報などを入力して、[支払う]ボタンをクリックしましょう。

様々な支払いシナリオをテストする
Stripeでは、決済に関する様々なシナリオをテストする仕組みが用意されています。

海外からの支払いをテストする
盗難などで停止されたカード番号が入力されたケースをテストする
チャージバック（不審請求）が発生したケースをテストする

以下のドキュメントから、テストケースごとのカード番号を確認できます。ぜひこちらもお試しください。

https://stripe.com/docs/testing

Stripeの注文情報をkintoneに連携するためのシナリオをMakeで作成する

ここまではLINEでのチャットから商品の注文や、サブスクリプションを申し込みするフローの作成をMakeで行いました。ここからは注文された商品などの情報をkintoneなどに送信するための準備を行いましょう。

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 Shellで、ブラウザからWebhookイベントを呼び出してみる

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

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

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

するとページ下部にコマンド入力画面が開きます。これがブラウザ上でStripe CLIを実行できるStripe Shellという機能です。

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

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

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

このデータを元にして、kintoneに連携する準備を行いましょう。

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]モジュールを利用して「カートの中身」を取得しましょう。