Iot_algyan_hands-on_20161129

Who am I?
©2015 PayPal Inc. Confidential and proprietary. 2
岡村純一 Junichi Okamura
PayPal Integration
Manager/Evangelist
Scala/Java/Node.js/Python/Ruby/PHP/../Mobile/../ppt
Rock/Wine/DQ/JOJO/I18N/Marketing/Payment
API Lover/Midnight Developer/TDD (Talk Driven
Development) Advocator/MANGA Creator (new)
@benzookapi
jokamura@paypal.com

本日の内容
• PayPalとそのAPI、決済手段の概要（10分）
• v.zero Node.js SDKによるPayPal実装（80分）
− システム概要・環境設定・確認（10分）
− Sandboxでテストアカウントと認証情報作成（20分）
− Node.js SDKでのサーバーサイド実装（20分）
− JavaScript Clientでの決済画面実装（20分）
− チェックアウトして決済してみる、本番運用その他（10分）
• Braintree Developer Siteを使ったセルフチャレンジ（30分）
− Vaultをつかった継続課金の実装
− Braintree Sandboxを使ってHosted Fieldに挑戦！
− PayPalスタッフになんでも質問
− ドキュメントを見ながら色々トライ
©2016 PayPal Inc. Confidential and proprietary.

PayPalとそのAPI、決済手段の概要

PayPalとは？
• 様々な資金元に対応した決済サービス（デジタルお財布）
• 売り手、買い手に同一アカウントでなれる双方向プラットフォーム
• 売り手、買い手保護の仕組み
• 多通貨（20以上）、多地域（200以上）、多言語対応のグローバルサービス
• ＝汎用的で、安心な、どこでも使える決済

PayPal Holdings
eBayから独立し再上場、買収により決済全体を網羅するPayment企業に成長
PayPal
Credit Card
Apple Pay
Android Pay
Bitcoin
…
P2P
Private
Store-front
Offline
P2P
Invoice
Cross border

API Platform
BraintreeのAPIプラットフォームv.zeroを基盤に様々な決済手段を網羅

v.zero
(Braintree)
APIの変遷
独自仕様のレガシーからオープン仕様（OAIやOAS）、様々な決済手段へ
Classic API REST API
Mobile SDK
Web Web
Mobile
Web
Mobile
Others…
Holdlings

PayPal決済の種類
• 都度決済（Checkout）
• 定期支払（Recurring Payment）
• 従量課金（Reference Transaction）
• マーケットプレイス用決済
• 送金（Payout）

都度決済（Checkout）
• 商品と金額を指定して支払うワンタイム決済
• ECサイトやスマホアプリでの購入
• 配送や予約の伴う取引にも対応

定期支払（Recurring Payment）
• 事前承認をもとに決済を定期的に繰り返す
• 月額会費制のサービスなど
• PayPal側で定期決済を行ってくれる
• 定期決済の成功、失敗はPayPalが通知

従量課金（Reference Transaction）
• 事前承認をもとに任意のタイミングで任意の金額を決済する
• ゲーム課金、動画月額支払いなど
• 売り手の自由度が高い強力決済（別途審査必要）

マーケットプレイス用決済
• 一度の決済に複数の受け取り者がいる決済
• 市場やクラウドソーシングなどの手数料

送金（Payout）
• 複数の受け取り者に一括して支払う方法
• アフィリエイト報酬など
• 厳密には決済でなく送金
• 手数料計算は決済とは別

詳細は…
日本向け特設サイト
『PayPalビジネスガイド開発者向け』
ページをご覧ください！
https://www.paypal.jp/merchant/developer/

お知らせ
Qiita
やってます！
http://qiita.com/tags/PayPal
（フォロー、投稿してね！）

お知らせ
QPayPal Tech Meetup #4
年末スペシャル！
来てね！
https://eventdots.jp/event/605049

v.zero Node.js SDKによるPayPal実装

ゴール
先ほどご説明した都度決済を
新しいAPI v.zero node.js SDKで
実装してみる！

システム概要
PayPal
Sandbox =Test
PayPal
本番環境
Braintree
Sandbox =Test
Braintree
本番環境
v.zero
=Braintree’s API
PayPal
Credit Card
Apple Pay, etc…
切り替え切り替え
作成に必要
Personal: 支払い用
Business:受け取り用

