「PayPal API体験ハンズオンセミナー！世界のFintechを味見しませんか！」に参加してきました

タイトル

PayPal API体験ハンズオンセミナー！世界のFintechを味見しませんか！ - connpass　（2016.11.29）
algyan.connpass.com

主催

IoT ALGYAN（あるじゃん）

IoTの基本要素を網羅する自学自習可能コンテンツ「IoT Kit Hands-on Training Site」

会場

Microsoft 品川本社
東京都港区港南 2-16-3 品川グランドセントラルタワー

Twitter

twitter.com

f:id:akiyoko:20161129191245j:plain

全体の感想など

先月末、この PayPal のハンズオンイベントに参加しました。

以前に少し PayPal の調査を個人的にしていたので、とても興味深かったです。

＜過去記事＞
akiyoko.hatenablog.jp

Braintree については、今年の 3月あたりにサンドボックスを Python で一度試してみたのですが、あれから 8ヶ月くらい経っているのにまだサンドボックスなのですね。。 Braintree API はドキュメントが（英語ですが）一通り揃っていて実装もしやすいので、早く本番利用できるようになって欲しいところです。

今回、ハンズオン形式で Node.js の express アプリを作って Braintree API を試してみたのですが、express アプリ自体も簡単に作れて実装もシンプルなので、ハンズオンとしてピッタリだったかもしれません。

あと、懇親会で登壇者の岡村氏に直接質問もできて非常に有益でした。
貴重な情報もゲットできました。

PayPal / Braintree Hands-on

岡村純一氏（PayPal Pte.Ltd.）

最近は、エンジニアSF漫画で有名とのこと。
【新連載】エンジニアSF漫画「GRAMMERS #1」プロローグ～予知能力を持った青年 | geechs magazine

Iot_algyan_hands-on_20161129 from Junichi Okamura

昨年 eBay から独立して再上場
venmo は個人間送金、US だけ
PayPal は Braintree を API の基盤にする方針
- v.zero（＝Braintree's API）を充実させようとしている
Classic API はグローバルで最も使われているのでまだ無くならない
「都度決済」（Checkout）、「定期支払」（Recurring Payment）、「従量課金」（Reference Transaction）、「マーケットプレイス用決済」、「送金」（Payout）が可能
- カッコ内は API の名前
- 従量課金は別途審査が必要
- マーケットプレイスは複数受け取りの場合
- 送金も別途審査が必要
開発者向け日本語サイトも拡充中

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

Braintree でクレジットカードを扱うには Braintree アカウントが必要ですが、PayPal を使うだけであれば Braintree のアカウントは必要はないとのことです（PayPal アカウントがあればよい）。

なお、Braintree の本番アカウントはまだ日本では使えないとのこと（現在はサンドボックスアカウントの作成・利用が可能）。

1．PayPal のサンドボックスアカウントを作成

Developer サイトにログインし、ダッシュボードを表示します。

f:id:akiyoko:20161216000336p:plain

次に、［Sandbox］>［Accounts］から、パーソナル（買い手）アカウントおよびビジネス（売り手）アカウントを作成します。
https://developer.paypal.com/developer/accounts/

f:id:akiyoko:20161212080822p:plain

2．v.zero SDK の Credential を作成

続けて、PayPal Developer サイトで［My Apps & Credentials］から「Generate Credential」ボタンをクリックして、ビジネスアカウントに対して Credential（認証情報）を発行します。

f:id:akiyoko:20161216000938p:plain

作成したビジネスアカウントを選択して「Generate Credential」ボタンをクリック。

f:id:akiyoko:20161216001212p:plain

［My Apps & Credentials］の「v.zero SDK」の「Sandbox Account」のリストから、Credential を作成したアカウントをクリックして、Access Token を確認します。

f:id:akiyoko:20161216001911p:plain

3．Node.js, npm をインストール

Homebrew を使って Mac に nodebrew をインストールし、Node.js および npm の最新版をインストールをします。

＜過去記事＞
akiyoko.hatenablog.jp

4．express アプリを作成してサーバを起動

express アプリを作成してサーバを起動します。

$ cd ~/dev

$ npm install express-generator -g
$ express myapp
$ cd myapp
$ npm install
$ npm start

（参考）express実践入門 · GitHub

Braintree Node.js SDK をインストールします。

$ npm install braintree
myapp@0.0.0 /Users/akiyoko/dev/myapp
└─┬ braintree@1.43.0
  ├── dateformat@1.0.1-1.2.3
  ├─┬ readable-stream@1.1.10
  │ ├── core-util-is@1.0.2
  │ ├── debuglog@0.0.2
  │ └── string_decoder@0.10.31
  ├── semver@5.1.0
  ├─┬ source-map-support@0.2.9
  │ └── source-map@0.1.32
  ├── underscore@1.8.3
  └─┬ xml2js@0.1.13
    └── sax@1.2.1

（参考）Set Up Your Server | Node.js - Braintree Developer Documentation

あとは、Set Up Your Server - PayPal Developer に沿って実装していきます。

ちなみに岡村氏の正解コードはこちら。
GitHub - benzookapi/VZeroNodeDemo: Braintree v.zero hands-on code

修正したのは以下の 2ファイルです。

routes/index.js

var express = require('express');
var router = express.Router();
var braintree = require('braintree')

/* GET home page. */
router.get('/', function(req, res, next) {
  var gateway = braintree.connect({
    accessToken: 'access_token$sandbox$xxxxxxxx$xxxxxxxxxxxxxxxxxxxxxxxx'
  });
  gateway.clientToken.generate({}, function (err, response) {
    res.render('index', { title: 'Express', clientToken: response.clientToken });
  });
});

router.post('/checkout', function (req, res) {
  var gateway = braintree.connect({
    accessToken: 'access_token$sandbox$xxxxxxxx$xxxxxxxxxxxxxxxxxxxxxxxx'
  });
  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>');
    }
  });
});

module.exports = router;

views/index.jade

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');
  // Create a Client component
  braintree.client.create({
    authorization: '#{clientToken}'
  }, function (clientErr, clientInstance) {
    // Create PayPal component
    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
          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();
        });
      });
    });
  });
  </script>