Zenn
💸

初めてのクレカ決済機能 (EOTD No.4)

2020/12/04に公開
JavaScript
Rails
初心者
API
tech

こちらAmetaです！4回目のthe Error Of The Day(EOTD) です

平日毎日アウトプット習慣、ついに１週間目が終了です!

では早速参りましょう。。

本日のエラー

シチュエーション

今回のエラーはPAY.JPというクレカ決済代行サービスを利用して、決済機能の実装を試みた時におきました。

payjpのライブラリを読み込ませた後、クレカの情報をトークン化[1]するため処理を記述するためにcredit.jsというファイルを作成しました。

//credit.js
const pay = () => {
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault(); 

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

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

    Payjp.createToken(credit, (status, response) => {
      if (status == 200) {
// codes go on...

PayjpのライブラリからPayjpオブジェクトのcreateTokenメソッドを呼び出し、上記でcreditの変数に格納した情報をトークン化できる！...はずでした。

考察

このエラーが出た後、表示されているURLのリンクにとんでみました。

すると、検証ツール内で以下のようなページに...

喉から手が出るほど欲しいtokensのStatus(402)だけ正常じゃない。。。

すぐに、このStatusの意味をPAY.JPの公式APIリファレンスで探してみました。

すると以下のような記述が...

Error Meaning
400 不正なパラメーターなどのリクエストエラー
401 APIキーの認証エラー
402 カード認証・支払いエラー

カード認証のError..！

トークン化する前のカードの情報がうまく伝わっていないようです。

決済フォームのidに間違いはなかったので、credit変数のどこかに間違いがあるのか？

credit変数
    const credit = {
      number: formData.get("record_address[number]"),
      exp_month: formData.get("record_address[exp_month]"),
      exp_year: `20${formData.get("record_address[exp_year]")}`,
      cvc: formData.get("record_address[cvc]"),
    };

そう思いビューファイルと照らし合わせていると、あるミスに気付きました。

解決

まさかのまさか。

なんとexp_yearのname属性を、ビューファイルでは:exp_yearではなく:exp_yaerと記述していました。

この記述を修正した後、動作の確認をしてみるとスッと動いてくれました。

SOTD(Summary of the day)

今回はJavascriptのファイルの方にエラーの原因があると思ってしまっていたので、ビューファイルの方に気が向かずに時間が過ぎてしまいました。

でも考えてみたら、formData.getで取得しているバリューは検証ツールの"Elements"で見つけたものだったので納得の理由でもありました。

初心者のエラーの９割はスペルミス！

というどこかで聞いたことのある言葉を思い出させてくれるエラーでした。

では、今週はこれで失礼します。。

Hope you have a great weekend ~ !

脚注

  1. 重要な情報を一度しか使用できない暗号に変換すること。 ↩︎

Discussion