Contenu connexe
Similaire à Iot_algyan_hands-on_20161129 (20)
Plus de Junichi Okamura (20)
Iot_algyan_hands-on_20161129
- 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. 本日の内容
• 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.
- 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
- 17. お知らせ
QPayPal Tech Meetup #4
年末スペシャル!
来てね!
https://eventdots.jp/event/605049
©2016 PayPal Inc. Confidential and proprietary.
- 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. 参照する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. 環境設定・確認
• 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. 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. Sandboxでテストアカウントと認証情報作成(2)
• Sandbox用のv.zero 認証情報の取得
− 同じDashboardの「My Apps & Credentials」メニューで「Generate Credential」ボタンを押す
− 先ほど作ったビジネスアカウントを選んで、Credentialを作成(ビジネスアカウントしか表示されません)
− 表示された「Access Token」が後で必要になります。
©2016 PayPal Inc. Confidential and proprietary.
〜19:40
- 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. 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. 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. 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. 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. 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. 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. 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. 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();
}
- 38. 本番運用について
©2016 PayPal Inc. Confidential and proprietary.
• 本番のビジネスアカウントにログインし、Access Tokenを入れ替えるだけ!
− [ツール]->[すべてのツール]->[API認証情報]->[PayPal決済SDKの実装]で表示されます
- 42. 参照するURL
• Braintree Developer Site
− https://developers.braintreepayments.com/
• Braintree Sandbox
− https://www.braintreepayments.com/ (「Login」で「Sandbox」を選択)
©2016 PayPal Inc. Confidential and proprietary.
- 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. 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.