payjpを使ってクレジットカード機能を導入しちゃおうってわけ(ビュー、補足編)

10516 ワード
pay.jp Rails Rails5 scss haml Rails テキストリンク

いやー今日は風が強いですね。
涼しいのに、室内はベタベタジメジメ。

夏だ！サマーだ！夏サマーだ！！

最近AKB48の横山由依ちゃんにときめいてますが、こんばんは。

今日は前回のpayjpを使ったクレジットカード登録の補足編でございますわよ。

見てない方は下をチェッキ！！
クレジットカード登録編

1　最初に何の補足しましょうかね。

見切り発車にも程があるわ。。。。
いや今回は勢いでいくわよ！！！

2 とりあえずビューファイル(haml)を見せちゃおうってわけ

まずはクレジットカードを登録する時のビューよね。
メ○カリとかメルカ◯とかメル◯リとかはこんな感じ。

それを踏まえてビューファイルはこんな感じ。
(クレジットカード会社の写真は頑張って集めましょう。)

card/new.haml.html
　.my--page__contents__box--allert
    %section.card__information
      .card__information--header
        %h1 クレジットカード情報入力
      .card__information--form
        = form_with url: cards_path, method: :post, html: { name: "inputForm" } do |f| 
          %section.top
            %label カード番号
            %span 必須
          = f.text_field :card__number, type: 'text',class: 'card__number',id: 'card_number', placeholder: '半角数字のみ', maxlength: '19' 
          %ul.card__logo
            %li 
              = image_tag 'if-visa-2593666_86609.svg', width:'49', height: '20' ,alt: 'visaロゴ'
            %li 
              = image_tag 'mastercard.png', width: '34' ,height:'20', alt: 'mastercardロゴ'
            %li 
              = image_tag 'saisoncard.png', width: '30' ,height:'20', alt: 'saioncardロゴ'
            %li
              = image_tag 'jcbcard.png', width: '32' ,height:'20', alt: 'jcbcardロゴ'
            %li
              = image_tag 'americancard.png', width: '21', height:'20', alt: 'americancardロゴ'
            %li
              = image_tag 'diners_club.png', width: '32' ,height:'20', alt: 'dinersclucロゴ'
            %li
              = image_tag 'discover.png', width: '32' ,height:'20', alt: 'discoverロゴ'
          %section.middle
            %label 有効期限
            %span 必須
          .add__card
            = f.select :exp_month,[["01",1],["02",2],["03",3],["04",4],["05",5],["06",6],["07",7],["08",8],["09",9],["10",10],["11",11],["12",12]],{} ,id: 'exp_month', class:'card__number'
            //アングルダウンがきれいにいかないので他に良い方法があるかも。
            %span 月
            = f.select :exp_year, [["19",2019],["20",2020],["21",2021],["22",2022],["23",2023],["24",2024],["25",2025],["26",2026],["27",2027],["28",2028],["29",2029]],{} ,id: 'exp_year', class:'card__number'
            %span 年
          %section.bottom
            %label セキュリティコード
            %span 必須
          = f.text_field :cvc, type: 'integer',class:'card__number', id: 'cvc'
          .action
            %a1.question__mark ?
            %a カード裏面の番号とは
          .link__btn#card_token
                    / ↑ここもjsに関係するので大事。
            = f.submit '追加する', class: 'add__card__btn', id: 'token_submit'
                                                          /↑ここでid設定しないとjsで受け取ってくれない。

そんでscssはみんながんばれ。
これで大抵うまくいくかと。
質問あればコメント頂戴な！！

ではまた次でお会いしましょう。