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