前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー