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

1. 2019-10-15
JP_StripesinHiroshima#5
TakeshiFurusato
StripeConnectで
ApplePayを導⼊して
ちょっと困った話
#JP_Stripes

2. 古⾥武⼠(ふるさとたけし)株式会社DIGITALJET所属(プログラマ・リモートワーカー)
JAWS-UGOkayamaコアメンバー
JP_StripesOkayamaコアメンバー
TwilioJP-UGOkayama主催(TwilioChampions)
OkayamaWordPressMeetupオーガナイザー
SORACOMUGOkayamaコアメンバー
めんツナかんかん⾮公式エバンジェリスト
#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のインスタンスを作る
③paymentRequestButtonElementを作成しマウントする
④トークンを送信し⽀払い後の処理をする参考：https://stripe.com/docs/stripe-js/elements/payment-request-button#set-up-stripe-elements
Stripe.jsElementsを利⽤して決済フローを理解する@y_toku
https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca

8. 決済の流れ
#JP_Stripes
参考：Stripe.jsElementsを利⽤して決済フローを理解する@y_toku
https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca
1).Stripe.jsElementsでブラウザから直接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.jsElementsを利⽤して決済フローを理解する@y_toku
https://qiita.com/y_toku/items/7e51ef7e69d7cbbfb3ca
重要：sk_liveで認証。sk_testはダメ

10. #JP_Stripes
ところで、、StripeConnectとは
参考：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ドメイン登録は諦め、
⼦アカウントの管理コンソールに表⺬されている
APIKeyを利⽤して、⼿動で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_stripesOkayama
よろしくおねがいします
観光ついでに岡⼭にも来てね
#JP_Stripes