ご参加頂きありがとうございます！
こちらはLINE Developers Communityで発表させて頂く内容の第二弾となります。よろしければ前回の 動画アーカイブもご覧ください！LIFFとStripe CheckoutでLINE上で使える決済画面を作ろうハンズオン - YouTube
今回はMicrosoftの提供する Power Automate と Stripe Checkout を使用してLINEで使えるチャットECを作ってみました。コードは書きませんので、非エンジニアの方もお気軽に挑戦してみてください！
完成イメージは デモアカウント をご覧ください。
.
想定している参加者の方
- RPAやローコード／ノーコード開発に興味がある人
- Power Platformによる連携で何ができるか知りたい人
- チャットボットやLINEミニアプリの収益化を考えている人
- Stripeをビジネスで活用したい非エンジニア
.
当日のご質問はこちら
https://docs.google.com/spreadsheets/d/1cQoPC45H_dWBbhpajP1kuBRYuuoCGvh5XywS175cYZk/edit?usp=sharing
.
ハンズオンの前にご用意ください
- Stripeのアカウント
- LINE Developersのアカウント
- Power Automateの無料試用版ライセンス or 有料ライセンス
- ブラウザとメモ帳（エディタなら何でもok）
Power Automateは有料プラン用の機能を使用します。Power Appsの開発用プログラムに参加すると無料で機能を試すことができますので、この機会にぜひ使ってみてください。
プロジェクト一式をダウンロード
こんな感じでファイルが入っています。メモ用にテキストファイルが入ってますのでハンズオンの進行に合わせて編集してください。
LINE Developersを開く
.
Messaging APIのチャネルを作成
まずは適切なプロバイダーにチャネルを作成していきます。Messaging APIを使用しますので Messaging API を選んでチャネルを作成してください。
.
アクセストークンを取得
チャネル作成後、Messaging APIのチャネルアクセストークンを記録します。先ほどメモ用のファイルに転記します。
Webhookの設定は後ほど行いますので、ここでは空欄のままで大丈夫です。
Stripe のダッシュボードを開く
.
テストモードに変更
デモということでコンソール右上の「テスト環境」のトグルをオンにします。
.
APIキーをメモ
まずはStripeのAPIキーをメモします。開発者 - APIキー を開きます。「テストキーを表示」をクリックするとシークレットキーが表示されますのでコピーしてメモファイルに転記します。
.
商品の作成
続いて商品を作っていきます。チャットECで表示したい商品を3つほど作成します。
商品 - 商品を追加 から商品名、商品画像、料金を登録します。今回はECということで単発決済ですので、料金設定は「一括」を選択して下さい。
.
料金の API ID をメモ
料金を作成すると各料金に対して ID が発行されます。商品を3つほど登録して価格IDをメモファイルに転記します。
次のステップで使いますので下のような形式でメモしてください。
[
"price_XXX",
"price_YYY",
"price_ZZZ"
]Power Automate の管理画面を開く
Microsoft Power Automate | Microsoft Power Platform
.
テンプレートをインポートする
プロジェクトにテンプレート用のzipファイルが3つ入っていますので、ご自身のPower Automateの環境にこれらをインポートして下さい。インポートの詳しい手順はドキュメントをご参照ください。ソリューションをインポートする方法 - Power Automate | Microsoft Docs
それぞれインポートが完了したら前項までに作成したメモをもとに、フローを編集していきます。旗が立っている項目の編集が必要です。
.
フロー1 Stripe Checkoutにリダイレクト
Checkoutページにリダイレクトするためのフローです。クエリパラメータに価格IDを受け取りcheckoutのセッションを生成してリダイレクトします。以下の項目を設定します。
- Stripe シークレットキー
- 成功時URL ... Stripeの決済が成功したときにリダイレクトされるURLです
- 失敗時URL ... Stripeの決済が失敗したときにリダイレクトされるURLです
編集が終わったら 保存 を押します。
.
フロー2 Stripe Webhookハンドラー
StripeからWebhookを受け取って、ごにょごにょするためのフローです。以下の項目を設定します。
- LINE アクセストークン
- Stripe シークレットアクセスキー
- 価格IDリスト ... Stripeの料金ID一覧。配列型の変数なので↓のような形式で設定します
[
"price_XXX",
"price_YYY",
"price_ZZZ"
]編集が終わったら 保存 を押します。
.
フロー3 LINE Webhook ハンドラー
LINEからWebhookを受け取ってメッセージを返すためのフローです。以下の項目を設定します。
- LINE アクセストークン
- アプリURL ... フロー1の受信URLを設定します
- 価格IDリスト ... Stripeの料金ID一覧。
- カルーセルメッセージ ... JSONフォーマットのオブジェクトを設定します
編集が終わったら 保存 を押します。
自動でメッセージを返信できるようLINE DevelopersのコンソールからWebhookの設定を行います。
Messaging API - Webhookの利用 をオンに変更し、Webhook URL の欄には「LINE Webhookハンドラー」の受信URLを設定してください。
これでボットの作成が完了しました。作成したアカウントに対して「買い物をする」とメッセージを送ると返事が返ってくるはずです。
最後のステップです。StripeにWebhookを設定してLINEと連携ができるようにします。
Stripeのダッシュボード から 開発者 - Webhook - エンドポイントを追加 を開きます。
エンドポイントURLに「Stripe Webhookハンドラー」の受信URLを設定し、リッスンするイベントには checkout.session.completed を選択します。
テスト決済してみよう
お疲れ様でした。以上でアプリの作成は完了です。実際に決済してみましょう。
Stripeはテストカード 4242-4242-4242-4242 で決済を試すことができます。住所などはひとまず適当でokです。決済後に↓のようなメッセージが届けば成功です。
.
Stripe の決済履歴を確認
Stripeのダッシュボード にも決済の履歴が残っているかと思います。支払い - すべての支払い から確認できます。
.
おわりに
ハンズオンお疲れ様でした。Power Automate x Stripe x LINE の掛け合わせのパワフルさを実感頂けたのではないでしょうか。特にPower Automate は有料ライセンスにすると外部APIの連携が可能になり、LINE、Stripe のみならず様々なサービスと組み合わせることができます。ぜひ色々と触ってみてください！
本ハンズオンに関して、ご不明点などありましたら Twitter へDM下さい。最後までお付き合い頂きありがとうございました！
