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.

Tokyo nodefestival workshop_20161112

4,396 views

Published on

Workshop

Published in: Technology

Tokyo nodefestival workshop_20161112

  1. 1. PayPal/Braintree Workshop
  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実装(60分) − 環境設定・確認(5分) − Sandboxでテストアカウントと認証情報作成(5分) − Node.js SDKでのサーバーサイド実装(20分) − JavaScript Clientでの決済画面実装(20分) − チェックアウトして決済してみる(5分) − 本番運用についてとその他Q&A(5分) • Braintree Developer Siteを使ったセルフチャレンジ(50分) − 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. v.zero Node.js SDKによるPayPal実装
  18. 18. ゴール 先ほどご説明した都度決済を 新しいAPI v.zero node.js SDKで 実装してみる! ©2016 PayPal Inc. Confidential and proprietary.
  19. 19. 参照する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.
  20. 20. 環境設定・確認 • 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.
  21. 21. Sandboxでテストアカウントと認証情報作成(1) • Sandboxアカウントの作成 − ビジネスサイトの開発者向けコンテンツに沿って行います − パーソナルアカウント、ビジネスアカウントを作ります(デフォルトで2つ用意されています) ©2016 PayPal Inc. Confidential and proprietary. https://www.sandbox.paypal.com/ で実際ログインできるか確認
  22. 22. Sandboxでテストアカウントと認証情報作成(2) • Sandbox用のv.zero 認証情報の取得 − 同じDashboardの「My Apps & Credentials」メニューで「Generate Credential」ボタンを押す − 先ほど作ったビジネスアカウントを選んで、Credentialを作成 ©2016 PayPal Inc. Confidential and proprietary.
  23. 23. 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. npm install express-generator –g express myapp cd myapp npm install npm start
  24. 24. 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. npm install braintree
  25. 25. 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. 用語と処理フローの確認
  26. 26. 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 }); }); });
  27. 27. Node.js SDKでのサーバーサイド実装(5) • 初期画面にClient Tokenを埋め込みます。 − views/index.jadeを修正 − ブラウザリロードするClient Tokenが表示されます。 − 反映されない場合はサーバーを再起動してください。 − 正解コードも参照。 ©2016 PayPal Inc. Confidential and proprietary. Client Tokenの画面表示 p Welcome to #{title} #{clientToken}
  28. 28. 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>"); } }); });
  29. 29. 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.
  30. 30. 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>
  31. 31. 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(); }
  32. 32. チェックアウトして決済してみる(1) • http://localhost:3000/ にアクセス!(念のためサーバー再起動) • ボタンを押してテストアカウントとして作ったPersonalアカウントでログイン • しばらく待って以下の画面が出たら成功! ©2016 PayPal Inc. Confidential and proprietary.
  33. 33. チェックアウトして決済してみる(2) • SandboxにBusinessアカウントでログインして確認! − [マイアカウント]->[取引履歴]に移動 ©2016 PayPal Inc. Confidential and proprietary.
  34. 34. 目指せSandbox長者! ©2016 PayPal Inc. Confidential and proprietary.
  35. 35. 本番運用について ©2016 PayPal Inc. Confidential and proprietary. • 本番のビジネスアカウントにログインし、Access Tokenを入れ替えるだけ! − [ツール]->[すべてのツール]->[API認証情報]->[PayPal決済SDKの実装]で表示されます
  36. 36. ここまででQ&A ©2016 PayPal Inc. Confidential and proprietary.
  37. 37. Braintree Developer Siteを使った セルフチャレンジ
  38. 38. ゴール 冒頭でご説明した従量決済や Braintreeの面白い機能を Braintree Developer Siteを見ながら 各自やってみる! ©2016 PayPal Inc. Confidential and proprietary.
  39. 39. 参照するURL • Braintree Developer Site − https://developers.braintreepayments.com/ • Braintree Sandbox − https://www.braintreepayments.com/ (「Login」で「Sandbox」を選択) ©2016 PayPal Inc. Confidential and proprietary.
  40. 40. 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.
  41. 41. 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.
  42. 42. 残りの時間は各自好きなことにトライしてみてください • その他やってみてほしいこと − 決済した取引情報の詳細をv.zero SDKで参照してみる − v.zero SDKで返金してみる − Vaultを初回支払いなく作成してみる(後払い)=>Transaction.saleの代わりにCustomerオブジェクトを作ります。 • 質問は適宜受け付けますので気軽に声をかけてください − ただし、Node.jsそのもののことはたくさんいるプロフェッショナルにお繋ぎするかもです。 ©2016 PayPal Inc. Confidential and proprietary.
  43. 43. Thank You

×