Suche senden
Hochladen
Iot_algyan_hands-on_20161129
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
4,696 views
J
Junichi Okamura
Folgen
Hands-on
Weniger lesen
Mehr lesen
Internet
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Empfohlen
PayPal Reference Transaction APIをお財布ケータイぽく使ってみる
PayPal Reference Transaction APIをお財布ケータイぽく使ってみる
Junichi Okamura
Tokyo nodefestival workshop_20161112
Tokyo nodefestival workshop_20161112
Junichi Okamura
PayPalとセキュリティの関係について
PayPalとセキュリティの関係について
Junichi Okamura
API Meetup #8 PayPal API
API Meetup #8 PayPal API
Junichi Okamura
20190312 node gakuen
20190312 node gakuen
Junichi Okamura
簡単、クレカ決済! PAY.JPを使ったクレカ決済の仕組み・開発運用時の考慮点について
簡単、クレカ決済! PAY.JPを使ったクレカ決済の仕組み・開発運用時の考慮点について
dcubeio
CaseStudyJune2018
CaseStudyJune2018
Tokyo Bitcoin Ventures
Payjp
Payjp
yoshichiba
Empfohlen
PayPal Reference Transaction APIをお財布ケータイぽく使ってみる
PayPal Reference Transaction APIをお財布ケータイぽく使ってみる
Junichi Okamura
Tokyo nodefestival workshop_20161112
Tokyo nodefestival workshop_20161112
Junichi Okamura
PayPalとセキュリティの関係について
PayPalとセキュリティの関係について
Junichi Okamura
API Meetup #8 PayPal API
API Meetup #8 PayPal API
Junichi Okamura
20190312 node gakuen
20190312 node gakuen
Junichi Okamura
簡単、クレカ決済! PAY.JPを使ったクレカ決済の仕組み・開発運用時の考慮点について
簡単、クレカ決済! PAY.JPを使ったクレカ決済の仕組み・開発運用時の考慮点について
dcubeio
CaseStudyJune2018
CaseStudyJune2018
Tokyo Bitcoin Ventures
Payjp
Payjp
yoshichiba
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
Yuki Matsukura
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
Braintree+facebook messangerでチケット購入
Braintree+facebook messangerでチケット購入
Wakana Yoshizawa
PayPalアカウントを使った便利で安心なプラットフォーム運用
PayPalアカウントを使った便利で安心なプラットフォーム運用
Junichi Okamura
20170324 html5j web_paltform_study
20170324 html5j web_paltform_study
Junichi Okamura
PPUG Kyoto #1
PPUG Kyoto #1
Junichi Okamura
Shopifyで採用されているPayPal実装とそのデモ
Shopifyで採用されているPayPal実装とそのデモ
Junichi Okamura
新しい実装方法 Braintree SDKについて
新しい実装方法 Braintree SDKについて
Junichi Okamura
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
Ryo Nagaoka
Redash pythonで業務分析
Redash pythonで業務分析
創史 花村
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Yuji Takayama
Web Standards 2018
Web Standards 2018
Shogo Sensui
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Yuji Takayama
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
111008 silverlight square_datavalidation
111008 silverlight square_datavalidation
Takayoshi Tanaka
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
Weitere ähnliche Inhalte
Andere mochten auch
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
Yuki Matsukura
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
Braintree+facebook messangerでチケット購入
Braintree+facebook messangerでチケット購入
Wakana Yoshizawa
PayPalアカウントを使った便利で安心なプラットフォーム運用
PayPalアカウントを使った便利で安心なプラットフォーム運用
Junichi Okamura
20170324 html5j web_paltform_study
20170324 html5j web_paltform_study
Junichi Okamura
PPUG Kyoto #1
PPUG Kyoto #1
Junichi Okamura
Shopifyで採用されているPayPal実装とそのデモ
Shopifyで採用されているPayPal実装とそのデモ
Junichi Okamura
新しい実装方法 Braintree SDKについて
新しい実装方法 Braintree SDKについて
Junichi Okamura
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
Ryo Nagaoka
Redash pythonで業務分析
Redash pythonで業務分析
創史 花村
Andere mochten auch
(10)
LINE Botでテラレンの受付を自動化してみた
LINE Botでテラレンの受付を自動化してみた
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
Braintree+facebook messangerでチケット購入
Braintree+facebook messangerでチケット購入
PayPalアカウントを使った便利で安心なプラットフォーム運用
PayPalアカウントを使った便利で安心なプラットフォーム運用
20170324 html5j web_paltform_study
20170324 html5j web_paltform_study
PPUG Kyoto #1
PPUG Kyoto #1
Shopifyで採用されているPayPal実装とそのデモ
Shopifyで採用されているPayPal実装とそのデモ
新しい実装方法 Braintree SDKについて
新しい実装方法 Braintree SDKについて
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
2017-08-22 Python×Djangoで作るHR Techサービスのメリット・デメリット
Redash pythonで業務分析
Redash pythonで業務分析
Ähnlich wie Iot_algyan_hands-on_20161129
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Naoya Ito
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Yuji Takayama
Web Standards 2018
Web Standards 2018
Shogo Sensui
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Yuji Takayama
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
111008 silverlight square_datavalidation
111008 silverlight square_datavalidation
Takayoshi Tanaka
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
Web制作のアレコレ
Web制作のアレコレ
regret raym
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
土岐 孝平
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
Koichi Uchimura
NoSQL and JavaScript 2013-02-09
NoSQL and JavaScript 2013-02-09
WakandaJA
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
How to django at first
How to django at first
Maito Kuwahara
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Ähnlich wie Iot_algyan_hands-on_20161129
(20)
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Web Standards 2018
Web Standards 2018
Data api workshop at Co-Edo
Data api workshop at Co-Edo
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
111008 silverlight square_datavalidation
111008 silverlight square_datavalidation
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Web制作のアレコレ
Web制作のアレコレ
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
NoSQL and JavaScript 2013-02-09
NoSQL and JavaScript 2013-02-09
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
How to django at first
How to django at first
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Mehr von Junichi Okamura
20180915 word camp_tokyo
20180915 word camp_tokyo
Junichi Okamura
20180829 ppug fukuoka
20180829 ppug fukuoka
Junichi Okamura
20180616 pay pal_meetup_osaka
20180616 pay pal_meetup_osaka
Junichi Okamura
20180609 ppug nagoya
20180609 ppug nagoya
Junichi Okamura
20180607 ppug hachioji
20180607 ppug hachioji
Junichi Okamura
20180529 fukuoka ec_night
20180529 fukuoka ec_night
Junichi Okamura
20180530 ppug tokyo
20180530 ppug tokyo
Junichi Okamura
20180525 ppug sendai
20180525 ppug sendai
Junichi Okamura
20180521 cs hack
20180521 cs hack
Junichi Okamura
20180519 ppug niigata
20180519 ppug niigata
Junichi Okamura
20180322 tech meetup_#8
20180322 tech meetup_#8
Junichi Okamura
20180323 junction tokyo_2018
20180323 junction tokyo_2018
Junichi Okamura
20180316 ppug tokyo_#5
20180316 ppug tokyo_#5
Junichi Okamura
20180228 sendai it_workshop
20180228 sendai it_workshop
Junichi Okamura
20180224 ppug osaka_#3
20180224 ppug osaka_#3
Junichi Okamura
20180222 serverless meetup_#7
20180222 serverless meetup_#7
Junichi Okamura
PayPal Tech Meetup #7 Year End Party with PayPal Masters!
PayPal Tech Meetup #7 Year End Party with PayPal Masters!
Junichi Okamura
PayPal User Groupの振り返り
PayPal User Groupの振り返り
Junichi Okamura
Shinjuku.rb 20151125 PayPal 101
Shinjuku.rb 20151125 PayPal 101
Junichi Okamura
Rakuten Tech Conf 2015 Yet Another Security Talk
Rakuten Tech Conf 2015 Yet Another Security Talk
Junichi Okamura
Mehr von Junichi Okamura
(20)
20180915 word camp_tokyo
20180915 word camp_tokyo
20180829 ppug fukuoka
20180829 ppug fukuoka
20180616 pay pal_meetup_osaka
20180616 pay pal_meetup_osaka
20180609 ppug nagoya
20180609 ppug nagoya
20180607 ppug hachioji
20180607 ppug hachioji
20180529 fukuoka ec_night
20180529 fukuoka ec_night
20180530 ppug tokyo
20180530 ppug tokyo
20180525 ppug sendai
20180525 ppug sendai
20180521 cs hack
20180521 cs hack
20180519 ppug niigata
20180519 ppug niigata
20180322 tech meetup_#8
20180322 tech meetup_#8
20180323 junction tokyo_2018
20180323 junction tokyo_2018
20180316 ppug tokyo_#5
20180316 ppug tokyo_#5
20180228 sendai it_workshop
20180228 sendai it_workshop
20180224 ppug osaka_#3
20180224 ppug osaka_#3
20180222 serverless meetup_#7
20180222 serverless meetup_#7
PayPal Tech Meetup #7 Year End Party with PayPal Masters!
PayPal Tech Meetup #7 Year End Party with PayPal Masters!
PayPal User Groupの振り返り
PayPal User Groupの振り返り
Shinjuku.rb 20151125 PayPal 101
Shinjuku.rb 20151125 PayPal 101
Rakuten Tech Conf 2015 Yet Another Security Talk
Rakuten Tech Conf 2015 Yet Another Security Talk
Kürzlich hochgeladen
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ivanwang53
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
ivanwang53
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
ivanwang53
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components
okitamasashi
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
ivanwang53
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
Taka Narita
Kürzlich hochgeladen
(6)
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
Iot_algyan_hands-on_20161129
1.
PayPal/Braintree Hands-on
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.
4.
PayPalとそのAPI、決済手段の概要
5.
PayPalとは? • 様々な資金元に対応した決済サービス(デジタルお財布) • 売り手、買い手に同一アカウントでなれる双方向プラットフォーム •
売り手、買い手保護の仕組み • 多通貨(20以上)、多地域(200以上)、多言語対応のグローバルサービス • =汎用的で、安心な、どこでも使える決済 ©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
7.
API Platform ©2016 PayPal
Inc. Confidential and proprietary. BraintreeのAPIプラットフォームv.zeroを基盤に様々な決済手段を網羅
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.
PayPal決済の種類 • 都度決済(Checkout) • 定期支払(Recurring
Payment) • 従量課金(Reference Transaction) • マーケットプレイス用決済 • 送金(Payout) ©2016 PayPal Inc. Confidential and proprietary.
10.
都度決済(Checkout) • 商品と金額を指定して支払うワンタイム決済 • ECサイトやスマホアプリでの購入 •
配送や予約の伴う取引にも対応 ©2016 PayPal Inc. Confidential and proprietary.
11.
定期支払(Recurring Payment) • 事前承認をもとに決済を定期的に繰り返す •
月額会費制のサービスなど • PayPal側で定期決済を行ってくれる • 定期決済の成功、失敗はPayPalが通知 ©2016 PayPal Inc. Confidential and proprietary.
12.
従量課金(Reference Transaction) • 事前承認をもとに任意のタイミングで任意の金額を決済する •
ゲーム課金、動画月額支払いなど • 売り手の自由度が高い強力決済(別途審査必要) ©2016 PayPal Inc. Confidential and proprietary.
13.
マーケットプレイス用決済 • 一度の決済に複数の受け取り者がいる決済 • 市場やクラウドソーシングなどの手数料 ©2016
PayPal Inc. Confidential and proprietary.
14.
送金(Payout) • 複数の受け取り者に一括して支払う方法 • アフィリエイト報酬など •
厳密には決済でなく送金 • 手数料計算は決済とは別 ©2016 PayPal Inc. Confidential and proprietary.
15.
詳細は… 日本向け特設サイト 『PayPalビジネスガイド 開発者向け』 ページをご覧ください! https://www.paypal.jp/merchant/developer/ ©2016 PayPal
Inc. Confidential and proprietary.
16.
お知らせ Qiita やってます! http://qiita.com/tags/PayPal (フォロー、投稿してね!) ©2016 PayPal Inc.
Confidential and proprietary.
17.
お知らせ QPayPal Tech Meetup
#4 年末スペシャル! 来てね! https://eventdots.jp/event/605049 ©2016 PayPal Inc. Confidential and proprietary.
18.
v.zero Node.js SDKによるPayPal実装
19.
ゴール 先ほどご説明した都度決済を 新しいAPI v.zero node.js
SDKで 実装してみる! ©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
25.
Sandboxでテストアカウントと認証情報作成(3) • うまくいかない人は正解コードのREADMEの作成済みアカウントを使ってください! − https://github.com/benzookapi/VZeroNodeDemo ©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(); }
35.
チェックアウトして決済してみる(1) • http://localhost:3000/ にアクセス!(念のためサーバー再起動) •
ボタンを押してSandboxのPersonalアカウントでログイン! − Access Tokenを使ったBusinessでログインしない! − Developer Siteにログインした本番アカウントでログインしない! − ログインできない人はDeveloper Siteに戻って、[Profile]でパスワードチェンジ! • しばらく待って以下の画面が出たら成功! ©2016 PayPal Inc. Confidential and proprietary. 〜20:30
36.
チェックアウトして決済してみる(2) • SandboxにBusinessアカウントでログインして確認! − [マイアカウント]->[取引履歴]に移動 ©2016
PayPal Inc. Confidential and proprietary. 〜20:30
37.
目指せSandbox長者! ©2016 PayPal Inc.
Confidential and proprietary.
38.
本番運用について ©2016 PayPal Inc.
Confidential and proprietary. • 本番のビジネスアカウントにログインし、Access Tokenを入れ替えるだけ! − [ツール]->[すべてのツール]->[API認証情報]->[PayPal決済SDKの実装]で表示されます
39.
ここまででQ&A ©2016 PayPal Inc.
Confidential and proprietary. 〜20:30
40.
Braintree Developer Siteを使った セルフチャレンジ
41.
ゴール 冒頭でご説明した従量決済や Braintreeの面白い機能を Braintree Developer Siteを見ながら 各自やってみる! ©2016
PayPal Inc. Confidential and proprietary.
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.
45.
DEMO ©2016 PayPal Inc.
Confidential and proprietary.
46.
残りの時間は各自好きなことにトライしてみてください • その他やってみてほしいこと − 決済した取引情報の詳細をv.zero
SDKで参照してみる − v.zero SDKで返金してみる − Vaultを初回支払いなく作成してみる(後払い)=>Transaction.saleの代わりにCustomerオブジェクトを作ります。 • 質問は適宜受け付けますので気軽に声をかけてください − ただし、Node.jsそのもののことはあまり詳しくないです ©2016 PayPal Inc. Confidential and proprietary.
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.
Thank You
Jetzt herunterladen