Pay.jpを利用する際のJavaScriptの注意点

概要

フリマアプリを制作した際、Pay.jpを利用してクレジットカード機能を実装する際にかなりハマったことがあったので書き記したいと思います。

やりたかったこと

カード情報をJavaScriptでPay.jpに送信し、トークンを取得します。

間違えたコード

card.js

const card = {
      number: formData.get("buy_record_delivery[number]"),
      month: formData.get("buy_record_delivery[exp_month]"),
      year: `20${formData.get("buy_record_delivery[exp_year]")}`,
      cvc: formData.get("buy_record_delivery[cvc]"),
    };

間違えたコードを実行した結果

https://api.pay.jp/vi/tokens 400

コンソール上でエラーが出ました。URLをクリックすると下記の通りになりました。

{
 "error": {
   "code": "invalid_param_key",
   "message": "Invalid param key to token",
   "param": "card[month], card[year]",
   "status": 400,
   "type": "client_error"
  }
}

上記のエラー内容とログ内容を考察すると、カード情報の番号とセキュリティコードはPay.jpに送られているが、有効期限の月と年が送れていない為エラーになっていることがわかった。しかし、なぜ送れるデータと送れないデータがあるのかがわからずハマりました。

修正したコード

card.js

const card = {
      number: formData.get("buy_record_delivery[number]"),
      exp_month: formData.get("buy_record_delivery[exp_month]"),
      exp_year: `20${formData.get("buy_record_delivery[exp_year]")}`,
      cvc: formData.get("buy_record_delivery[cvc]"),
    };

monthをexp_manthに、yearをexp_yearに変更することで全てのカード情報を送信することができました。

まとめ

Pay.jpにカード情報を送る際には、monthやyearだけだと有効期限ではなくただの「month」「year」と認識されてしまうようです。exp_month(year)とすることで有効期限と認識されるとのことで、気付くのに時間がかかりました。