某スクールのチーム開発にてpay.jpを活用したクレジットカード登録と商品購入機能実装を担当させていただくことになりました！
色々と苦戦しましたがなんとか実装できましたので、以下にまとめてみたいと思います。
今回はクレジットカード登録機能実装までまとめており、商品購入機能に関しては、以下記事をご参照いただけますと幸いです！
https://qiita.com/Tatsu88/items/eb420e372077939a4627

本記事該当Github：　https://github.com/Tatsu88-Tokyo/freemarket_sample_60ce

そもそもPay.jpとは

シンプルなAPI・多彩な機能、分かりやすい料金形態でクレジットカード決済をかんたんに導入できる決済サービスです。手数料も比較的リーズナブル（２．５９％〜）であることと、導入が簡単ということもあり、スタートアップ企業などに多く採用されているようです。
イメージとしては以下のようになっており、一時的なトークンを作成し、取引をすることで、加盟店はクレジットカード情報などの重要な情報を扱う必要がないまま、取引ができます。

クレジットカード登録について

クレジットカード登録に関しては、カードの登録のフォーマットによってやり方が異なります。
- チェックアウト:pay.jp社にて用意されているフォーマットを利用する方法。
- カスタムフォーム：ご自身でフォーマットを作成し、そちらに準じてカード登録を行う方法。

今回は既に入力フォームを作成していたので、カスタムフォームにて実装を行うことにしました！

全体の流れ

0.下準備（gemインストール＋application.html.hamlに追記）
1.クレジットカード番号などの情報登録：view
2.”トークン”作成：Javascript
3.”トークン”をキーとしてPayjpに顧客情報として登録:controller
4.登録情報の確認:view+controller

今回の記事では、まず、Viewの実装内容を確認いただき、JSを用いたトークンの作成をご確認いただきます。
そして、最後にコントローラでそのトークンをキーとしてPayjpに顧客登録をする動きを確認いただければと思います。

0. 下準備（gemインストール＋application contorollerに追記）

下準備として、pay.jpのgemをインストールします。

Gemfile

gem 'payjp'

記載後、"bundle install"を忘れずに実行しましょう！

また、viewにあるapplication.html.hamlに以下の記述を行いましょう。

application.html.haml

%script{src: "https://js.pay.jp/", type: "text/javascript"} 
%script{type:"text/javascript"}Payjp.setPublicKey('公開鍵');

1.クレジットカード番号などの情報登録：view

今回は以下のようなviewで登録画面を作ってます。

view

.single-container
  %header.single-header
    %h1.single-header__logo
      = link_to root_path do
        =image_tag("fmarket_logo_red.svg")
    %nav.single-header__progress
      %ol
        %li.single-header__progress__text{ id: "first" }
          会員情報
          .single-header__progress__round--red
        %li.single-header__progress__text
          お届け先住所入力
          .single-header__progress__round--red
        %li.single-header__progress__text--active
          支払い方法
          .single-header__progress__round--red
            .single-header__progress__round--red-long{ id: "long" }
        %li.single-header__progress__text{ id: "end" }
          完了
          .single-header__progress__round
  %main.single-main
    %section.single-main__container
      %h2.single-main__container__title
        支払い方法

.single-main__container__form
  .single-main__container__form__frame
    = form_for(@creditcard, url: creditcards_path,method: :post,html: {id: "form" }) do |f|
      = render "devise/shared/error_messages", resource: @creditcard
      .form-group
        = f.label :カード番号
        %span.form-group__require 必須
        = f.text_field :card_number, {placeholder: "半角数字のみ", class: "form-group__input",maxlength:"16"}
      .form-group
        = f.label :カード会社
        %span.form-group__require 必須
        = f.select :card_company, Creditcard.card_companies.keys, {}, {class: 'form-group__input'}
        %ul.signup__card--list
          %li.icon--visa
            = image_tag("visa.svg", id:"icon--visa")
          %li.icon--master
            = image_tag("master-card.svg", id:"icon--master")
          %li.icon--saison
            = image_tag("saison-card.svg", id:"icon--saison")
          %li.icon--jcb
            = image_tag("jcb.svg", id:"icon--jcb")
          %li.icon--americanexpress
            = image_tag("american_express.svg", id:"icon--americanexpress")
          %li.icon--diners
            = image_tag("dinersclub.svg", id:"icon--diners")
          %li.icon--discover
            = image_tag("discover.svg", id:"icon--discover")
      .form-group
        = f.label :有効期限
        %span.form-group__require 必須
        %br
        = f.select :card_month, options_for_select(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]), {}, {class: "form-group__input--half"}
        = f.label :月, class: "form-group__card--year-and-month"
        -# = f.select :card_year, options_for_select(["20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]), {}, {class: "form-group__input--half"}
        = f.select :card_year, options_for_select((2020..2030)), {}, {class: "form-group__input--half"}
        = f.label :年, class: "form-group__card--year-and-month"
      .form-group
        = f.label :セキュリティコード, class: "label"
        %span.form-group__require 必須
        = f.text_field :card_pass, placeholder: "カード背面4桁もしくは3桁の番", class: "form-group__input"

      .form-group__add
        .form-group__add--question ?
        %p.form-group__text--right--blue
          カード裏面の番号とは？
      .form-group
        = f.submit "登録する", class: "btn-default btn-red", url: "creditcards_path",id:"charge-form",method: :post
  = render "/registration/registration_footer"

  f.submit "Sign up"

