Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20170324 html5j web_paltform_study

1,344 views

Published on

html5j Webプラットフォーム部 第16回勉強会

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20170324 html5j web_paltform_study

  1. 1. Easy & Secure Payment by Braintree SDK 2017.3.24 @ html5j Webプラットフォーム部 勉強会
  2. 2. Who‘s who? 2 Junichi Okamura (@benzookapi) PayPal Integration Manager/Evangelist Scala/Java/Node.js/Python/Ruby/PHP/../Mobile/../ppt Rock/Wine/DQ/JOJO/I18N/Marketing/Payment API愛好家、TDD(Talk Driven Development)推進派、 農業IoT開発、エンジニアSF漫画家
  3. 3. © 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 1998年設立。 17年以上の決済事業における実績を持つシリコンバレーのテックカンパ ニーであり、1億8800万人が200以上の国と地域、100通貨以上で利用し ている、Eコマースにおけるグローバルスタンダード 出発点はオンライン上でだれでも簡単に支払ったり、支払いを受けつけら れる仕組みを提供し、起業家や中小企業を支援 規模に関わらず、世界中のバイヤーとセラーを安心・安全につなげて、 国境、通貨、デバイスに関係なく、生活やビジネスを簡単に  日本では2010年4月より本格営業稼動。オフィスは青山・表参道に所在
  4. 4. PayPalの仕組み
  5. 5. 26の通貨に口座が対応* PayPal は E コマースにおけるグローバルスタンダードです 52% が国際取引 202の国と地域 100の通貨に対応 1.88億 アクティブアカウント 数 年間取扱高 34兆円 年間決済件数 49億件 モバイル決済率 23% *日本では22通貨です。全て2015実績$1=119.5円で計算しています。
  6. 6. 本日お話ししたいこと PayPalの新しいSDK – Braintree SDK – を使った簡単で安全な決済実装について Payment Request APIとの対比とTokenizationをメインに お話ししたいと思います。 ©2016 PayPal Inc. Confidential and proprietary. 6
  7. 7. Braintreeって? ©2016 PayPal Inc. Confidential and proprietary. 7 PayPalグループのPayment Gateway(複数決済手段サービス) PayPal,Credit Card, Android Pay,Apple Pay, Bitcoin, …etc 日本アカウントは現在作れません (Sandboxは可) P2P Store-front XB P2P
  8. 8. Braintree SDKって? ©2016 PayPal Inc. Confidential and proprietary. 8 様々な決済手段を簡単に導入できるSDKでPayPal自体もメイン実装手段に移行中 Braintreeのアカウントなしで PayPal実装に利用可能
  9. 9. Braintree SDK PayPal APIの変遷 ©2016 PayPal Inc. Confidential and proprietary. 独自仕様のレガシーからオープン仕様(OAIやOAS)、様々な決済手段へ Classic API REST API Mobile SDK Web Web Mobile Web Mobile Others… Holdlings
  10. 10. Braintree SDKのシステム概要 ©2016 PayPal Inc. Confidential and proprietary. PayPal Sandbox =Test PayPal 本番環境 Braintree Sandbox =Test Braintree 本番環境 Braintree SDK PayPal Credit Card Android Pay, Apple Pay, BitCoin, etc… 切り替え切り替え 作成に必要 Personal: 支払い用 Business:受け取り用 日本は現在不可
  11. 11. ちなみにPayPalとPayment Gatewayの違いは? • PayPal = Digital Wallet − アカウントを作って登録した資金元(クレカや銀行口座)を使って支払いを行う、または受け取る − PayPalは法定通貨を口座残高として保持でき支払い・受け取り双方向でき、日本の法律では資金移動業 • Braintree = Payment Gateway − PayPalやクレジットカード、その他の支払いの受け取りを代行する − 口座残高は基本的に持てず(一時預かり)受け取り一方向のみで、日本の法律では収納代行 ©2016 PayPal Inc. Confidential and proprietary.
  12. 12. そんなDigital Wallet PayPalってどんなことできるんだっけ? • 都度決済(Checkout) • 定期支払(Recurring Payment) • 従量課金(Vault) • マーケットプレイス用決済 • 送金(Payout) ©2016 PayPal Inc. Confidential and proprietary. アカウントを活かした 多様な使い方が可能
  13. 13. PayPalの新しいSDK – Braintree SDK - • Client SDK − JavaScript/iOS/Android : 決済開始、PayPal画面表示 • Server Side SDK − Java/.Net/Node.js/PHP/Python/Ruby : 決済完了 ©2016 PayPal Inc. Confidential and proprietary. 13 たった2ステップの実装で、ウェブ、スマホアプリ同じように決済導入可能! PayPal Developer サイトの「Express Checkout」参照(日本語情報準備中)
  14. 14. Client SDK ( JavaScript)の例 ©2016 PayPal Inc. Confidential and proprietary. 14 JSファイルを読み込んで、こんな感じでほぼコピペで出来ちゃいます
  15. 15. Server Side SDK ( Ruby)の例 ©2016 PayPal Inc. Confidential and proprietary. 15 Gemで簡単にインストールできて、たったこんだけで決済完了
  16. 16. 動くサンプルコード(Node.js) ©2016 PayPal Inc. Confidential and proprietary. 16 https://github.com/benzookapi/VZeroNodeDemo • GitHubで「VZeroNodeDemo」で検索 • http://localhost:3000 で動くよ!
  17. 17. Braintree SDKの技術的特徴 ©2016 PayPal Inc. Confidential and proprietary. 17 • Client Side (JavaScript、Mobile)にほとんどの実装を寄せている • Tokenization(トークン化)によってセキュリティ担保とサーバー処理の独立・簡素化 Payment Request APIと似た発想
  18. 18. ちなみにBraintreeはPayment Request APIと連携できます ©2016 PayPal Inc. Confidential and proprietary. 18 • Braintreeのトークン、またはAndroid Payなどのトークンを使って、Payment Request API のバックグランドの決済処理を行えます。 • Android Payの例:
  19. 19. こうしたBraintree SDKやRequest Payment APIの特徴の背景 ©2016 PayPal Inc. Confidential and proprietary. 19 • 誰にでもわかりやすい決済導入 • 実装者に依存しないセキュアな決済 • 複数決済手段の導入のしやすさ =>決済の民主化
  20. 20. ところでTokenizationって? ©2016 PayPal Inc. Confidential and proprietary. 20 カード情報などの機密情報を直接やりとりせず一時的引き換え券(トークン)で行う仕組み • 決済だけのものではない(OAuthのトークンとかお馴染み) • 最近決済の手法にも一般的に取り入れられてきた • トークンを介すことでJavaScriptやモバイルといったクライアントの差異を吸収した決済処理 が可能
  21. 21. Braintree SDKのTokenization • ①Access Token − Credentialsで生成したトークンです。サーバー側で管理します。 • ②Client Token − Access Tokenを元にサーバー側で生成します。クライアント(WEBページやアプリの決済画面)で使います。 • ③(Payment Method )Nonce − クライアントがClient Tokenを使って、ユーザー操作の後に生成します。 • ④サーバー側の決済処理 − Access TokenとPayment Method Nonceを使って行います。両者が正しくないと処理できません。 • セキュリティ的な順位付け − Credentials > Access Token > Client Token > Nonce ©2016 PayPal Inc. Confidential and proprietary. 2つのTokenと1つのNonce(ワンタイムトークン)を使って行います
  22. 22. 図にするとこんな感じ ©2016 PayPal Inc. Confidential and proprietary.
  23. 23. Payment Tokenizationの今後の展望 ©2016 PayPal Inc. Confidential and proprietary. 23 In-house (独自)Token から Public (共有)Tokenへ • Payment Request APIで一部適用 − 例:Payment Method = Android Pay と Payment Gateway = Braintree間での共有 • 信頼できるベンダによるToken Providerのような発想 • UIとProcessingはどんどん非依存へ
  24. 24. まとめ ©2016 PayPal Inc. Confidential and proprietary. 24 • 決済導入はもはや身近な存在 • アイディアがあれば稼げるチャンスはいくらでもある! • だからみんなでペイパろー!
  25. 25. そんなあなたにお知らせ ©2016 PayPal Inc. Confidential and proprietary. 25 PayPal User Group = PPUG 始動! • 第1回meetupが開かれます!(connpassで「PPUG」で検索!) − https://ppug.connpass.com/event/52813/ • 公開グループもあるよ!(facebookで「PPUG」で検索!) − https://www.facebook.com/groups/369561116758026/ • 週一で運営飲み会やってるよ! − 運営に参加してくれる人募集中!
  26. 26. Easy & Secure Payment by Braintree SDK 2017.3.24 @ html5j Webプラットフォーム部 勉強会

×