質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.51%

payjpのクレジットカード登録機能の実装(controllreの動作が上手くいきません)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 81

zoez

score 0

前提・実現したいこと

payjpのクレジットカード登録機能の実装

発生している問題・エラーメッセージ

カード登録フォームでjavascriptでは処理が上手く行っているようなのですが
createメソッドでparams['payjp_token']がないと言われてしまう
(条件分岐でparams['payjp_token']が空の場合の処理に飛んでしまう)

該当のソースコード

登録フォームのビュー

%div.mypage-content
  %section.purchace
    %h2.profile__top クレジットカード情報入力
    .content
      = form_with url: "/credit", method: :post, html: { name: "inputForm" } do |f|
        .content__inner
          .resister-credit
            = f.label :カード番号, class: "resister-credit__number" 
            %span.resister-credit__need 必須
            = f.text_field :card_number, name: "card_number", id:"card_number", type: 'text', placeholder: "半角数字のみ", maxlength: "16", class:"resister-credit__text"
            %ul.resister-credi__errow
            %ul.resister-credi__card
              = image_tag "credit01.JPG", class: "resister-credit__list"
          %div.resister-credit.margin
            = f.label :有効期限, class: "resister-credit__number" 
            %span.resister-credit__need 必須
            %br
            %div.resister-credit__limit
              = f.select :exp_month, [["01",1],["02",2],["03",3],["04",4],["05",5],["06",6],["07",7],["08",8],["09",9],["10",10],["11",11],["12",12]],{}, class: "resister-credit__limit__mm", name: "exp_month", id: "exp_month"
              %i.fas.fa-chevron-down
              %span            %div.resister-credit__limit
              = f.select :exp_year, [["19",2019],["20",2020],["21",2021],["22",2022],["23",2023],["24",2024],["25",2025],["26",2026],["27",2027],["28",2028],["29",2029]],{}, class: "resister-credit__limit__mm", name: "exp_year", id:"exp_year"
              %i.fas.fa-chevron-down
              %span          %div.resister-credit.margin
            = f.label :セキュリティーコード, class: "resister-credit__number" 
            %span.resister-credit__need 必須
            = f.text_field :cvc, name: "cvc", id:"cvc", type: 'text',placeholder: "カード背面4桁もしくは3桁の番号", maxlength: "4",class:"resister-credit__text"
          .submitter
            = f.submit "追加する", class: 'profile__top__content__button margin', id: "token_submit"


payjp.js

document.addEventListener(
  "DOMContentLoaded", e => {
    if (document.getElementById("token_submit") != null) { 
      Payjp.setPublicKey("pk_test_fa4c0aef52ad35e72960c1b3"); 
      let btn = document.getElementById("token_submit"); 
      btn.addEventListener("click", e => { 
        e.preventDefault(); 
        let card = {
          number: document.getElementById("card_number").value,
          cvc: document.getElementById("cvc").value,
          exp_month: document.getElementById("exp_month").value,
          exp_year: document.getElementById("exp_year").value
        }; 
        Payjp.createToken(card, (status, response) => {
          if (status === 200) { 
            $("#card_number").removeAttr("name");
            $("#cvc").removeAttr("name");
            $("#exp_month").removeAttr("name");
            $("#exp_year").removeAttr("name");
            $("#card_token").append(
              $('<input type="hidden" name="payjp_token">').val(response.id)
            ); 
            document.inputForm.submit();
            alert("登録が完了しました"); 
          } else {
            alert("カード情報が正しくありません。"); 
          }
        });
      });
    }
  },
  false
);


コントローラー

class CreditController < ApplicationController
  require 'payjp'
  before_action :get_payjp_info,only: [:create]

  def new
    card = Card.where(user_id: current_user.id).first
    redirect_to action: "index" if card.present?
  end

  def create
    if params['payjp_token'].blank?
      redirect_to action: "new"
    else
      customer = Payjp::Customer.create(
      description: 'test', 
      email: current_user.email,
      card: params['payjp_token'], 
      metadata: {user_id: current_user.id}
      )
      @card = Card.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
      if @card.save
        redirect_to action: "index"
      else
        redirect_to action: "new"
      end
    end
  end

  def index
    @credit = "仮置き"
  end

  private

  def get_payjp_info
    Payjp.api_key = "sk_test_91d9387346272e9207fde8f5"
  end
end

試したこと

https://qiita.com/takachan_coding/items/f7e70794b9ca03b559dd
上のサイトなどを参考に、コードを実装し不足がないか確認しましたが原因がわかりませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s.k

    2020/03/29 22:15

    エラーログ追記していただけますか?

    キャンセル

  • zoez

    2020/03/29 22:21

    すみません
    ビューの最後に
    %input{:id => "card_token", :type => "hidden"}
    を挿入したら、解決いたしました。

    jsの情報の渡し先を設定し忘れていたのが、原因でした

    キャンセル

  • s.k

    2020/03/29 22:25

    うす!

    キャンセル

回答 1

check解決した方法

0

ビューの最後に
%input{:id => "card_token", :type => "hidden"}
を挿入したら、解決いたしました。

jsの情報の渡し先を設定し忘れていたのが、原因でした

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る