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

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

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

#LINEオンラインサロン全体像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/48ad9bc8-ccfc-f7f1-d7e8-2aed7b6e47e8.png)

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

上記の機能を考えました。
技術的な流れとしては
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/13c0624c-b79c-dbf5-e2a5-cd9fd75a8e12.png)
・LINE Payのサブクス決済をLINE上で実装
・Google Calendar API(webAPI)からカレンダー情報を取得
・LINE Messaging APIを利用して、空きスケジュールなどの情報を対象ユーザーに向けて一斉送信

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

#動作の説明
まず、お友達登録をしてメッセージを送信
（LIFFで会員になるなどボタンを設置して、テキストを送るのも良いですね）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ab11e853-1ffd-3d83-32f2-fb82919b1bb7.png)

YESを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/57f39a77-2433-c490-d7b4-3727d8c7c4c4.png)

1円を支払うボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/c19d2b20-10db-fca2-7a09-3b6801c3e2d7.png)

決済ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/0ce60f45-fa69-c4eb-91c9-a5dab595b5a2.png)

決済完了するとスタンプと、オウム返し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/4506d3dd-4ae3-2583-46b3-6ae66c309b2a.png)

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

#LINE Payを使った決済をBotに組み込んでみよう
[LINE Payを使った決済をBotに組み込んでみよう](https://engineering.linecorp.com/ja/blog/line-pay-bot-node-js/)というサイト

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

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

#はまった所１
githubのread meにあった手順書がスペルミスしていました。コピペで使うとエラーに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/635f3e1f-92e8-708a-80e7-d62094768cb6.png)

正しくは

```
node with_middleware.js
```

#はまった所２
セキュリティにひっかかりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d5850ea8-dbf2-e289-eb44-6afd71fa6be4.png)

LINE Pay公式のDocumentでホワイトリストに登録をしてあげなければならないです。
[LINE Pay Developers White IP](https://pay.line.me/jp/developers/techsupport/sandbox/whiteip?locale=ja_JP)

LINE Pay管理画面にログインします
[LINE Pay Login](https://pay.line.me/portal/jp/auth/login)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/fdffcc48-0eb0-a672-3a79-966849cc78cd.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/ca8dbb4d-9746-2581-a3b1-d60ffc53a4d4.png)

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

その後はオウム返し

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/7e39bd4d-ed36-fb74-5cea-73f5ad39b52f.png)



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

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

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

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