20170324 html5j web_paltform_study

©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 円で計算しています。


本日お話ししたいこと

PayPal の新しい SDK – Braintree SDK – を使った簡単で安全な決済実装についてPayment Request API との対比と Tokenization をメインに

お話ししたいと思います。

7

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 の変遷


独自仕様のレガシーからオープン仕様（ OAI や OAS ）、様々な決済手段へ

Classic API 　 REST APIMobile SDK

Web Web

Mobile

Web

Mobile

Others…

　 Holdlings

Braintree SDK のシステム概要


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


そんな 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 で動くよ！

https://github.com/benzookapi/VZeroNodeDemo

https://github.com/benzookapi/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/

• 週一で運営飲み会やってるよ！−運営に参加してくれる人募集中！

https://ppug.connpass.com/event/52813/

https://ppug.connpass.com/event/52813/

https://www.facebook.com/groups/369561116758026/

https://www.facebook.com/groups/369561116758026/


Easy & Secure Payment by Braintree SDK

2017.3.24 @ html5j Web プラットフォーム部勉強会

Internet

20170324 html5j web_paltform_study