決済機能のクライアントサイド実装（サーバーサイドへのトークン送付）
サーバーサイドへのトークン送付
1. トークンの情報をフォームに追加する
2. クレジットカードの情報をフォームから取り除く
3. サーバーサイドにフォームの情報を送る
トークンの情報をフォームに追加
app/javascript/card.js
中略
form.addEventListener("submit", (e) => {
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'>`;
renderDom.insertAdjacentHTML("beforeend", tokenObj);
debugger;
}
});
e.preventDefault();
});
中略
HTMLのinput要素にトークンの値を埋め込み、フォームに追加
valueは実際に送られる値、nameはその値を示すプロパティ名
insertAdjacentHTMLメソッドで、フォームの中に作成したinput要素を追加
debuggerで処理が停止するようにして、どのようにトークンの値が追加されるのか確かめる
購入ボタンを押すと、ブラウザ上にトークンの値が現れ、フォームの中に追加されていることがわかる
確認できたら、このトークンの値をブラウザ上で非表示にする
トークンの値はユーザーに見せる必要のない情報なので、type属性の値にhiddenを指定
トークンの値を非表示
app/javascript/card.js
中略
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;は削除
ブラウザをリロードし、もう一度購入ボタンを押す
ブラウザには表示されないもののフォームには追加されていることを確認
クレジットカードの情報を取り除く
クレジットカードの情報は、すでにトークン生成が完了しているため以降は不要
この段階でフォームにあるクレジットカード情報は削除
app/javascript/card.js
中略
form.addEventListener("submit", (e) => {
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);
}
numberElement.clear();
expiryElement.clear();
cvcElement.clear();
});
e.preventDefault();
});
中略
フォームの情報をサーバーサイドに送信
app/javascript/card.js
中略
form.addEventListener("submit", (e) => {
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);
}
numberElement.clear();
expiryElement.clear();
cvcElement.clear();
document.getElementById("charge-form").submit(); ＃追加
});
e.preventDefault();
});
中略
e.preventDefault();で通常のRuby on Railsにおけるフォーム送信処理はキャンセルしている
代わり、追加のコードによってJavaScriptでフォームの送信処理を行う必要がある