参照するURL
• PayPal Developer Site（コードは未完。深く学ぶにはここからコピペ＋修正を推奨）
− https://developer.paypal.com/
• ペイパルビジネスガイド - 開発者向け
− https://www.paypal.jp/merchant/developer/
• PayPal Sandbox
− https://www.sandbox.paypal.com/ （本番URLに「sandbox.」を付与）
• 正解コード（動作検証済み。詰まったらここからコピペ）
− https://github.com/benzookapi/VZeroNodeDemo

環境設定・確認
• Node.js (npm) セットアップ済み
− 参考：https://liginc.co.jp/web/programming/node-js/85318（「LIG node」で検索）
− 「npm」コマンドがターミナルで実行できる状態
• PayPal本番アカウント取得済み（パーソナルでもOK！）
− みんな今日の申し込みのためにアカウント持ってるはずだけど、もし持っていない方はこちら！
− https://www.paypal.com/jp/signup/account（「ペイパル登録」で検索）
〜１９：２０

Sandboxでテストアカウントと認証情報作成（１）
• Sandboxアカウントの作成
− Developer Siteに本番アカウントでログインします
− [Sandbox]->[Accounts]に移動します
− パーソナルアカウント（支払い用）、ビジネスアカウント（受け取り用）を作ります
• デフォルトで２つ用意されていますが、これを使う場合は、[Profile]でパスワードを再設定してください！
• パーソナルアカウントは支払いに使うのでクレジットカードの登録を忘れずに！
− ビジネスガイドも参照！
• https://www.paypal.jp/merchant/developer/sandbox/
− Sandboxに作成したアカウントでログインできるか確認してください！
• https://www.sandbox.paypal.com/jp/webapps/mpp/merchant
〜１９：４０

Sandboxでテストアカウントと認証情報作成（２）
• Sandbox用のv.zero 認証情報の取得
− 同じDashboardの「My Apps & Credentials」メニューで「Generate Credential」ボタンを押す
− 先ほど作ったビジネスアカウントを選んで、Credentialを作成（ビジネスアカウントしか表示されません）
− 表示された「Access Token」が後で必要になります。
〜１９：４０

Sandboxでテストアカウントと認証情報作成（３）
• うまくいかない人は正解コードのREADMEの作成済みアカウントを使ってください！
− https://github.com/benzookapi/VZeroNodeDemo
〜１９：４０

Node.js SDKでのサーバーサイド実装（１）
• 決済画面及びサーバー用のNode.jsアプリを用意する
− すでにNode.jsのアプリがある方はそれを使ってください
− ない方は、以下を参考にExpressをインストールしてサンプルアプリを起動しましょう
− https://gist.github.com/mitsuruog/fc48397a8e80f051a145（「express実践入門」で検索）
− 以下のコマンドで作れます。
• 動作確認
− http://localhost:3000/ にアクセスしてページが表示されることを確認
− 動作確認できたらCtrl+Cで一旦終了
〜２０：００
npm install express-generator –g
express myapp
cd myapp
npm install
npm start

Node.js SDKでのサーバーサイド実装（２）
• v.zero Node.js SDKのインストール
− アプリの場所で以下のコマンド実行
• PayPal Developer Site内のv.zeroのページを開く
− [Top]->[Docs]->[PayPal Checkout]->[Express Checkout ve.zero SDK]->[Setup Your Server]
− 「Node.js」を選択
〜２０：００
npm install braintree

Node.js SDKでのサーバーサイド実装（３）
• ①Access Token
− Credentialsで生成したトークンです。サーバー側で管理し、他人に見せてはいけません。
• ②Client Token
− Access Tokenを元にサーバー側で生成します。クライアント（WEBページやアプリの決済画面）で使います。他人
に見せても構いません。
• ③(Payment Method )Nonce
− クライアントがClient Tokenを使って、ユーザー操作の後に生成します。他人に見せない方がいいです。
• ④サーバー側の決済処理
− ①のAccess Tokenと③のPayment Method Nonceを使って行います。両者が正しくないと使えません。
− ③は使い回すことはできないワンタイムなものです。
用語と処理フローの確認

Node.js SDKでのサーバーサイド実装（４）
• 初期画面表示でClient Tokenを生成します。
− routes/index.jsを修正
− コードは先ほどのDeveloper Siteのものを使用。
− 正解コードも参照。
Client Tokenの生成（以後コードは冒頭のExpressアプリで説明します）
var braintree = require('braintree')
router.get('/', function(req, res, next) {
var gateway = braintree.connect({
accessToken: ‘自分のCredentailsのAccess Tokenを貼り付け'
});
gateway.clientToken.generate({}, function (err, response) {
res.render('index', { title: 'Express', clientToken:
response.clientToken });
});
});

