Tokyo nodefestival workshop_20161112

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実装（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.

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
（フォロー、投稿してね！）

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

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

参照する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アカウントの作成
− ビジネスサイトの開発者向けコンテンツに沿って行います
− パーソナルアカウント、ビジネスアカウントを作ります（デフォルトで２つ用意されています）
https://www.sandbox.paypal.com/
で実際ログインできるか確認

Sandboxでテストアカウントと認証情報作成（２）
• Sandbox用のv.zero 認証情報の取得
− 同じDashboardの「My Apps & Credentials」メニューで「Generate Credential」ボタンを押す
− 先ほど作ったビジネスアカウントを選んで、Credentialを作成

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を修正
− ブラウザリロードする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/ にアクセス！（念のためサーバー再起動）
• ボタンを押してテストアカウントとして作ったPersonalアカウントでログイン
• しばらく待って以下の画面が出たら成功！

チェックアウトして決済してみる（２）
• 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系のファイル、コメント）も参照可。

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

Tokyo nodefestival workshop_20161112

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Tokyo nodefestival workshop_20161112

Similar to Tokyo nodefestival workshop_20161112 (20)

More from Junichi Okamura

More from Junichi Okamura (20)

Recently uploaded

Recently uploaded (9)

Tokyo nodefestival workshop_20161112