クレジットカード決済用JavaScript準備③ 特定された入力フォームの中身を取得

const pay = () => {
  Payjp.setPublicKey("pk_test_******************"); // PAY.JPテスト公開鍵
  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("order[number]"),
      cvc: formData.get("order[cvc]"),
      exp_month: formData.get("order[exp_month]"),
      exp_year: `20${formData.get("order[exp_year]")}`,
    };
  });
};

window.addEventListener("load", pay);

formData

FormData のコンストラクタに、form 要素の DOM オブジェクトを渡すと自動的にフォームの内容を取り込みます。

const f1 = document.getElementById('f1');
const fd = new FormData(f1);

JavaScript 入門(TechAcademy)
https://javascript.keicode.com/newjs/how-to-use-formdata.php

formData.get("order[number]")

formDataで取得したデータの中でget()で引数にキー名を渡すと、値を返します[umberをgetする]
order[number]はネーム属性値になります。

式の挿入

通常の文字列に式を埋め込むには、以下のような構文を使用していると思います。

`文字列${        }文字列`

${ }の中に変数や式を入れルト展開してくれます。

20${formData.get("order[exp_year]")},
はname属性order[exp_year]に入った値を取得してくれるので
例えば２１が入っていれば２０と２１なので
###２０２１というようなことになります