はじめに
これは、2019/03/21(木・祝)開催 JP_Stripes Connect 2019のワークショップ『「電話でペイ！」(Twilio Pay)を試してみよう！』を行いました。こちらの内容はTwilio を使って電話決済を体験する(中級編)で問題点を改善したものです。
なお、ワークショップ資料は以下です。
問題点
「Twilio を使って電話決済を体験する(中級編)」では、作成したシステムでは、決済が発生した状況を、TwilioSyncを利用して保持しています。
しかし、この保持をするキーが同一であるため、複数の電話が同時に発生し、同時に決済を行った場合、その状況は、常に上書きされてしまいます。※決済自体は成功します。
今回この問題を改善します。
改善方法
まあご存知の通り、キーが同一で１箇所に保存してしまっていることが問題ですので、それを改善すれば良いです。
改善するためには、現在利用しているTwilioSync(Document)をTwilioSync(Map)に切り替え、着信毎にユニークなキー(CallSid)で、情報を保存します。またせっかく複数同時対応できるので、その状態もリストにすることにしました。
TwilioSyncについて
例えばブラウザ間やアプリ間で情報をリアルタイムでやり取りするとき、自前で仕組みを作ったり、Firebaseなどのサービスを利用したりすると思うのですが、Twilio Syncでもそのようなリアルタイム通信をすることが可能です。しかも簡単に。
TwilioSyncは、いわゆるJSONだけではく、リスト形式やマップ形式のデータ構造を動悸することもできます。Twilio を使って電話決済を体験する(中級編)では、Documentを利用し、JSON形式で保存していました。今回はKey-Valueとして取扱ができるMAPを使います。
なお、Syncは従量課金制で使った分だけ課金です。
くわしくは、Twilioエバンジェリストの高橋さんの記事が非常にわかりやすいので、ご参照ください。
TwilioのRuntime Clientを使ってSyncをデータベースのように扱おう
こん感じです
改善した状態は以下のような画面になります。
一覧画面
この画面を開いた状態で決済を行うと、１電話につき１行増え、その行にステータスとCallSidが表示されます。決済を行うたびに行が増えます。
詳細画面
こちらは、これまでの情報に追加して、CallSid、決済完了時のStripe側のキー、電話番号などが表示されるようにしています。
ソースコード
取り急ぎ、以下に公開しました。
https://github.com/takeshifurusato/twiliopay_stripe_workshop
「Twilio を使って電話決済を体験する(中級編)」を完了した状態であれば、ファイルを追加・置換することで動作します。
補足・まとめ
- Sync(Map)に登録するときのKeyは、着信時のCallSid(呼のユニークキー)を使っています。
- 詳細ページはURLParameterでCallSid(MapのKey)を指定させています。
- Sync(Map)を初めて使ってみたが、お手軽で便利です。
- Sync(Map)にはTTLを指定することができるが、消えるタイミングは正確ではないようです。(expiredで指定された日時から数分後〜数時間かかる)
- Syncは従量課金( https://twilio.kddi-web.com/price/sync/ )200時間までは無料です。
- 一覧・詳細画面を表示すると上記課金対象となる。複数ブラウザ・複数回更新毎に課金の対象となるので、URLの公開などに注意が必要です。
- Syncに登録されるタイミングが、カード番号入力後のStatusCallbackのタイミングであるため、電話受話直後にはSyncに登録されません（一覧画面に表示されません）。
- 上記を改善するためには、現状TwiMLBinsでTwiMLを出力しているが、これをFunctionsに切り替え、Syncへの登録とTwiML出力をする必要があります。