新しい実装方法 braintree sdkについて

新しい実装方法Braintree SDKについて

2017.5.17 @PPUG #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漫画家

© 2014 PayPal Inc. All rights reserved. Confidential and proprietary.

1998年設立。

17年以上の決済事業における実績を持つシリコンバレーのテックカンパニーであり、約2億人が200以上の国と地域、100通貨以上で利用している、Eコマースにおけるグローバルスタンダード

出発点はオンライン上でだれでも簡単に支払ったり、支払いを受けつけられる仕組みを提供し、起業家や中小企業を支援

規模に関わらず、世界中のバイヤーとセラーを安心・安全につなげて、国境、通貨、デバイスに関係なく、生活やビジネスを簡単に

日本では2010年4月より本格営業稼動。オフィスは青山・表参道に所在

PayPalの仕組み

PayPal は E コマースにおけるグローバルスタンダードです

本日お話ししたいこと

PayPalの新しいSDK – Braintree SDK – を使った簡単で安全な決済実装について

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

©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 で動くよ！

https://github.com/benzookapi/VZeroNodeDemo

http://localhost:3000/

Braintree SDKの技術的特徴


• Client Side (JavaScript、Mobile）にほとんどの実装を寄せている

• Tokenization（トークン化）によってセキュリティ担保とサーバー処理の独立・簡素化

こうしたBraintree SDKの特徴の背景


• 誰にでもわかりやすい決済導入

• 実装者に依存しないセキュアな決済

• 複数決済手段の導入のしやすさ

=>決済の民主化

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

図にするとこんな感じ


まとめ


決済導入はもはや身近な存在

アイディアがあれば稼げるチャンスはいくらでもある！

だからみんなでペイパろー！

告知


PayPal Tech Meetup #5Shopify Night 開催！

https://eventdots.jp/event/619687

PPUGの方もLTします！

https://eventdots.jp/event/619687

新しい実装方法Braintree SDKについて

2017.5.17 @PPUG #2

新しい実装方法 braintree sdkについて

Software