APIを使った購入機能（JS）

#重大な報告
本日をもちまして、最終課題が終了しました　パチパチ
１５日もかかってしまいましたが、最終課題のおかげでrailsの知識が身についたように思います

ちょっとみんなも難しいなと思っていたであろうAPIを用いた購入機能ついて
載せておこうと思います

まずは、
#APIをgemfile導入

  
  gem 'pay.jp

記入後、bundle installを忘れずに。

#payjp.jsを読み込むための記述
これでpay.jsを呼び出すことができます

application.html.erb

<script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>

#JavaScriptを呼び出す記述
実装内容によるみたいですが、今回はturbolinksをコメントアウトします
これをコメントアウトしないと、購入がうまくいきません

app/javascript/packs/application.js

require("@rails/ujs").start()
// require("turbolinks").start()  //コメントアウトする
require("@rails/activestorage").start()
require("channels")
require("../card")    //追加

#トークンの生成処理をするためのJavascriptを記入

app/javascript/card.js

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); // （1）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("number"),      //(2)この引数はnameの値です
      cvc: formData.get("cvc"),
      exp_month: formData.get("exp_month"),
      exp_year: `20${formData.get("exp_year")}`,
    };
    console.log(card)
    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("card-number").removeAttribute("name"); //（3）
      document.getElementById("card-cvc").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");
 
      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    });
  });
 };
 
 window.addEventListener("load", pay);

わかりにく買ったところを（）でまとめました

（１）　こちらは環境変数で設定してください。
　　　　　詳しくはお調べください

（２）nameの値は記述されてないのであれば検証ツールで
　　　自動生成されている値をみて確認できます
　　　場合によっては自ら命名する場合もあります。

（３）こちらのIDも検証ツールで確認できました　
　　　　removeではnameの値を入力された各カード情報が
　　　　パラメーターとして送られないように、値を削除しています。

#コントローラーでストロングパラメータを設定
上の方は省略しております。createアクションで定義したメゾッド内で私の場合であればdelivery_paramsを引数にしてます。
そしてプライベート内でストロングパラメータを設定。

app/controllers/orders_controller.rb

#省略

 private
   def delivery_params
     params.permit(:token,:prefecture_id,:postal_code,:city,:address1,:telephone).merge(user_id: current_user.id,item_id:params[:item_id])
   end


  def pay_item
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]　"秘密鍵
    Payjp::Charge.create(
      amount: @item.price,  　　＃価格
      card: delivery_params[:token],　　＃ストロングパラメーター内のtokenを指定
      currency:'jpy'
    )
  end
 end

まだ伝えなければいけないことはあるのですが、とりあえず大事な点だけまとめました
あとは自身のアプリと相談してお考えください。

ちなみに　これを使ってくださいね

カード番号 4242424242424242（16桁）
CVC 123
有効期限 登録時より未来