iot_algyan_hands-on_20161129

PayPal/Braintree Hands-onIoT ALGYAN

November 29 2016

©2015 PayPal Inc. Confidential and proprietary.

Who am I?

©2015 PayPal Inc. Confidential and proprietary. 2

岡村純一 Junichi OkamuraPayPal Integration Manager/EvangelistScala/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

[email protected]

本日の内容

• 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 スタッフになんでも質問− ドキュメントを見ながら色々トライ



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

PayPal とは？

• 様々な資金元に対応した決済サービス（デジタルお財布）

• 売り手、買い手に同一アカウントでなれる双方向プラットフォーム

• 売り手、買い手保護の仕組み

• 多通貨（ 20 以上）、多地域（ 200 以上）、多言語対応のグローバルサービス

• ＝汎用的で、安心な、どこでも使える決済


PayPal Holdings


eBay から独立し再上場、買収により決済全体を網羅する Payment 企業に成長

PayPalCredit CardApple Pay

Android PayBitcoin

…

P2PPrivate

Store-frontOffline

P2PInvoice

Cross border

API Platform


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

　 v.zero (Braintree)

API の変遷


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

Classic API 　 REST APIMobile SDK

Web Web

Mobile

Web

Mobile

Others…

　 Holdlings

PayPal 決済の種類

• 都度決済（ Checkout ）

• 定期支払（ Recurring Payment ）

• 従量課金（ Reference Transaction ）

• マーケットプレイス用決済

• 送金（ Payout ）


都度決済（ Check out ）

• 商品と金額を指定して支払うワンタイム決済

• EC サイトやスマホアプリでの購入

• 配送や予約の伴う取引にも対応


定期支払（ Recurring Payment ）

• 事前承認をもとに決済を定期的に繰り返す

• 月額会費制のサービスなど

• PayPal 側で定期決済を行ってくれる

• 定期決済の成功、失敗は PayPal が通知


従量課金（ Reference Transaction ）

• 事前承認をもとに任意のタイミングで任意の金額を決済する

• ゲーム課金、動画月額支払いなど

• 売り手の自由度が高い強力決済（別途審査必要）


マーケットプレイス用決済

• 一度の決済に複数の受け取り者がいる決済

• 市場やクラウドソーシングなどの手数料


送金（ Payout ）

• 複数の受け取り者に一括して支払う方法

• アフィリエイト報酬など

• 厳密には決済でなく送金

• 手数料計算は決済とは別


詳細は…

日本向け特設サイト『 PayPal ビジネスガイド　開発者向け』

ページをご覧ください！https://www.paypal.jp/merchant/developer/


https://www.paypal.jp/merchant/developer/


お知らせ

Qiitaやってます！

http://qiita.com/tags/PayPal（フォロー、投稿してね！）


http://qiita.com/tags/PayPal

http://qiita.com/tags/PayPal

お知らせ

QPayPal Tech Meetup #4年末スペシャル！

来てね！https://eventdots.jp/event/605049


https://eventdots.jp/event/605049

https://eventdots.jp/event/605049


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

ゴール

先ほどご説明した都度決済を　　新しい API v.zero node.js SDK で

実装してみる！


システム概要


PayPalSandbox =Test

PayPal本番環境

BraintreeSandbox =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


https://developer.paypal.com/

https://developer.paypal.com/



https://www.sandbox.paypal.com/

https://www.sandbox.paypal.com/

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（「ペイパル　登録」で検索）


〜１９：２０

https://liginc.co.jp/web/programming/node-js/85318

https://liginc.co.jp/web/programming/node-js/85318

https://www.paypal.com/jp/signup/account

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


〜１９：４０

https://www.paypal.jp/merchant/developer/sandbox/

https://www.paypal.jp/merchant/developer/sandbox/

https://www.sandbox.paypal.com/jp/webapps/mpp/merchant

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 で一旦終了©2016 PayPal Inc. Confidential and proprietary.

〜２０：００

npm install express-generator –gexpress myappcd myappnpm installnpm start

https://gist.github.com/mitsuruog/fc48397a8e80f051a145

https://gist.github.com/mitsuruog/fc48397a8e80f051a145

http://localhost:3000/


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 にコード追加−コードは先ほどの Developer Site のものを使用。− 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 を右に変更• 元のコードは消します

−コードは先ほどの Developer Site のものを使用。• 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」を選択）


https://developers.braintreepayments.com/

https://developers.braintreepayments.com/

https://www.braintreepayments.com/

https://www.braintreepayments.com/

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系のファイル、コメント）も参照。


https://www.paypal.jp/merchant/developer/reference-transaction/

https://www.paypal.jp/merchant/developer/reference-transaction/

https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3

https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3

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系のファイル、コメント）も参照。


https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3

https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3

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 の最大の課題であるセキュリティにおいて安心


http://www.slideshare.net/junichiokamura/paypal-reference-transaction-api

http://www.slideshare.net/junichiokamura/paypal-reference-transaction-api

Thank YouIoT ALGYAN

November 29 2016


iot_algyan_hands-on_20161129

Internet