テックキャンプ94日目〜商品購入機能②

kobasaです(´ω｀*)
今日は五山の送り火でした。今年もテレビ中継を見ていました。
コロナの影響もあり、昨年に引き続き点火する炎はかなり少ない状態でした。
来年はワクチンの普及でコロナの影響が減って、通常通りの送り火を見れるといいなぁ。

今日はライフコーチとの面談があったのですが、お城や神社の景色の話で盛り上がっていました(´ω｀*)
勉強の話あまりしてないwオリアプに入ったらまた相談に乗ってもらいます。

94日目のまとめ

今日はPAYJPによるクレジット決済機能を実装していました。
とりあえずクライアントサイドでPAYJPからトークンを貰う処理と、
フォーム情報にトークンを含めてサーバーサイドに送るところまで。

カード情報の記述

トークンを貰うためのカード情報は変数を定義し、項目ごとのname属性の値を格納する。
name属性の値はHTMLに変換された部分になるので、ブラウザの検証ツールなどで確認する。
カードの有効期限の年は「20△△」年の記述で送るため式展開を使用している。

const card = {
  number: formData.get("order_address[number]"),
  //略
  exp_year: `20${formData.get("order_address[exp_year]")}`,
};

トークン情報をフォーム内に挿入

受け取ったトークン情報をフォームに挿入するのだが、type=”hidden”を付与してブラウザ上で見えないようにする。

const tokenObj = `<input value=${token} name='token' type="hidden">`;

考えていること

今回のアプリでは値段が提示された商品を買うので購入金額をフォームに入力しない。
最終的にフォームから受け取った情報でなくてもPAYJPに送ることができるのだろうか。

金額を表示している部分はid属性の表記がないんですよね。getElementById使えず。
一旦購入金額をフォームのパラメーターに含めず実装していこうと思います。