6
2

More than 3 years have passed since last update.

LINEでオンラインサロン作ってみたい

Last updated at Posted at 2020-12-29

LINEでオンラインサロン

先日、LINE Payの決済について学びました。
ネット検索をしていると、LINEpayのサブクス決済をLINE公式アカウントで実装するコードを公開しているサイトを見つけました。

最近、wordpressでオンラインサロン、会員サイトを作りたいという要望がとても多いので
LINE公式アカウント上でサブスク管理が出来、限られた会員だけが使えるLINE公式アカウントがあっても面白いのかなと思い実装してみる事にしました。
オンラインサロンでは、サービス内容に個別zoom相談を組み込むことが多いので、googleカレンダーと同期をして、空きスケジュールに自動で予約が入る仕組みも一緒に構築してきたいと思います!

LINEオンラインサロン全体像

image.png

・サブクス決済は自動でLINE上で行える
・フリーで質問・相談のチャットが可能
・チャットでは解決できない事をzoomなどでオンライン個別相談を行う
・対象ユーザーに向けてお知らせ一斉送信

上記の機能を考えました。
技術的な流れとしては
image.png
・LINE Payのサブクス決済をLINE上で実装
・Google Calendar API(webAPI)からカレンダー情報を取得
・LINE Messaging APIを利用して、空きスケジュールなどの情報を対象ユーザーに向けて一斉送信

それでは、LINE Payサブスクリプション決済の構築部分を紹介します。

動作の説明

まず、お友達登録をしてメッセージを送信
(LIFFで会員になるなどボタンを設置して、テキストを送るのも良いですね)
image.png

YESを選択

image.png

1円を支払うボタンをクリック
image.png

決済ボタンをクリック
image.png

決済完了するとスタンプと、オウム返し
image.png

決済か終了すると、正式にLINE公式アカウントのメンバーになった感じがしますね。
それでは、参考にしたサイトを紹介します。

LINE Payを使った決済をBotに組み込んでみよう

LINE Payを使った決済をBotに組み込んでみようというサイト

1.botにお友達追加
2.サブスク決済の案内
3.LINE Payで決済
4.決済完了するとLINE公式アカウントでの対話可能

こんな流れを実装出来ます。

はまった所1

githubのread meにあった手順書がスペルミスしていました。コピペで使うとエラーに
image.png

正しくは

node with_middleware.js

はまった所2

セキュリティにひっかかりました

image.png

LINE Pay公式のDocumentでホワイトリストに登録をしてあげなければならないです。
LINE Pay Developers White IP

LINE Pay管理画面にログインします
LINE Pay Login

image.png

【決済サーバーIP管理】をクリックして、エラーで表示されていたIPアドレスを入力
最後の数字は【24】を入力して登録します

image.png

出来た

Line Payのビジネスアカウント開設していたので、決済完了までの動きを見る事が出来ました。
完了するとスタンプ+メッセージ

その後はオウム返し

という部分までコードが実装されていました。

image.png

まとめ

今回実装した機能をベースに、今まで学んできた事を組合わせてどれだけの事が出来るのかチャレンジしたいと思います!

1.LINE Messaging API
2.web APIとの連携

を実装していきたいと思います。

その後、実装しましたが、長くなるので記事を別に分けました。
https://qiita.com/misa_m/items/f9c5c1adc5f4c96acb8a

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2