2019-04-17に熊本で開催された大人のキャッシュレス勉強会(JP_Stripes Kumamoto #1)のハンズオン資料です。

1. Stripeハンズオン
オンライン決済入門
2019年4月17日
オトナのキャッシュレス勉強会
JP_Stripes Kumamoto #1
山ノ内

2. 自己紹介
名前
年齢
住まい
お仕事
山ノ内 祥訓(よしのり)
0x27
熊本県
現在は某大学病院の特任助教で臨床研究のデータマネー
ジャとして主に臨床研究データに関する設計及び開発と
運用をやっています。
某SIerで医療情報システムの導入及び開発を10年ぐらい
やっていました。
SNS Facebook https://www.facebook.com/yoshinori.yamanouchi.12
Github https://github.com/eolla1013
資格等 修士（医科学） 現在博士課程
医療情報技師

3. 今回のハンズオンの目的
Stripeにサインアップを行い、Webページにオンライン決済ボタンを
追加します。
オンライン決済ではテストカードの決済が行えるようにします。
本物のカードで決済するには、事業者情報や口座情報などを事前に設
定しなければいけません。少し時間がかかりますので今回は対象とし
ませんが、スムーズにいけばこちらも十数分で終わります。余裕のあ
る方は挑戦してみてもよいでしょう。

4. ハンズオンの環境について
今回のハンズオンではnode.jsとStripeを動作させるイン
ターネットに公開されたWebサーバが必要になります。
Cloud9を使用して進めていきますが、ローカル環境で行う
場合はnode.jsのインストールの他にngrokやlocaltunnel、
serveoなどローカルWebサーバを公開できる環境を準備し
てください。

5. ハンズオンの大まかな流れ
1. Cloud9でサンプルWebページを作成。
2. Stripeのサインアップ
3. ビジネス設定(任意、振込先口座などの設定をします)
4. Stripe Checkoutの有効化
5. テストカードによる動作確認
6. 本番用設定に切り替え(任意)

6. Cloud9を起動
https://c9.io/login
今回のハンズオンでは旧Cloud9を使用します。
旧Cloud9は2019/6/30に新規ワークスペースが使えなく
なり、12/31に終了となりますのでご注意ください！！
配布したCloud9のユーザ名、パス
ワードを使ってログインしてください。

7. ワークスペースの新規作成
URLの一部になるので英数字で入力
Node.jsを選択して作成

8. Webページのファイルを登録
https://github.com/eolla1013/handson20190417
ここからclient配下のファイルをコピーします。
git cloneでもOK。
こんな感じにします。
>git clone https://github.com/eolla1013/handson20190417.git

9. とりあえず動くかどうか動作確認
「ワークスペース名-ユーザ名.c9users.io」がURL

10. Stripeアカウントの登録
https://stripe.com/jp

11. ダッシュボードでアカウントの作成
わかりやすい名前を
付けましょう

12. Stripeダッシュボードから設定を選択

13. ビジネス用設定の登録(任意)
実際に決済サービスを使うときは
この部分の設定は必須です。

14. Stripe Checkoutを有効にする

15. Checkuoutを使用するドメインを設定
Cloud9の実行URLを指定します。

16. Checkuoutで使用する商品を登録

17. Webページに貼り付ける決済コードをコピー
決済成功時と失敗時に遷移する
URLを指定します。

18. Index.htmlにコードを貼り付ける
ここに貼り付けます

19. Webページを開いて動作確認
テストカードの番号(VISA) https://stripe.com/docs/testing 参照
有効期限とCVCは適当でOK！

20. ダッシュボードで支払いを確認
決済手数料が引かれた金額が表示
される。

21. まとめ
ハンズオンお疲れ様でした。
実際の環境では「本番環境利用の申請」を行い事業者の住所や
電話番号、入金先の登録、本番APIキーの差し替えなどを行う
必要はありますが、ほとんどコードの変更はありません。
Stripeはそれ以外にも事業者や開発者に優しい機能があります
のでいろいろ調べてみてオンライン決済を軽く作ってみてはい
かがでしょうか。
Stripeを使ったWebアプリケーション開発に関しては5/11に開催される
「わんくま同盟 熊本勉強会」で話をしますので興味があればどうぞ。