2.”トークン”作成：Javascript

今回はPay.jpの機能を利用するために、入力された値で一時的な”トークン”を作成し、その”トークン”をキーとしてクレジットカード情報などを登録します。
そのためにはクレジットカード情報を入力してもらった後に、その情報を元に”トークン”を作成するためには、Javascriptを活用して実装します。

今回はJqueryにて実装を行いました。
ポイントは以下の通りです。
- Payjpの公開鍵の記述を忘れずに。
- e.preventDefault()の記述を忘れずに。submitする前にトークンを作成します。
- jsにHTML情報を追加するときはバッククオーテーション``
- 入力エラーのときはprop('disabled', false)でボタンのdisabledを解除。2回以上押せるようにします。
- $("#form").get(0).submit();最後の送信はformの情報をとばす
*上記ミスで、当方はエラー地獄にはまりました。。笑

jquery

$(function() {
  Payjp.setPublicKey('公開鍵');
  $("#charge-form").on('click', function(e){
    e.preventDefault();
    let card = {
        number: $('#creditcard_card_number').val(),
        cvc:$('#creditcard_card_pass').val(),
        exp_month: $('#creditcard_card_month').val(),
        exp_year: $('#creditcard_card_year').val()
    };

    Payjp.createToken(card, function(status, response) {
      if (response.error) {
        $("#charge-form").prop('disabled', false);
        alert("カード情報が正しくありません。");
      }
      else {
        $(".number").removeAttr("name");
        $(".cvc").removeAttr("name");
        $(".exp_month").removeAttr("name");
        $(".exp_year").removeAttr("name");
        let token = response.id;
        $("#card_token").append(`<input type="hidden" name="payjpToken" value=${token}>`);
        $("#form").get(0).submit();
        alert("登録が完了しました");
      }
    });
  });
});

3.”トークン”をキーとしてPayjpに顧客情報として登録:controller

最後に”トークン”をキーとしてPayjpに顧客情報として登録するために、コントローラに記述が必要となります。
*今回はセッションを用いたユーザー情報を登録しおりますため、ごちゃごちゃしてますが、クレジットカードの登録だけであれば、クレジットカードのコントローラを作成し、対応いただけますと幸いです。
＊セッションを用いた登録の詳細記述は以下URLよりご確認いただけますと幸いです。
https://qiita.com/Tatsu88/items/7447a669b788b011e96b

今回のクレジットカードに関する記述は、「def　create_creditcard」に記載ございます。
”#顧客情報をPAY.JPに登録。”という記述で、"トークン”をPay.jpに飛ばしてます。

controller

class Users::RegistrationsController < Devise::RegistrationsController
  def new
    super
  end

  # POST /resource
  def create
    if params[:sns_auth] == 'true'
      pass = Devise.friendly_token
      params[:user][:password] = pass
      params[:user][:password_confirmation] = pass
    end
    params[:user][:birthday] = params[:birthday]
    @user = User.new(sign_up_params)
    unless @user.valid?
      flash.now[:alert] = @user.errors.full_messages
      render :new and return
    end
    session["devise.regist_data"] = {user: @user.attributes}
    session["devise.regist_data"][:user]["password"] = params[:user][:password]
    @address = @user.build_address
    render :new_address
  end

  def create_address
    @user = User.new(session["devise.regist_data"]["user"])
    @address = Address.new(address_params)
    unless @address.valid?
      flash.now[:alert] = @address.errors.full_messages
      render :new_address and return
    end
    @user.build_address(@address.attributes)
    session["address"] = @address.attributes
    @creditcard = @user.build_creditcard
    render :new_credit_card
  end

  def create_creditcard
    @user = User.new(session["devise.regist_data"]["user"])
    @address = Address.new(session["address"])
    Payjp.api_key = '秘密鍵'
    if params['payjpToken'].blank?
      redirect_to action: "new"
    else
      # 顧客情報をPAY.JPに登録。
      customer = Payjp::Customer.create(
        description: 'test', 
        email: @user.email,
        card: params['payjpToken'], 
      )
    end
    @creditcard = Creditcard.new(creditcard_params)
    @creditcard[:customer_id]=customer.id
    @creditcard[:card_id]=customer.default_card
    unless @creditcard.valid?
      flash.now[:alert] = @creditcard.errors.full_messages
      render :new_credit_card and return
    end
    binding.pry
    @user.build_address(@address.attributes)
    @user.build_creditcard(@creditcard.attributes)
    if @user.save
      sign_in(:user, @user)
    else
      render :new
    end
  end

  protected
  def address_params
    params.require(:address).permit(:address,:postal_code, :prefecture,:city,:apartment)
  end

  def creditcard_params
    params.require(:creditcard).permit(:card_number,:card_year, :card_month, :card_pass,:card_company)
  end

