Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Iot_algyan_hands-on_20161129

3,440 views

Published on

Hands-on

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Iot_algyan_hands-on_20161129

  1. 1. PayPal/Braintree Hands-on
  2. 2. 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
  3. 3. 本日の内容 • 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.
  4. 4. PayPalとそのAPI、決済手段の概要
  5. 5. PayPalとは? • 様々な資金元に対応した決済サービス(デジタルお財布) • 売り手、買い手に同一アカウントでなれる双方向プラットフォーム • 売り手、買い手保護の仕組み • 多通貨(20以上)、多地域(200以上)、多言語対応のグローバルサービス • =汎用的で、安心な、どこでも使える決済 ©2016 PayPal Inc. Confidential and proprietary.
  6. 6. PayPal Holdings ©2016 PayPal Inc. Confidential and proprietary. eBayから独立し再上場、買収により決済全体を網羅するPayment企業に成長 PayPal Credit Card Apple Pay Android Pay Bitcoin … P2P Private Store-front Offline P2P Invoice Cross border
  7. 7. API Platform ©2016 PayPal Inc. Confidential and proprietary. BraintreeのAPIプラットフォームv.zeroを基盤に様々な決済手段を網羅
  8. 8. v.zero (Braintree) APIの変遷 ©2016 PayPal Inc. Confidential and proprietary. 独自仕様のレガシーからオープン仕様(OAIやOAS)、様々な決済手段へ Classic API REST API Mobile SDK Web Web Mobile Web Mobile Others… Holdlings
  9. 9. PayPal決済の種類 • 都度決済(Checkout) • 定期支払(Recurring Payment) • 従量課金(Reference Transaction) • マーケットプレイス用決済 • 送金(Payout) ©2016 PayPal Inc. Confidential and proprietary.
  10. 10. 都度決済(Checkout) • 商品と金額を指定して支払うワンタイム決済 • ECサイトやスマホアプリでの購入 • 配送や予約の伴う取引にも対応 ©2016 PayPal Inc. Confidential and proprietary.
  11. 11. 定期支払(Recurring Payment) • 事前承認をもとに決済を定期的に繰り返す • 月額会費制のサービスなど • PayPal側で定期決済を行ってくれる • 定期決済の成功、失敗はPayPalが通知 ©2016 PayPal Inc. Confidential and proprietary.
  12. 12. 従量課金(Reference Transaction) • 事前承認をもとに任意のタイミングで任意の金額を決済する • ゲーム課金、動画月額支払いなど • 売り手の自由度が高い強力決済(別途審査必要) ©2016 PayPal Inc. Confidential and proprietary.
  13. 13. マーケットプレイス用決済 • 一度の決済に複数の受け取り者がいる決済 • 市場やクラウドソーシングなどの手数料 ©2016 PayPal Inc. Confidential and proprietary.
  14. 14. 送金(Payout) • 複数の受け取り者に一括して支払う方法 • アフィリエイト報酬など • 厳密には決済でなく送金 • 手数料計算は決済とは別 ©2016 PayPal Inc. Confidential and proprietary.
  15. 15. 詳細は… 日本向け特設サイト 『PayPalビジネスガイド 開発者向け』 ページをご覧ください! https://www.paypal.jp/merchant/developer/ ©2016 PayPal Inc. Confidential and proprietary.
  16. 16. お知らせ Qiita やってます! http://qiita.com/tags/PayPal (フォロー、投稿してね!) ©2016 PayPal Inc. Confidential and proprietary.
  17. 17. お知らせ QPayPal Tech Meetup #4 年末スペシャル! 来てね! https://eventdots.jp/event/605049 ©2016 PayPal Inc. Confidential and proprietary.
  18. 18. v.zero Node.js SDKによるPayPal実装
  19. 19. ゴール 先ほどご説明した都度決済を 新しいAPI v.zero node.js SDKで 実装してみる! ©2016 PayPal Inc. Confidential and proprietary.
  20. 20. システム概要 ©2016 PayPal Inc. Confidential and proprietary. PayPal Sandbox =Test PayPal 本番環境 Braintree Sandbox =Test Braintree 本番環境 v.zero =Braintree’s API PayPal Credit Card Apple Pay, etc… 切り替え切り替え 作成に必要 Personal: 支払い用 Business:受け取り用
  21. 21. 参照する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 ©2016 PayPal Inc. Confidential and proprietary.
  22. 22. 環境設定・確認 • Node.js (npm) セットアップ済み − 参考:https://liginc.co.jp/web/programming/node-js/85318(「LIG node」で検索) − 「npm」コマンドがターミナルで実行できる状態 • PayPal本番アカウント取得済み(パーソナルでもOK!) − みんな今日の申し込みのためにアカウント持ってるはずだけど、もし持っていない方はこちら! − https://www.paypal.com/jp/signup/account(「ペイパル 登録」で検索) ©2016 PayPal Inc. Confidential and proprietary. 〜19:20
  23. 23. Sandboxでテストアカウントと認証情報作成(1) • Sandboxアカウントの作成 − Developer Siteに本番アカウントでログインします − [Sandbox]->[Accounts]に移動します − パーソナルアカウント(支払い用)、ビジネスアカウント(受け取り用)を作ります • デフォルトで2つ用意されていますが、これを使う場合は、[Profile]でパスワードを再設定してください! • パーソナルアカウントは支払いに使うのでクレジットカードの登録を忘れずに! − ビジネスガイドも参照! • https://www.paypal.jp/merchant/developer/sandbox/ − Sandboxに作成したアカウントでログインできるか確認してください! • https://www.sandbox.paypal.com/jp/webapps/mpp/merchant ©2016 PayPal Inc. Confidential and proprietary. 〜19:40
  24. 24. Sandboxでテストアカウントと認証情報作成(2) • Sandbox用のv.zero 認証情報の取得 − 同じDashboardの「My Apps & Credentials」メニューで「Generate Credential」ボタンを押す − 先ほど作ったビジネスアカウントを選んで、Credentialを作成(ビジネスアカウントしか表示されません) − 表示された「Access Token」が後で必要になります。 ©2016 PayPal Inc. Confidential and proprietary. 〜19:40
  25. 25. Sandboxでテストアカウントと認証情報作成(3) • うまくいかない人は正解コードのREADMEの作成済みアカウントを使ってください! − https://github.com/benzookapi/VZeroNodeDemo ©2016 PayPal Inc. Confidential and proprietary. 〜19:40
  26. 26. Node.js SDKでのサーバーサイド実装(1) • 決済画面及びサーバー用のNode.jsアプリを用意する − すでにNode.jsのアプリがある方はそれを使ってください − ない方は、以下を参考にExpressをインストールしてサンプルアプリを起動しましょう − https://gist.github.com/mitsuruog/fc48397a8e80f051a145(「express実践入門」で検索) − 以下のコマンドで作れます。 • 動作確認 − http://localhost:3000/ にアクセスしてページが表示されることを確認 − 動作確認できたらCtrl+Cで一旦終了 ©2016 PayPal Inc. Confidential and proprietary. 〜20:00 npm install express-generator –g express myapp cd myapp npm install npm start
  27. 27. Node.js SDKでのサーバーサイド実装(2) • v.zero Node.js SDKのインストール − アプリの場所で以下のコマンド実行 • PayPal Developer Site内のv.zeroのページを開く − [Top]->[Docs]->[PayPal Checkout]->[Express Checkout ve.zero SDK]->[Setup Your Server] − 「Node.js」を選択 ©2016 PayPal Inc. Confidential and proprietary. 〜20:00 npm install braintree
  28. 28. Node.js SDKでのサーバーサイド実装(3) • ①Access Token − Credentialsで生成したトークンです。サーバー側で管理し、他人に見せてはいけません。 • ②Client Token − Access Tokenを元にサーバー側で生成します。クライアント(WEBページやアプリの決済画面)で使います。他人 に見せても構いません。 • ③(Payment Method )Nonce − クライアントがClient Tokenを使って、ユーザー操作の後に生成します。他人に見せない方がいいです。 • ④サーバー側の決済処理 − ①のAccess Tokenと③のPayment Method Nonceを使って行います。両者が正しくないと使えません。 − ③は使い回すことはできないワンタイムなものです。 ©2016 PayPal Inc. Confidential and proprietary. 用語と処理フローの確認
  29. 29. Node.js SDKでのサーバーサイド実装(4) • 初期画面表示でClient Tokenを生成します。 − routes/index.jsを修正 − コードは先ほどのDeveloper Siteのものを使用。 − 正解コードも参照。 ©2016 PayPal Inc. Confidential and proprietary. 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 }); }); });
  30. 30. Node.js SDKでのサーバーサイド実装(5) • 初期画面にClient Tokenを埋め込みます。 − views/index.jadeを修正 − サーバー側の変数名「clientToken」に対応します。 − ブラウザリロードするClient Tokenが表示されます。 − 反映されない場合はサーバーを再起動してください。 ©2016 PayPal Inc. Confidential and proprietary. Client Tokenの画面表示 p Welcome to #{title} #{clientToken}
  31. 31. Node.js SDKでのサーバーサイド実装(6) • クライアントから呼ばれる処理を実装します。 − routes/index.jsにコード追加 − コードは先ほどのDeveloper Siteのものを使用。 − order、shippingなどの情報は削除可。 − merchantAccountIdで通貨設定 − 正解コードも参照。 ©2016 PayPal Inc. Confidential and proprietary. 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>"); } }); });
  32. 32. JavaScript Clientでの決済画面実装(1) • PayPal Developer Site内のクライアント実装のページを開く − [Top]->[Docs]->[PayPal Checkout]->[Express Checkout ve.zero SDK]->[Setup Your Client] − 「 JS v3」を選択 ©2016 PayPal Inc. Confidential and proprietary. 〜20:20
  33. 33. 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で表示言語設定可 − 正解コードも参照。 ©2016 PayPal Inc. Confidential and proprietary. 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>
  34. 34. JavaScript Clientでの決済画面実装(3) • サーバーへの通信を記述します − views/index.jadeに右を追加 • Function(err, tokenizationPayLoad)内に追加 • tokenizationPayLoad.nonce • amountとnonceをPOSTできればなんでも可 − 正解コードも参照。 ©2016 PayPal Inc. Confidential and proprietary. サーバーへ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(); }
  35. 35. チェックアウトして決済してみる(1) • http://localhost:3000/ にアクセス!(念のためサーバー再起動) • ボタンを押してSandboxのPersonalアカウントでログイン! − Access Tokenを使ったBusinessでログインしない! − Developer Siteにログインした本番アカウントでログインしない! − ログインできない人はDeveloper Siteに戻って、[Profile]でパスワードチェンジ! • しばらく待って以下の画面が出たら成功! ©2016 PayPal Inc. Confidential and proprietary. 〜20:30
  36. 36. チェックアウトして決済してみる(2) • SandboxにBusinessアカウントでログインして確認! − [マイアカウント]->[取引履歴]に移動 ©2016 PayPal Inc. Confidential and proprietary. 〜20:30
  37. 37. 目指せSandbox長者! ©2016 PayPal Inc. Confidential and proprietary.
  38. 38. 本番運用について ©2016 PayPal Inc. Confidential and proprietary. • 本番のビジネスアカウントにログインし、Access Tokenを入れ替えるだけ! − [ツール]->[すべてのツール]->[API認証情報]->[PayPal決済SDKの実装]で表示されます
  39. 39. ここまででQ&A ©2016 PayPal Inc. Confidential and proprietary. 〜20:30
  40. 40. Braintree Developer Siteを使った セルフチャレンジ
  41. 41. ゴール 冒頭でご説明した従量決済や Braintreeの面白い機能を Braintree Developer Siteを見ながら 各自やってみる! ©2016 PayPal Inc. Confidential and proprietary.
  42. 42. 参照するURL • Braintree Developer Site − https://developers.braintreepayments.com/ • Braintree Sandbox − https://www.braintreepayments.com/ (「Login」で「Sandbox」を選択) ©2016 PayPal Inc. Confidential and proprietary.
  43. 43. 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系のファイル、コメント)も参照。 ©2016 PayPal Inc. Confidential and proprietary.
  44. 44. 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系のファイル、コメント)も参照。 ©2016 PayPal Inc. Confidential and proprietary.
  45. 45. DEMO ©2016 PayPal Inc. Confidential and proprietary.
  46. 46. 残りの時間は各自好きなことにトライしてみてください • その他やってみてほしいこと − 決済した取引情報の詳細をv.zero SDKで参照してみる − v.zero SDKで返金してみる − Vaultを初回支払いなく作成してみる(後払い)=>Transaction.saleの代わりにCustomerオブジェクトを作ります。 • 質問は適宜受け付けますので気軽に声をかけてください − ただし、Node.jsそのもののことはあまり詳しくないです ©2016 PayPal Inc. Confidential and proprietary.
  47. 47. 最後に(IoTとの親和性) • Vaultを使った継続・従量課金は、IoTに応用がききそう − 例:事前承認IDを使った自作ETCなど − 参考:http://www.slideshare.net/junichiokamura/paypal-reference-transaction-api • 深センなどの海外のIoTデバイスベンダからの仕入れはPayPal使われていること多い • IoTの最大の課題であるセキュリティにおいて安心 ©2016 PayPal Inc. Confidential and proprietary.
  48. 48. Thank You

×