Download - 新しい実装方法 Braintree SDKについて
![Page 1: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/1.jpg)
新しい実装方法Braintree SDKについて
2017.5.17 @PPUG #2
![Page 2: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/2.jpg)
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漫画家
![Page 3: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/3.jpg)
© 2014 PayPal Inc. All rights reserved. Confidential and proprietary.
1998年設立。
17年以上の決済事業における実績を持つシリコンバレーのテックカンパニーであり、約2億人が200以上の国と地域、100通貨以上で利用している、Eコマースにおけるグローバルスタンダード
出発点はオンライン上でだれでも簡単に支払ったり、支払いを受けつけられる仕組みを提供し、起業家や中小企業を支援
規模に関わらず、世界中のバイヤーとセラーを安心・安全につなげて、国境、通貨、デバイスに関係なく、生活やビジネスを簡単に
日本では2010年4月より本格営業稼動。オフィスは青山・表参道に所在
![Page 4: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/4.jpg)
PayPalの仕組み
![Page 5: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/5.jpg)
PayPal は E コマースにおけるグローバルスタンダードです
![Page 6: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/6.jpg)
本日お話ししたいこと
PayPalの新しいSDK – Braintree SDK – を使った簡単で安全な決済実装について
お話ししたいと思います。
©2016 PayPal Inc. Confidential and proprietary. 6
![Page 7: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/7.jpg)
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
![Page 8: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/8.jpg)
Braintree SDKって?
©2016 PayPal Inc. Confidential and proprietary. 8
様々な決済手段を簡単に導入できるSDKでPayPal自体もメイン実装手段に移行中
BraintreeのアカウントなしでPayPal実装に利用可能
![Page 9: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/9.jpg)
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
![Page 10: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/10.jpg)
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:受け取り用
日本は現在不可
![Page 11: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/11.jpg)
ちなみにPayPalとPayment Gatewayの違いは?
• PayPal = Digital Wallet
− アカウントを作って登録した資金元(クレカや銀行口座)を使って支払いを行う、または受け取る
− PayPalは法定通貨を口座残高として保持でき支払い・受け取り双方向でき、日本の法律では資金移動業
• Braintree = Payment Gateway
− PayPalやクレジットカード、その他の支払いの受け取りを代行する
− 口座残高は基本的に持てず(一時預かり)受け取り一方向のみで、日本の法律では収納代行
©2016 PayPal Inc. Confidential and proprietary.
![Page 12: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/12.jpg)
そんなDigital Wallet PayPalってどんなことできるんだっけ?
• 都度決済(Checkout)
• 定期支払(Recurring Payment)
• 従量課金(Vault)
• マーケットプレイス用決済
• 送金(Payout)
©2016 PayPal Inc. Confidential and proprietary.
アカウントを活かした多様な使い方が可能
![Page 13: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/13.jpg)
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」参照(日本語情報準備中)
![Page 14: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/14.jpg)
Client SDK ( JavaScript)の例
©2016 PayPal Inc. Confidential and proprietary. 14
JSファイルを読み込んで、こんな感じでほぼコピペで出来ちゃいます
![Page 15: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/15.jpg)
Server Side SDK ( Ruby)の例
©2016 PayPal Inc. Confidential and proprietary. 15
Gemで簡単にインストールできて、たったこんだけで決済完了
![Page 16: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/16.jpg)
動くサンプルコード(Node.js)
©2016 PayPal Inc. Confidential and proprietary. 16
https://github.com/benzookapi/VZeroNodeDemo
• GitHubで「VZeroNodeDemo」で検索
• http://localhost:3000 で動くよ!
![Page 17: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/17.jpg)
Braintree SDKの技術的特徴
©2016 PayPal Inc. Confidential and proprietary. 17
• Client Side (JavaScript、Mobile)にほとんどの実装を寄せている
• Tokenization(トークン化)によってセキュリティ担保とサーバー処理の独立・簡素化
![Page 18: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/18.jpg)
こうしたBraintree SDKの特徴の背景
©2016 PayPal Inc. Confidential and proprietary. 18
• 誰にでもわかりやすい決済導入
• 実装者に依存しないセキュアな決済
• 複数決済手段の導入のしやすさ
=>決済の民主化
![Page 19: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/19.jpg)
ところでTokenizationって?
©2016 PayPal Inc. Confidential and proprietary. 19
カード情報などの機密情報を直接やりとりせず一時的引き換え券(トークン)で行う仕組み
• 決済だけのものではない(OAuthのトークンとかお馴染み)
• 最近決済の手法にも一般的に取り入れられてきた
• トークンを介すことでJavaScriptやモバイルといったクライアントの差異を吸収した決済処理が可能
![Page 20: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/20.jpg)
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(ワンタイムトークン)を使って行います
![Page 21: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/21.jpg)
図にするとこんな感じ
©2016 PayPal Inc. Confidential and proprietary.
![Page 22: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/22.jpg)
まとめ
©2016 PayPal Inc. Confidential and proprietary. 22
決済導入はもはや身近な存在
アイディアがあれば稼げるチャンスはいくらでもある!
だからみんなでペイパろー!
![Page 23: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/23.jpg)
告知
©2016 PayPal Inc. Confidential and proprietary. 23
PayPal Tech Meetup #5Shopify Night 開催!
https://eventdots.jp/event/619687
PPUGの方もLTします!
![Page 24: 新しい実装方法 Braintree SDKについて](https://reader031.vdocuments.mx/reader031/viewer/2022013113/5a66c0da7f8b9a3c0e8b5021/html5/thumbnails/24.jpg)
新しい実装方法Braintree SDKについて
2017.5.17 @PPUG #2