4.登録情報の確認:view+controller

最後にPay.jpに登録した情報を取得できるようにしましょう。
まずは、情報をpay.jpから取得するための記述をコントローラに行います。

view

=render "home/header_login"
.mypage_a  
  %main.mypage-contents.clearfix
    .main-content
      .payment
        .payment-content
          .payment-content__title
            %h1.payment-header 支払い方法
          .payment-content__main
            .payment-content__creditcards
              %h2.payment-title クレジットカード一覧
            .payment-content__creditcards__list
              %figure
                = image_tag "#{@card_src}",alt: @card_brand, id: "card_image"
              .payment-content__creditcards__list__number
                = "**** **** **** " + @creditcard_information.last4
              .payment-content__creditcards__list__number
                - exp_month = @creditcard_information.exp_month.to_s
                - exp_year = @creditcard_information.exp_year.to_s.slice(2,3)
                = exp_month + " / " + exp_year
    .side-content
      %nav.mypage-nav
        %ul.mypage-nav-list
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              マイページ
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              お知らせ
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              やることリスト
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              いいね！一覧
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              出品する
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              出品した商品 - 出品中
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              出品した商品 - 取引中
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              出品した商品 - 売却済み
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              購入した商品 - 取引中
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              購入した商品 - 過去の取引
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              ニュース一覧
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              評価一覧
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              ガイド
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-item" do
              お問い合わせ
              %i.icon-arrow-right
        %h3.mypage-nav-head-merpay メルペイ
        %ul.mypage-nav-list-merpay
          %li
            =link_to "#", class: "mypage-nav-list-merpay-item" do
              売上・振込申請
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-merpay-item" do
              ポイント
              %i.icon-arrow-right
        %h3.mypage-nav-head-setting 設定
        %ul.mypage-nav-list-setting
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              プロフィール
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              発送元・お届け先住所変更
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              支払い方法
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              メール/パスワード
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              本人情報
              %i.icon-arrow-right
          %li
            =link_to "#", class: "mypage-nav-list-setting-item" do
              電話番号の確認
              %i.icon-arrow-right
          %li
            =link_to destroy_user_session_path, method: :delete, class: "mypage-nav-list-setting-item" do
              ログアウト
              %i.icon-arrow-right
=render "home/footer"

controller

class CardsController < ApplicationController
  require "payjp"
  before_action :set_creditcard

  def show
    Payjp.api_key = "秘密鍵"
    customer = Payjp::Customer.retrieve(@creditcard.customer_id)
    @creditcard_information = customer.cards.retrieve(@creditcard.card_id)
    @card_brand = @creditcard_information.brand 
    case @card_brand
    when "Visa"
      @card_src = "visa.svg"
    when "JCB"
      @card_src = "jcb.svg"
    when "MasterCard"
      @card_src = "master-card.svg"
    when "American Express"
      @card_src = "american_express.svg"
    when "Diners Club"
      @card_src = "dinersclub.svg"
    when "Discover"
      @card_src = "discover.svg"
    end
  end

完成イメージは以下のようになっております。
此の情報はpay.jpでも同じ情報が登録できてます。

注意点（テストする時のクレジットカード番号について）

テストを行う時のクレジットカードの番号が定められており、この番号以外で適当な番号を入れるとエラーとなります。
下記URLに詳細載ってますので、ご確認の上、対応ください。
https://pay.jp/docs/testcard

メモ

-function(e) {} のeって何?
function(e)の「e」。これはイベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができるイベントオブジェクトです。
JavaScriptの関数は引数を指定しなくてもOKなのでイベントオブジェクトを省略してもエラーとはなりません。

-get(index)
DOMエレメントの集合からインデックスを指定して、ひとつのエレメントを参照する。
これによって、特にjQueryオブジェクトである必要のないケースで特定のDOM Elementそのものを操作することが可能。例えば$(this).get(0)は、配列オペレータである$(this)[0]と同等の意味になる。