Help us understand the problem. What is going on with this article?

Node.jsでPayPalの商品購入の通知(Webhook)を受け取る

More than 1 year has passed since last update.

PayPalライトユーザーなので簡単な通知受け取りやってみます。

PayPalのAPIは正直分かりにくいので自分用にまとめます。APIのドキュメントページは以前よりは良くなったけど、昔から存在する分、調べていると過去の情報と混同しがちです。なので2018年2月バージョンです。適宜読み替え必須。

別途ちゃんと記事にまとめたい

かんたん決済ボタンで会社の商品(Nefry BT)販売しています

PayPalにはかんたん決済ボタンというツールがあります。たぶん通称がPayPalボタンで、製品名がウェブペイメントスタンダード。呼び方いっぱいありますね苦笑

https://www.paypal.com/jp/webapps/mpp/merchant/solutions/paypal-button

HTMLソースを貼り付けるだけで商品購入機能を追加でき、すごく簡単に作れて助かっています。

例えばNefry BTの購入ページからたどると、こんな画面になります。

かんたん決済ボタン(PayPalボタン)の購入通知をNode.jsで受け取りたい

この、商品が購入されたことを知りたいときに使う仕組みがInstant Payment Notification (IPN)と呼ぶそうです。認識間違ってるかもしれないけど僕はそう理解しておきます。

ちなみに、毎回購入してテストするのも大変なので、購入があったときに通知をシミュレーション出来るツールもあります。
Instant Payment Notification (IPN) Simulatorらしいです。

https://developer.paypal.com/developer/ipnSimulator/

今回は手元のMacでNode.jsのサーバーを立ててngrokを経由してPayPalからのWebhookを受け取ります。

Expressを使ってPOSTリクエストを受け取るので、expressとbody-parserをインストールします。
ちなみにNode.jsはv9.5.0です。

$ npm init -y
$ npm i --save express body-parser
$ touch app.js
app.js
'use strict';

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(__dirname+'/'));

const PORT = process.env.PORT || 3000;

app.post('/', async (req, res) => {
    console.log(req.body); //PayPalから送られて来る情報の確認    

    const response = {
        message: 'Success!'
    };
    res.end(JSON.stringify(response));
});

app.listen(PORT);
console.log(`listening on *:${PORT}`);

起動

$ node app.js
listening on *:3000

これで3000番ポートでサーバーが起動します。

このままだと、PayPal側からのWebhookを手元のPCで立てただけのサーバーでは受け取れないのでngrokを使ってトンネリングをします。

まずインストールです。npm経由でインストールできます。

$ npm i -g ngrok

先ほどNode.jsで3000番ポートでサーバーを立てたので、3000番ポートにリダイレクトするトンネリングサーバーを起動します。ターミナルの別タブなどで起動しましょう。

$ ngrok http 3000

起動するとこんな感じでURLが発行されます。

ngrok by @inconshreveable                                      (Ctrl+C to quit)

Session Status                online
Account                       n0bisuke (Plan: Free)
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://2c0f263e.ngrok.io -> localhost:3000
Forwarding                    https://2c0f263e.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              8       0       0.00    0.00    0.21    5.61

この場合だとhttps://2c0f263e.ngrok.ioがトンネリングサーバーのURLです。
このURLはグローバル公開されているので、このURLに対してPayPalはPOSTリクエストを送ることが出来ます。

このトンネリングサーバーにPOSTリクエストがあると、手元のNode.jsで立てたサーバーにもPOSTリクエストがそのまま送られます。

ちなみにngrokのURLはngrokを再起動するたびに再発行されるので注意しましょう。

Instant Payment Notification (IPN) Simulatorで試してみる