Node.js SDKでのサーバーサイド実装（５）
• 初期画面にClient Tokenを埋め込みます。
− views/index.jadeを修正
− サーバー側の変数名「clientToken」に対応します。
− ブラウザリロードするClient Tokenが表示されます。
− 反映されない場合はサーバーを再起動してください。
Client Tokenの画面表示
p Welcome to #{title} #{clientToken}

Node.js SDKでのサーバーサイド実装（６）
• クライアントから呼ばれる処理を実装します。
− routes/index.jsにコード追加
− order、shippingなどの情報は削除可。
− merchantAccountIdで通貨設定
Nonceを受け取って決済をする実装 app.post("/checkout", function (req, res) {
var gateway = braintree.connect({
accessToken: ‘前のページと同じAccessToken'
});
var saleRequest = {
amount: req.body.amount,
merchantAccountId: ”JPY",
paymentMethodNonce: req.body.payment_method_nonce,
options: {
submitForSettlement: true
}
};
gateway.transaction.sale(saleRequest, function (err, result) {
if (err) {
res.send("<h1>Error: " + err + "</h1>");
} else if (result.success) {
res.send("<h1>Success! Transaction ID: " +
result.transaction.id + "</h1>");
} else {
res.send("<h1>Error: " + result.message + "</h1>");
}
});
});

JavaScript Clientでの決済画面実装（１）
• PayPal Developer Site内のクライアント実装のページを開く
− [Top]->[Docs]->[PayPal Checkout]->[Express Checkout ve.zero SDK]->[Setup Your Client]
− 「 JS v3」を選択
〜２０：２０

JavaScript Clientでの決済画面実装（2）
• 決済ボタンを作ってイベント記述。
− views/index.jadeを右に変更
• 元のコードは消します
• Use the direct links
• PayPal configuration
• 「div#paypal.」を使ってjadeに生HTMLを挿入
• 「div#paypal.」以下はインデント下げる
• ButtonのIdは「paypal-button」に
• authorizationは‘#{clientToken}’ に
• shipping addressは削除可
• data-locale=“ja_JP”で日本語ボタン可
• amount、currencyで金額、通貨設定可
• localeで表示言語設定可
Client TokenからPayPal画面を表示する実装
div#paypal.
<script src="https://js.braintreegateway.com/web/3.5.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.5.0/js/paypal.min.js"></script>
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_type="submit"
data-button_disabled="false”
data-locale="ja_JP" ></script>
<script>
var paypalButton = document.getElementById('paypal-button');
braintree.client.create({
authorization: '#{clientToken}' },
function (clientErr, clientInstance) {
braintree.paypal.create({
client: clientInstance
}, function (err, paypalInstance) {
paypalButton.addEventListener('click', function () {
// Tokenize here!
paypalInstance.tokenize({
flow: 'checkout', // Required
amount: 1000, // Required
currency: ‘JPY', // Required
locale: ’ja_JP',
}, function (err, tokenizationPayload) {
// Tokenization complete
// Send tokenizationPayload.nonce to server
});
});
});
}); </script>

JavaScript Clientでの決済画面実装（３）
• サーバーへの通信を記述します
− views/index.jadeに右を追加
• Function(err, tokenizationPayLoad)内に追加
• tokenizationPayLoad.nonce
• amountとnonceをPOSTできればなんでも可
サーバーへNonceを送る実装 function (err, tokenizationPayload) {
// Tokenization complete
// Send tokenizationPayload.nonce to server
var form = document.createElement('form');
document.body.appendChild(form);
var inputNonce = document.createElement('input');
inputNonce.setAttribute('type', 'hidden');
inputNonce.setAttribute('name', 'payment_method_nonce');
inputNonce.setAttribute('value', tokenizationPayload.nonce);
form.appendChild(inputNonce);
var inputAmount = document.createElement('input');
inputAmount.setAttribute('type', 'hidden');
inputAmount.setAttribute('name', 'amount');
inputAmount.setAttribute('value', '1000');
form.appendChild(inputAmount);
form.setAttribute('action', '/checkout');
form.setAttribute('method', 'post');
form.submit();
}

