問題点

Payjpを導入し、ユーザー登録と同時にカード情報登録をしたい。
しかし、カード情報登録時に"card_id: customer.default_card"の値がnullで返って来てしまう

開発環境

ruby '2.5.1'
rails '5.2.4'
gem 'jquery-rails'
gem 'payjp'

詳細

JSの記入は出来ており、トークンの発行も出来ています。
また、下記コードにおいて、@card以下の"user_id: current_user.id","customer_id: customer.id"の情報は取得できています。
payjp側では顧客一覧のなかに登録はされているが、カード情報の欄が"カード未登録"となっています。

＊ウイザードを使って、ユーザー登録をしています。それと同時にカード情報の登録をしたいので、createが長くなっています。

ruby
1<--signup controller-->
2  def create
3    @user = User.new(
4      nickname: session[:nickname],
5      email: session[:email],
6      password: session[:password],
7      last_name: session[:last_name], 
8      first_name: session[:first_name], 
9      last_name_kana: session[:last_name_kana], 
10      first_name_kana: session[:first_name_kana], 
11      phone_number: session[:phone_number], 
12      birthday: session[:birthday] ,
13    )
14
15    @user.build_address(
16      zip_code: session[:zip_code],
17      prefecture_id: session[:prefecture_id],
18      city: session[:city],
19      block: session[:block], 
20      building: session[:building],
21    )
22
23    
24    if @user.save
25      session[:id] = @user.id
26      sign_in User.find(session[:id]) unless user_signed_in?
27    else
28      render '/signup/step1'
29    end
30    Payjp.api_key = ENV["PAYJP_PRIVATE_KEY"]
31    if params['payjp_token'].blank?
32      render '/signup/step4'
33    else
34      customer = Payjp::Customer.create(
35        description: 'test',
36        email: current_user.email,
37        card: params['payjp-token'],
38        metadata: {user_id: current_user.id}
39      )
40      @card = Card.new(
41        user_id: current_user.id, 
42        customer_id: customer.id,
43        card_id: customer.default_card
44      )
45      if @card.save
46        redirect_to done_signup_index_path
47      else
48        redirect_to action: "create"
49      end
50    end
51  end
52

js
1document.addEventListener(
2  "DOMContentLoaded", e =>{
3    if (document.getElementById("token_submit") != null) {
4      Payjp.setPublicKey("pk_test_xxxxxxxxxxxxxxxxxxxxxxxx");
5      let btn = document.getElementById("token_submit"); 
6      btn.addEventListener("click", e => { 
7        e.preventDefault();
8        let card = {
9          number: document.getElementById("card_number").value,
10          cvc: document.getElementById("cvc").value,
11          exp_month: document.getElementById("exp_month").value,
12          exp_year: document.getElementById("exp_year").value,
13        }; 
14        Payjp.createToken(card, (status, response) => {
15          if (status === 200){
16            $("#card_nummber").removeAttr("name");
17            $("#cvc").removeAttr("name");
18            $("#exp_month").removeAttr("name");
19            $("#exp_year").removeAttr("name");
20            var token = response.id;
21            $("#charge-form").append($('<input type="hidden" name="payjp_token" class="payjp-token" />').val(token));
22            $("#charge-form").get(0).submit();
23          }else{
24            alert("Error");
25          }
26        });
27      });
28    }
29  },
30  false
31);