こちらのURLにアクセスし、IPN handler URLの箇所に、ngrokで作成したトンネリングサーバーのURL(今回だとhttps://2c0f263e.ngrok.io)を設定します。Transaction typeはあんまりよく分かってないけどExpress Checkoutにしました。(教えて下さい)

この状態でページ下部のSend IPNを押しましょう。

これで購入があったときのようなPOSTリクエストがPayPalから送られてきて、手元で確認できます。

$ node app.js

listening on *:3000
{ payment_type: 'instant',
  payment_date: 'Mon Feb 12 2018 19:27:32 GMT+0900 (JST)',
  payment_status: 'Pending',
  address_status: 'confirmed',
  payer_status: 'verified',
  first_name: 'John',
  last_name: 'Smith',
  payer_email: 'buyer@paypalsandbox.com',
  payer_id: 'TESTBUYERID01',
  address_name: 'John Smith',
  address_country: 'United States',
  address_country_code: 'US',
  address_zip: '95131',
  address_state: 'CA',
  address_city: 'San Jose',
  address_street: '123 any street',
  business: 'seller@paypalsandbox.com',
  receiver_email: 'seller@paypalsandbox.com',
  receiver_id: 'seller@paypalsandbox.com',
  residence_country: 'US',
  item_name: 'something',
  item_number: 'AK-1234',
  quantity: '1',
  shipping: '3.04',
  tax: '2.02',
  mc_currency: 'USD',
  mc_fee: '0.44',
  mc_gross: '12.34',
  mc_gross_1: '9.34',
  txn_type: 'web_accept',
  txn_id: '507675401',
  notify_version: '2.1',
  custom: 'xyz123',
  invoice: 'abc1234',
  test_ipn: '1',
  verify_sign: 'AV5g.RRvzcNMaeOO73JJ-F3fudM2ApaAE0NwEVMxteL8ElyK913tPoLn' }

ターミナルにこんな感じのログが表示されればOKです。

実際のかんたん決済ボタン(PayPalボタン)で試してみる

ボタンの設定画面でステップ 3: 高度な機能をカスタマイズする(オプション)を選択し、その中の高度な変数を追加するの項目にnotify_url=(Webhookを受け取るサーバーのURL)という形式で記述します。

今回の場合はnotify_url=https://2c0f263e.ngrok.ioを記述しました。

この状態で実際に購入してみると手元のNode.jsのサーバーに情報が送られてきます。

{ mc_gross: '1',
  protection_eligibility: 'Eligible',
  address_status: 'confirmed',
  payer_id: 'YKQ5X3VAHDSR8',
  address_street: '����2-17-11\r\n�N���G�C�^�[�Y�V�F�A�n�E�X �g���u��',
  payment_date: '12:19:52 Feb 17, 2018 PST',
  payment_status: 'Completed',
  charset: 'Shift_JIS',
  address_zip: '111-0025',
  first_name: '�ɉ�',
  mc_fee: '1',
  address_country_code: 'JP',
  address_name: '���� �ɉ�',
  notify_version: '3.9',
  custom: '',
  payer_status: 'verified',
  business: 'info@dotstud.io',
  address_country: 'Japan',
  address_city: '�䓌��',
  quantity: '1',
  verify_sign: 'AXK39wE-yxGXy8w.5f-Q92oLUMrXAgw1pM3bgPNM5AJYP8TnyyiCUzHc',
  payer_email: 'sugawara@ryousuke.org',
  txn_id: '8TW04018NT010421T',
  payment_type: 'instant',
  last_name: '����',
  address_state: '�����s',
  receiver_email: 'info@dotstud.io',
  payment_fee: '',
  receiver_id: 'R9B4DK8ZQGJ7U',
  txn_type: 'web_accept',
  item_name: '[�w��]�T���v���{�^��',
  mc_currency: 'JPY',
  item_number: '',
  residence_country: 'JP',
  transaction_subject: '',
  payment_gross: '',
  ipn_track_id: '4a2e2f679688c' }

送られて来たけど文字化けしてますね...

文字化け対応

送られてきた情報をのcharset: 'Shift_JIS'が怪しいです。調べるとUTF8に設定できるらしい。

RailsでPaypalのIPNを処理

設定画面からPayPalボタンの言語コード化を選択します。

言語のエンコード画面になります。

詳細オプションを選択します。エンコード方式が確認出来ますが、確かにShif_JISになってますねぇ。。。

UTF-8に変更しましょう。

これでやっととれました。PayPalに登録している住所やメールアドレス、どの商品を買ったかなどの情報がNode.jsで文字化けせずに受け取れました。プログラム側でエンコードしてもいいですけど、UTF-8にしておいた方が何かと便利です。

{ mc_gross: '2',
  protection_eligibility: 'Eligible',
  address_status: 'confirmed',
  payer_id: 'YKQ5X3VAHDSR8',
  address_street: 'xxxx2-17-11\r\nXXXXXXシェアハウス XXXXX',
  payment_date: '14:31:07 Feb 17, 2018 PST',
  payment_status: 'Completed',
  charset: 'UTF-8',
  address_zip: '111-xxxx',
  first_name: '遼介',
  mc_fee: '2',
  address_country_code: 'JP',
  address_name: '菅原 遼介',
  notify_version: '3.9',
  custom: '',
  payer_status: 'verified',
  business: 'xxxx@xxxx.io',
  address_country: 'Japan',
  address_city: '台東区',
  quantity: '1',
  verify_sign: 'XXXXXXXXXX59viv6mMh95wQVtgejAmdhHhoJEWKLm9oesHOJkWqMK-8G',
  payer_email: 'xxxxx@xxxxx.org',
  txn_id: '9XX216775X972960X',
  payment_type: 'instant',
  last_name: '菅原',
  address_state: '東京都',
  receiver_email: 'xxxx@xxxx.io',
  payment_fee: '',
  receiver_id: 'XXXXDK8ZQGJ7U',
  txn_type: 'web_accept',
  item_name: '[購入]サンプルボタン',
  mc_currency: 'JPY',
  item_number: '44',
  residence_country: 'JP',
  transaction_subject: '',
  payment_gross: '',
  ipn_track_id: 'xxxxf023bdc2a' }

所感

昔よりは分かりやすいけどまだまだ分かりにくい印象なので今回のメモもいつまで使えるのかなぁという感じです苦笑

PayPalボタンと同様のIPNシミュレータの使い方を知りたいですけど、よくわからなかったので実際試すときは1円とか2円のPayPalボタンを作って購入テストしてみました。笑

もっとスマートなデバッグしたい気持ち。

n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした