クレジットカード決済の導入

はじめに

プログラミング初心者です。現在フリマアプリ作成、終盤の商品購入機能実装中。
初心者ですので、お手柔らかに。

PayJPの導入

実装に入る前に

railsには標準でturboというアプリを高速化する機能が備わっており、JavaScriptの実装に不具合をきたすため、機能をオフにします。

payjp.js

PAY.JPを使用するためのJavaScriptのライブラリのこと。
読み込めるようにするために、こちらを記述
app/views/layouts/application.html.erb

<script type="text/javascript" src="https://js.pay.jp/v2/pay.js"></script>

JavaScriptの実装

card.jsファイルを作り、読み込める操作をしていきます。
PAY.JPの公開鍵をファイル内に記述します。

トークン化の処理

typeの説明

card：カード番号入力欄、有効期限入力欄、CVC入力欄の順に横に並んだフォーム
cardNumber：カード番号入力欄
cardExpiry：有効期限入力欄
cardCvc：CVC入力欄

element.create()

このメソッドを使用し、フォームを生成します。

mountメソッド

id属性を指定し、elementが情報を持ったフォームと置き換えます。

以上を踏まえて、

const elements = payjp.elements();
const numberElement = elements.create('cardNumber');

numberElement.mount('#number-form');

こんな感じです。

createTokenメソッド

戻り値としてトークンを取得できます。

const pay = () => {
  const payjp = Payjp('pk_test_***********************')// PAY.JPテスト公開鍵
  const elements = payjp.elements();
  const numberElement = elements.create('cardNumber');
  const expiryElement = elements.create('cardExpiry');
  const cvcElement = elements.create('cardCvc');

  numberElement.mount('#number-form');
  expiryElement.mount('#expiry-form');
  cvcElement.mount('#cvc-form');

  const form = document.getElementById('charge-form')
  form.addEventListener("submit", (e) => {
    payjp.createToken(numberElement).then(function (response) {
      if (response.error) {
      } else {
        const token = response.id;
        console.log(token)
      }
    });
    e.preventDefault();
  });
};

window.addEventListener("turbo:load", pay);

これで実際にフォームを入力するとコンソール上にトークンが生成されます。

本日のエラー

一つ目は、mountメソッドを記述してトークンの生成確認をしたが、コンソール上にトークンが表示されないものでした。
原因はフォームをビューで作ってしまっていたことでした。（f.text_field~~のように）
JavaScriptでフォームを用意する記述をしているのでこれは

に置き換えてOKでした。