20191015 JP_Stripes in Hiroshima #5 Stripe ConnectでApplePayを導入してちょっと困った話

2019/10/15 に開催されたJP_Stripes in Hiroshimaにてお話した「Stripe ConnectでApplePayを導入してちょっと

Transcript

1. 2019-10-15 JP_Stripes
   in
   Hiroshima
   #5 Takeshi
   Furusato Stripe
   Connectで ApplePayを導⼊して ちょっと困った話 #JP_Stripes
2. 古⾥
   武⼠(ふるさとたけし) 株式会社DIGITALJET所属(プログラマ・リモートワーカー) JAWS-UG
   Okayama
   コアメンバー JP_Stripes
   Okayama
   コアメンバー TwilioJP-UG
   Okayama
   主催
   (TwilioChampions) Okayama
   WordPress
   Meetup
   オーガナイザー SORACOM
   UG
   Okayama
   コアメンバー めんツナかんかん⾮公式エバンジェリスト #JP_Stripes
3. 本⽇のお話 Stripeで ApplePay・GooglePayを 導⼊してみた #JP_Stripes
4. ApplePay・GooglePay #JP_Stripes iPhoneやsafariブラウザに紐付いているアカ ウントを利⽤して決済 ☑ ApplePay AndroidやChomeブラウザに紐付いているアカ ウントを利⽤して決済 ☑ GooglePay ブラウザやウォレットに登録してい るカード情報で決済をする
5. #JP_Stripes ビジネスモデル
6. 利⽤⽅法 #JP_Stripes 参考：https://stripe.com/docs/stripe-js お客様(⽀払者) 提携業者(引取業者)
7. PaymentRequestButtonの 導⼊ #JP_Stripes ①Elements
   をセットアップする ②PaymentRequest
   のインスタンスを作る ③paymentRequestButton
   Element
   を作成しマウントする ④トークンを送信し⽀払い後の処理をする 参考：https://stripe.com/docs/stripe-js/elements/payment-request-button#set-up-stripe-elements
   
   
   
   
   
   Stripe.js
   &
   Elements
   を利⽤して決済フローを理解する@y_toku
   
   
   
   
   
   https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca
   
   
   
   
   
   
8. 決済の流れ #JP_Stripes 参考：Stripe.js
   &
   Elements
   を利⽤して決済フローを理解する@y_toku
   
   
   
   
   
   
   https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca 1).Stripe.js
   &
   Elementsでブラウザから直接
   Stripe
   へ決済（カード）情報を渡す 2).Stripe
   のサーバからフロントエンドにトークンが返ってくる 3).トークンをサーバへ送る 4).Charge/Customerのリクエストをサーバから送る(決済する/決済情報を保存する) 5).Stripe
   からのレスポンスを受ける
9. ApplePayへドメイン登録 #JP_Stripes 参考：https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-apple-pay
   
   
   
   
   
   Stripe.js
   &
   Elements
   を利⽤して決済フローを理解する@y_toku
   
   
   
   
   
   https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca
   
   
   
   
   
   重要：sk_liveで認証。sk_testはダメ
10. #JP_Stripes ところで、、Stripe
    Connectとは 参考：https://stripe.com/docs/connect お客様 (カスタマー) サービス提供元 (プラットフォーム) 提携先 (⼦アカウント)
11. 本番・テスト環境#JP_Stripes 本番環境 プラット フォーム (live) ⼦ アカウント (live) Connect! Appleドメイン 登録(Live) テスト環境 プラット フォーム (test) ⼦ アカウント (test) Connect! Appleドメイン 登録(test) × ※Connectしたときに⾃動的にAppleドメイン登録も⾏っている。
12. 事前にドメイン登録だけ #JP_Stripes テスト環境 プラット フォーム (test) ⼦ アカウント (test) Connect! Appleドメイン 登録(test) × テスト環境でのAppleドメイン登録は諦め、 ⼦アカウントの管理コンソールに表⺬されている API
    Keyを利⽤して、⼿動でAppleドメイン登録をした。 →ApplePay表⺬できるがすぐエラーになる ⼦ アカウント (live) Appleドメイン 登録(Live)
13. #JP_Stripes
14. StripeConnectのAPIキー #JP_Stripes Connectのキーは 管理コンソールに表⺬されている 公開可能キー(PK)・シークレットキー(SK)とは 別のキーが利⽤されている。 ※しかも管理コンソールには表⺬されない StandardKey ConnectKey Live(SK/PK) ※管理コンソール表⺬のキー ※Connect連携時に発⾏されるキー ⃝ ⃝ ⃝ ⃝ ⃝ ⃝ 通常 Conn ect NG Test(SK/PK) Live(SK/PK) Test(SK/PK)
15. 困ったときのサポート #JP_Stripes ⽇本語OK、丁寧な対応 ありがとうございました！
16. ありがとうございました JP_stripes
    Okayama よろしくおねがいします 観光ついでに岡⼭にも来てね #JP_Stripes