haml
1<----- 登録画面 ----->
2.session_wrapper
3  .signup__header
4    %h1.signup__header__logo
5    = link_to image_tag("/fmarket_logo_red.svg", size: "185x49"), root_path
6    %nav#nav.progress-bar.signup__header__bar
7      %ol
8        %li
9          会員情報
10          .progress-status__first.active.let_active
11        %li
12          電話番号認証
13          .progress-status.active.let_active
14        %li
15          お届け先住所入力
16          .progress-status.active.let_active
17        %li.active
18          支払い方法
19          .progress-status.active
20        %li
21          完了
22          .progress-status__last
23  .session_wrapper
24    .single_container
25      .session__main
26        .session__main__container
27          %h2.session__main__container__title 支払い方法
28          = form_with url: signup_index_path, name: "form", id: 'charge-form', method: :post, html:{class: 'session__main__container__box'} do |f|
29            .session__main__container__formGroup
30              %label{for: "nickname"}
31                カード番号
32                %span.form__require 必須
33              = f.text_field "number", class: "input__default", placeholder: "半角数字のみ", type: "text", id: "card_number", maxlength: "16"
34              .session__main__container__formGroup__sub
35                %i.fab.fa-cc-visa
36                %i.fab.fa-cc-mastercard
37                %i.fab.fa-cc-jcb
38                %i.fab.fa-cc-discover
39                %i.fab.fa-cc-amex
40                / ↑画像使うと容量圧迫するのでアイコンで仮置き
41            .session__main__container__formGroup
42              %label{for: "nickname"}
43                有効期限
44                %span.form__require 必須
45              .session__main__container__formGroup__sub
46                %select.select__wap#exp_month{name: "exp_month", type: "text"}
47                  %option{value: ""} --
48                  %option{value: "01"} 01
49                  %option{value: "02"} 02
50                  %option{value: "03"} 03
51                  %option{value: "04"} 04
52                  %option{value: "05"} 05
53                  %option{value: "06"} 06
54                  %option{value: "07"} 07
55                  %option{value: "08"} 08
56                  %option{value: "09"} 09
57                  %option{value: "10"} 10
58                  %option{value: "11"} 11
59                  %option{value: "12"} 12
60                %i.fas.fa-chevron-down.select_arrow
61                %p 月
62                %select.select__wap#exp_year{name: "exp_year", type: "text"}
63                  %option{value: ""} --
64                  %option{value: "2019"} 19
65                  %option{value: "2020"} 20
66                  %option{value: "2021"} 21
67                  %option{value: "2022"} 22
68                  %option{value: "2023"} 23
69                  %option{value: "2024"} 24
70                  %option{value: "2025"} 25
71                %i.fas.fa-chevron-down.select_arrow
72                %p 年
73              .session__main__container__formGroup
74                %label{for: "nickname"}
75                  セキュリティーコード
76                  %span.form__require 必須
77                = f.text_field "cvc", class: "input__default cvc", placeholder: "カード背面4桁もしくは3桁の番号", type: "text"
78                .session__main__container__formGroup__link
79                  = link_to root_path do
80                    %i.fas.fa-question-circle
81                    %p セキュリティーコードとは
82                .session__main__container__formGroup#card_token
83                  = f.submit "次へ進む", class: "btn_default btn_mail", id: "token_submit"

ruby
1<---- migrationfile ---->
2class CreateCards < ActiveRecord::Migration[5.2]
3  def change
4    create_table :cards do |t|
5      t.references :user, null: false, foreign_key:true
6      t.string :customer_id, null: false
7      t.string :card_id, null: true
8      t.timestamps
9    end
10  end
11end

ruby
1<---- model ---->
2class User < ApplicationRecord
3  devise :database_authenticatable, :registerable,
4         :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:google, :facebook]
5
6   --- userのバリデーション省略 ---
7has_one :card, dependent: :destroy
8
9-------------------------------------------
10
11class Card < ApplicationRecord
12  belongs_to :user
13end
14

console.log(card)

Objectcvc: 
"123"exp_month: 
"12"exp_year: 
"2020"number: 
"4242424242424242"__proto__: 
Object

console.log(response)

Object
card:
address_city: null
address_line1: null
address_line2: null
address_state: null
address_zip: null
address_zip_check: "unchecked"
brand: "Visa"
country: null
created: 1576383087
customer: null
cvc_check: "passed"
exp_month: 12
exp_year: 2020
fingerprint: "e1d8225886e3a7211127df751c86787f"
id: "car_214e1ffe515c6a313fe0db10bb70"
last4: "4242"
livemode: false
metadata: {}
name: null
object: "card"
__proto__: Object
created: 1576383087
id: "tok_d4ef9c9f0c2ef2991812f9860c60"
livemode: false
object: "token"
used: false
__proto__: Object

試したこと

色々なサイトを見て見ましたが、登録時のcontrollerの記述はほとんど変わらずでした。
t.string :card_id, null: trueは初めはnull: falseでしたが、弾かれるので変更しました。
商品購入時に登録してしまえ、と思いましたが、うまくいかず、根本的な解決が必要だと考えました。
ご教示いただけたらと存じます。