決済機能のクライアントサイド実装（クレジットカード情報のトークン化）
クレジットカード情報のトークン化手順1～2まで
1. クライアントサイドでPAY.JPのAPIを使用するために必要なJavaScriptを読み込む
2. 実際にトークン化を行うJavaScriptファイルを作成する
3. PAY.JPのテスト公開鍵を取得し設定する
4. フォームにクレジットカード情報の入力欄を追加する
5. トークン化の処理を行う
payjp.jsを読み込み
app/views/layouts/application.html.erbのhead要素内に以下を記述
<script type="text/javascript" src="https://js.pay.jp/v2/pay.js"></script>
トークン化を行うファイルを作成
app/javascript/card.jsというファイルを作成
config/importmap.rbとapp/javascript/application.jsでcard.jsを読み込む設定をする
正しく読み込まれるか確認
app/javascript/card.js
const pay = () => {
console.log("カード情報トークン化のためのJavaScript");
};
window.addEventListener("turbo:load", pay);
ページが読み込まれた時に、payという変数に代入したアロー関数が実行される
ブラウザのコンソール上に表示されるか確かめる
フォーム送信時にイベントが発火させる
app/javascript/card.js
const pay = () => {
const form = document.getElementById('charge-form')
form.addEventListener("submit", (e) => {
console.log("フォーム送信時にイベント発火")
e.preventDefault();
});
};
window.addEventListener("turbo:load", pay);
フォームに設定している”charge-form”というidを指定して要素を取得し、変数formに代入
formに対して、その送信ボタンがclickされたとき（サブミットされた時）にイベントが発火するか確認
