20170324 html5j web_paltform_study

Easy & Secure Payment by
Braintree SDK
2017.3.24 @ html5j Webプラットフォーム部勉強会

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漫画家

© 2014 PayPal Inc. All rights reserved. Confidential and proprietary.
1998年設立。
17年以上の決済事業における実績を持つシリコンバレーのテックカンパ
ニーであり、1億8800万人が200以上の国と地域、100通貨以上で利用し
ている、Eコマースにおけるグローバルスタンダード
出発点はオンライン上でだれでも簡単に支払ったり、支払いを受けつけら
れる仕組みを提供し、起業家や中小企業を支援
規模に関わらず、世界中のバイヤーとセラーを安心・安全につなげて、
国境、通貨、デバイスに関係なく、生活やビジネスを簡単に
 日本では2010年4月より本格営業稼動。オフィスは青山・表参道に所在

26の通貨に口座が対応*
PayPal は E コマースにおけるグローバルスタンダードです
52%
が国際取引
202の国と地域
100の通貨に対応
1.88億
アクティブアカウント
数
年間取扱高
34兆円
年間決済件数
49億件
モバイル決済率
23%
*日本では22通貨です。全て2015実績$1=119.5円で計算しています。

本日お話ししたいこと
PayPalの新しいSDK – Braintree SDK – を使った簡単で安全な決済実装について
Payment Request APIとの対比とTokenizationをメインに
お話ししたいと思います。
©2016 PayPal Inc. Confidential and proprietary. 6

Braintreeって？
PayPalグループのPayment Gateway（複数決済手段サービス）
PayPal,Credit Card,
Android Pay,Apple Pay,
Bitcoin, …etc
日本アカウントは現在作れません
（Sandboxは可）
P2P Store-front XB P2P

Braintree SDKって？
様々な決済手段を簡単に導入できるSDKでPayPal自体もメイン実装手段に移行中
Braintreeのアカウントなしで
PayPal実装に利用可能

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

Braintree SDKのシステム概要
PayPal
Sandbox =Test
PayPal
本番環境
Braintree
Sandbox =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やクレジットカード、その他の支払いの受け取りを代行する
− 口座残高は基本的に持てず（一時預かり）受け取り一方向のみで、日本の法律では収納代行

そんなDigital Wallet PayPalってどんなことできるんだっけ？
• 都度決済（Checkout）
• 定期支払（Recurring Payment）
• 従量課金（Vault）
• マーケットプレイス用決済
• 送金（Payout）
アカウントを活かした
多様な使い方が可能

PayPalの新しいSDK – Braintree SDK -
• Client SDK
− JavaScript/iOS/Android : 決済開始、PayPal画面表示
• Server Side SDK
− Java/.Net/Node.js/PHP/Python/Ruby : 決済完了
たった２ステップの実装で、ウェブ、スマホアプリ同じように決済導入可能！
PayPal Developer サイトの「Express
Checkout」参照（日本語情報準備中）

Client SDK ( JavaScript)の例
JSファイルを読み込んで、こんな感じでほぼコピペで出来ちゃいます

Server Side SDK ( Ruby)の例
Gemで簡単にインストールできて、たったこんだけで決済完了

動くサンプルコード（Node.js）
https://github.com/benzookapi/VZeroNodeDemo
• GitHubで「VZeroNodeDemo」で検索
• http://localhost:3000 で動くよ！

Braintree SDKの技術的特徴
• Client Side (JavaScript、Mobile）にほとんどの実装を寄せている
• Tokenization（トークン化）によってセキュリティ担保とサーバー処理の独立・簡素化
Payment Request APIと似た発想

ちなみにBraintreeはPayment Request APIと連携できます
• Braintreeのトークン、またはAndroid Payなどのトークンを使って、Payment Request API
のバックグランドの決済処理を行えます。
• Android Payの例：

こうしたBraintree SDKやRequest Payment APIの特徴の背景
• 誰にでもわかりやすい決済導入
• 実装者に依存しないセキュアな決済
• 複数決済手段の導入のしやすさ
=>決済の民主化

ところで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
２つのTokenと１つのNonce（ワンタイムトークン）を使って行います

図にするとこんな感じ

Payment Tokenizationの今後の展望
In-house （独自）Token から Public （共有）Tokenへ
• Payment Request APIで一部適用
− 例：Payment Method = Android Pay と Payment Gateway = Braintree間での共有
• 信頼できるベンダによるToken Providerのような発想
• UIとProcessingはどんどん非依存へ

まとめ
• 決済導入はもはや身近な存在
• アイディアがあれば稼げるチャンスはいくらでもある！
• だからみんなでペイパろー！

そんなあなたにお知らせ
PayPal User Group = PPUG 始動！
• 第１回meetupが開かれます！(connpassで「PPUG」で検索！）
− https://ppug.connpass.com/event/52813/
• 公開グループもあるよ！（facebookで「PPUG」で検索！）
− https://www.facebook.com/groups/369561116758026/
• 週一で運営飲み会やってるよ！
− 運営に参加してくれる人募集中！

20170324 html5j web_paltform_study

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

Similaire à 20170324 html5j web_paltform_study

Similaire à 20170324 html5j web_paltform_study (20)

Plus de Junichi Okamura

Plus de Junichi Okamura (11)

20170324 html5j web_paltform_study

Notes de l'éditeur