チェックアウトして決済してみる（１）
• http://localhost:3000/ にアクセス！（念のためサーバー再起動）
• ボタンを押してSandboxのPersonalアカウントでログイン！
− Access Tokenを使ったBusinessでログインしない！
− Developer Siteにログインした本番アカウントでログインしない！
− ログインできない人はDeveloper Siteに戻って、[Profile]でパスワードチェンジ！
• しばらく待って以下の画面が出たら成功！
〜２０：３０

チェックアウトして決済してみる（２）
• SandboxにBusinessアカウントでログインして確認！
− [マイアカウント]->[取引履歴]に移動
〜２０：３０

目指せSandbox長者！

本番運用について
• 本番のビジネスアカウントにログインし、Access Tokenを入れ替えるだけ！
− [ツール]->[すべてのツール]->[API認証情報]->[PayPal決済SDKの実装]で表示されます

ここまででQ&A
〜２０：３０

Braintree Developer Siteを使った
セルフチャレンジ

ゴール
冒頭でご説明した従量決済や
Braintreeの面白い機能を
Braintree Developer Siteを見ながら
各自やってみる！

参照するURL
• Braintree Developer Site
− https://developers.braintreepayments.com/
• Braintree Sandbox
− https://www.braintreepayments.com/ （「Login」で「Sandbox」を選択）

Vaultをつかった継続課金の実装
• Vaultとは？
− PayPalの支払い者の同意情報や、クレジットカード情報など支払い者ごとの支払いに必要な情報をToken化して保存
したもの
− 受け取り者は、一度Vaultを作成するとそのキーだけで、PayPalやクレジットカードを使った決済をサーバーサイド
から任意のタイミングで行える＝定期、従量課金などに使える
− v.zeroを使ったPayPalのvaultは、内部でリファレンストランザクションを使っています
• https://www.paypal.jp/merchant/developer/reference-transaction/ （ビジネスガイドの従量課金を参照）
• Braintree Siteの[Guides]->[PayPal]-「Vault」を参照してください
− https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3
• 先ほどのチェックアウトのコードに少し修正と追加で出来ます
− クライアントJS側： flow -> ‘vault’に、 deviceDataを送信データに追加
− サーバー側：deviceDataとstoreInVaultOnSuccess=trueをsaleに追加、レスポンス内のcustomerIdをVaultの
キーとして次回決済可能
• 正解コード(vault系のファイル、コメント）も参照。

Braintree Sandboxを使ってHosted Fieldに挑戦！
• Hosted Fieldとは？
− divで自由にクレジットカード入力UIを作り、そのデータは、braintreeのクライアントが提供する透明なiframe
フォームでbraintreeサーバーを経由してToken化し、受け取り者には一切カード情報が渡らないようにする仕組み
− これによって、クレジットカード決済のUIは受け取り者が自由に作れるが、クレジットカードが受け取り者に伝播
する可能性がある場合（保存しない場合でも）準拠が必要になるPCIDSSを回避できる
• Braintree Siteの[Guides]->[Hosted Field]を参照してください
− https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3
• Braintreeを使ったクレジットカード決済の取引は、PayPalアカウントには入らないため、こ
こからはBraintreeのSandboxが必要になります
• 正解コード(hosted系のファイル、コメント）も参照。

DEMO

残りの時間は各自好きなことにトライしてみてください
• その他やってみてほしいこと
− 決済した取引情報の詳細をv.zero SDKで参照してみる
− v.zero SDKで返金してみる
− Vaultを初回支払いなく作成してみる（後払い）＝＞Transaction.saleの代わりにCustomerオブジェクトを作ります。
• 質問は適宜受け付けますので気軽に声をかけてください
− ただし、Node.jsそのもののことはあまり詳しくないです

最後に（IoTとの親和性）
• Vaultを使った継続・従量課金は、IoTに応用がききそう
− 例：事前承認IDを使った自作ETCなど
− 参考：http://www.slideshare.net/junichiokamura/paypal-reference-transaction-api
• 深センなどの海外のIoTデバイスベンダからの仕入れはPayPal使われていること多い
• IoTの最大の課題であるセキュリティにおいて安心

Iot_algyan_hands-on_20161129

More Related Content

Viewers also liked

Similar to Iot_algyan_hands-on_20161129

More from Junichi Okamura

Iot_algyan_hands-on_20161129