@0W5E8fPq1EOm4yE (Nishio)posted at 2020-12-20

クレジットカード情報暗号化の仕方

Q&A

解決したいこと

現在クレジットカード情報を入力しカード情報の中身を暗号化するため　　　　
document.getElementById("number").removeAttribute("name");
document.getElementById("cvc").removeAttribute("name");
document.getElementById("exp_month").removeAttribute("name");
document.getElementById("exp_year").removeAttribute("name");
を加えたら購入ボタンを押しても反応しなくなりました。
何が原因で起ってしまったのでしょうか？どうしたら改善できますでしょうか？

発生している問題・エラー

removeAttributeメソッド追加前
https://gyazo.com/86225f4de60fcbe23a8871eef8c169cc

removeAttributeメソッド追加後
https://gyazo.com/fa9c219d85208d130914f6f6fc13aab0

または、問題・エラーが起きている画像をここにドラッグアンドドロップ。

該当するソースコード

card.js

const pay = ()=> {
  Payjp.setPublicKey("pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx");
  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("number"),
      cvc: formData.get("cvc"),
      exp_month: formData.get("exp_month"),
      exp_year: `20${formData.get("exp_year")}`,
    };

    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} type="hidden" name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
      document.getElementById("number").removeAttribute("name");
      document.getElementById("cvc").removeAttribute("name");
      document.getElementById("exp_month").removeAttribute("name");
      document.getElementById("exp_year").removeAttribute("name");

      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    })
  })
}

window.addEventListener("load", pay);

class PurchasesController < ApplicationController

  def index
    @purchase_address = Purchase_address.all
  end

  def create
    binding.pry
    @purchase_address = PurchaseAddress.new(purchase_params)
    if @purchase_address.save
      redirect_to root_path
    else
      render :new
    end
  end

  private

  def purchase_params
    params.permit(:user_id, :item_id)
  end

  def pay_item
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    Payjp::Charge.create(
      amount: @item.price,
      card: order_params[:token],
      currency:'jpy'
    )
  end

end

自分で試したこと

コントローラーにストロングパラメーターを設定した。
カリキュラムを読み再度行った。

Are you sure you want to delete the question?