Payjpを使用したクレカ情報入力ができない
解決したいこと
クレカ入力画面を作っています。
クレカ情報入力欄が入力フォームとして認識されず、入力ができない状態です。
発生している問題・エラー
エラーメッセージらしきものは、検証で出てくる二つです
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
A <label> isn't associated with a form field.
To fix this issue, nest the <input> in the <label> or provide a for attribute on the <label> that matches a form field id.
こちらの画像のオレンジの欄にカーソルを合わせても矢印状態のままで入力できません。
該当するソースコード
<%# カード情報の入力 %>
<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 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 id="number-form" class="input-default"></div>
</div>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">有効期限</label>
<span class="indispensable">必須</span>
<div id="expiry-form" class="input-default"></div>
</div>
</div>
<div class="form-group">
<div class='form-text-wrap'>
<label class="form-text">セキュリティコード</label>
<span class="indispensable">必須</span>
<div id="cvc-form" class="input-default"></div>
</div>
</div>
</div>
<%# /カード情報の入力 %>
const pay = () => {
const payjp = Payjp("pk_test_************************");
const elements = payjp.elements();
const numberElement = elements.create('cardNumber');
const expiryElement = elements.create('cardExpiry');
const cvcElement = elements.create('cardCvc');
numberElement.mount('#number-form');
expiryElement.mount('#expiry-form');
cvcElement.mount('#cvc-form');
const submit = document.getElementById("button");
submit.addEventListener("click", (e) => {
e.preventDefault();
payjp.createToken(numberElement).then(function (response) {
if (response.error) {
} else {
const token = response.id;
const renderDom = document.getElementById("charge-form");
const tokenObj = `<input value=${token} name='token' type="hidden">`;
renderDom.insertAdjacentHTML("beforeend", tokenObj);
debugger;
}
numberElement.clear();
expiryElement.clear();
cvcElement.clear();
document.getElementById("charge-form").submit();
});
});
};
window.addEventListener("load", pay);
****には公開鍵が入っています
自分で試したこと
Javascriptを無効にする記述をapplication.jsからコメントアウトした。
payjpのサイトにあるv2トークン化の記述(下記URLより)を入れてみたが、カードナンバー・有効期限・セキュリティーコードが一体となっているときのみ入力ができた。
3つを分割したものも掲載されていたが、入力できない状態だった。
うまく質問できていないかもしれませんので、不明な情報等ございましたらお知らせください。
0
