オリジナルアプリでPAY.JPを用いた購入機能を追加したいです。
解決したいこと
購入機能を追加するため、HTML、CSSは完成したのですが、購入ボタンをクリックしても反応しない。
原因はある程度わかっていて、検証ツールで購入ボタンの要素を確認すると、
画像の通り『disable』となってしまっています。
ちなみに購入ボタンをクリックする前は『disable』の表示は無いです。
ボタンをクリックするとこうなってしまう原因が突き止められていません。
views/orders/index.html.erb
<div class='transaction-contents'>
<div class='transaction-main'>
<h1 class='transaction-title-text'>
購入内容の確認
</h1>
<%= form_with model:@order, url: movie_orders_path, id: 'charge-form', class: 'transaction-form-wrap',local: true do |f| %>
<%= render 'shared/error_messages', model: f.object %>
<div class='credit-card-form'>
<h1 class='info-input-haedline'>
クレジットカード情報入力
</h1>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">カード情報</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :number, class:"input-default", id:"card-number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
<div class='available-card'>
<%= image_tag 'card-visa.gif', class: 'card-logo'%>
<%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
<%= image_tag 'card-jcb.gif', class: 'card-logo'%>
<%= image_tag 'card-amex.gif', class: 'card-logo'%>
</div>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">有効期限</label>
<span class="indispensable">必須</span>
</div>
<div class='input-expiration-date-wrap'>
<%= f.text_area :exp_month, class:"input-expiration-date", id:"card-exp-month", placeholder:"例)3" %>
<p>月</p>
<%= f.text_area :exp_year, class:"input-expiration-date", id:"card-exp-year", placeholder:"例)23" %>
<p>年</p>
</div>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">セキュリティコード</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :cvc,class:"input-default", id:"card-cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4" %>
</div>
</div>
<div class='shipping-address-form'>
<h1 class='info-input-haedline'>
配送先入力
</h1>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">郵便番号</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :postal_code, class:"input-default", id:"postal-code", placeholder:"例）123-4567", maxlength:"8" %>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">都道府県</label>
<span class="indispensable">必須</span>
</div>
<%= f.collection_select(:prefecture_id, Prefecture.all, :id, :name, {}, {class:"select-box", id:"item-prefecture"}) %>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">市区町村</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :municipalities, class:"input-default", id:"city", placeholder:"例）横浜市緑区"%>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">番地</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :address, class:"input-default", id:"addresses", placeholder:"例）青山1-1-1"%>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">建物名</label>
<span class="form-any">任意</span>
</div>
<%= f.text_field :building_name, class:"input-default", id:"building", placeholder:"例）柳ビル103"%>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">電話番号</label>
<span class="indispensable">必須</span>
</div>
<%= f.text_field :phone_number, class:"input-default", id:"phone-number", placeholder:"例）09012345678",maxlength:"11"%>
</div>
</div>
<div class='buy-btn'>
<%= f.submit "購入" ,class:"buy-red-btn"%>
</div>
<% end %>
</div>
</div>
javascript/card.js
const pay = () => {
Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
const form = document.getElementById("charge-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formResult = document.getElementById("charge-form");
const formData = new FormData(formResult);
const card = {
number: formData.get("buyer_order[number]"),
cvc: formData.get("buyer_order[cvc]"),
exp_month: formData.get("buyer_order[exp_month]"),
exp_year: `20${formData.get("buyer_order[exp_year]")}`,
};
console.log(card)
Payjp.createToken(card, (status, response) => {
if (status === 200) {
const token = response.id;
const renderDom = document.getElementById("charge-form");
const tokenObj = `<input value=${token} name='card_token' type="hidden">`;
renderDom.insertAdjacentHTML("beforeend", tokenObj);
document.getElementById("card-number").removeAttribute("name");
document.getElementById("card-exp-month").removeAttribute("name");
document.getElementById("card-exp-year").removeAttribute("name");
document.getElementById("card-cvc").removeAttribute("name");
document.getElementById("charge-form").submit();
}
});
});
};
window.addEventListener("load", pay);
models/buyer_order.rb
class BuyerOrder
include ActiveModel::Model
attr_accessor :user_id,:movie_id,:postal_code,:prefecture_id,:municipalities,:address,:building_name,:phone_number,:token
with_options presence: true do
validates :user_id
validates :movie_id
validates :postal_code,format:{with:/\A\d{3}[-]\d{4}\z/}
validates :prefecture_id, numericality: { other_than: 1}
validates :municipalities,format:{with:/\A[一-龥ぁ-ん]/}
validates :address
validates :phone_number,format:{with:/\A\d{11}\z/}
validates :token
end
def save
order = Order.create(user_id: user_id,movie_id: movie_id)
Address.create(postal_code: postal_code,prefecture_id: prefecture_id,municipalities: municipalities,address:address, building_name:building_name,phone_number: phone_number,order_id: order.id)
end
end
自分で試したこと
一度『id: 'charge-form'』を削除して購入ボタンをクリックしたら、『Token can't be blank』と表示されましたが、
購入ボタンとして一応機能していました。
ただ、idを削除してしまったので、そもそもJavaScriptでtokenが作成されません。
これでは購入できないので、どうしたら良いのか調べても解決しませんでした。
わかる方いらっしゃいましたらよろしくお願いいたします。
0