오늘은 시원합니다.
최근에는 슈퍼 드라이가 능숙하기 때문에 매일 1병 마시는군요.
하지만 역시 생맥주가 제일군요.

자! ! ! 이번은 신용 카드 등록 편입니다! ! !
우선 대전제로서 프리마 어플을 작성하고 있다고 상정하고 있는 것을 알고 받음! !

payjp를 모르는 분은 우선 도입편을 체케랏! !
도입편

자, 가자! ! !

1 payjp와 통신하기 위한 키 등록

우선은 payjp의 API를 체케라!


(테스트도 프로덕션도 비밀키는 공개해서는 안 되므로 공개해서 후회하지 말아라!!)
(너무 지루하고 절망)
(지우는 잡이지만, 마지막 분은 다케다 쌍운 선생님 같다....)

현 단계에서 필요한 것은 테스트의 비밀키와 공개키.
rails5.2는 credentials에 등록! !

등록 방법을 모르는 분은 괜찮 아타이의 기사를 보지! !
credentials 등록 방법

이름은 뭐든지 좋지만 프라이빗 키라든지?
그건 그렇고, 아타이는

credentials

 :payjp
   :PAYJP_PRIVATE_KEY     = 'sk_test~'
   :PAYJP_KEY             = 'pk_test~'

라고 느꼈습니다.

2 계속해서 Rails!!

우선 카드 모델 작성하겠습니다.

models/card.rb

 class Card < ApplicationRecord

  belongs_to :user
 #バリデーションはお好みで。

이어 ぇ 마이그레이션 파일 ぅ

db/migrate/create_cards.rb

class CreateCards < ActiveRecord::Migration[5.2]
  def change
    create_table :cards do |t|
      t.string     :customer_id, null:false
     #customer_idはその名の通り顧客ID.

      t.string     :card_id,     null:false
      t.references :user,        null:false, foreign_key:true
      t.timestamps
    end
  end
end

왜 이런 느낌? 라고 생각하고 있을지도 모릅니다만 payjp라고 이런 느낌으로 표시되는 것입니다.



카드 정보를 이해하기 어렵고 저장 한 값이 card_id
그래서 그 card_id를 가지고 있는 것이 customer_id.

그래서 card_id와 customer_id를 가지고 DB에 저장하고 user_id를 연결하면 좋다.

오케이? ?

3 그런데 컨트롤러! !

cards_controller.rb

class CardsController < ApplicationController
  require "payjp"
  # これでpayjpを読み込むわよ
def new # カードの登録画面。送信ボタンを押すとcreateアクションへ。
    card = Card.where(user_id: current_user.id).first
    redirect_to card_path(@card.id) if card.present?
  end


def create #PayjpとCardのデータベースを作成
   Payjp.api_key = Rails.application.credentials[:payjp][:PAYJP_PRIVATE_KEY]
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　# ここで秘密鍵をセット！！
   if params['payjp-token'].blank?
     redirect_to action: "new"
   else
     # トークンが正常に発行されていたら、顧客情報をPAY.JPに登録します。
     customer = Payjp::Customer.create(
       description: 'test', # 無くてもOK。PAY.JPの顧客情報に表示する概要です。
       email: current_user.email,# これも無くてOK
       card: params['payjp-token'], # 直前のnewアクションで発行され、送られてくるトークンをここで顧客に紐付けて永久保存します。
       metadata: {user_id: current_user.id} # 無くてもOK。
      )
      @card = Card.new(user_id: current_user.id, customer_id: customer.id, card_id: customer.default_card)
      if @card.save
        redirect_to card_path(@card.id)
      else
        redirect_to action: "create"
      end
    end
  end

private

  #user_idが外部キーとしてあるので、まずユーザーがないといけません。
  def set_card
    @card = Card.where(user_id: current_user.id).first if Card.where(user_id: 　　current_user.id).present?
  end
end

이어 JS!!

payjp.js

document.addEventListener(
  "DOMContentLoaded", (e) => {
    Payjp.setPublicKey("pk_test_0df3d3eb150a3f3dd0f2fc3e");
    const btn = document.getElementById('token_submit'); //IDがtoken_submitの場合に取得されます
    btn.addEventListener("click", (e) => {　//ボタンが押されたときに作動します
      e.preventDefault();　//ボタンを一旦無効化します

      //カード情報生成
      const card = {
        number: document.getElementById("card_number").value,
        cvc: document.getElementById("cvc").value,
        exp_month: document.getElementById("exp_month").value,
        exp_year: document.getElementById("exp_year").value
      }; //入力されたデータを取得します。

      //トークン生成
      Payjp.createToken(card, (status, response) => {
        if (status === 200) { //成功した場合
          $("#card_number").removeAttr("name");
          $("#cvc").removeAttr("name");
          $("#exp_month").removeAttr("name");
          $("#exp_year").removeAttr("name"); //カード情報を自分のサーバにpostせず削除します
          $("#card_token").append(
            $('<input hidden name="payjp-token">').val(response.id)
          ); //トークンを送信できるように隠しタグを生成
          document.inputForm.submit();
          alert("登録が完了しました"); 
        } else {
          alert("カード情報が正しくありません。");
        }
      });
    });
  },false);

이것으로 움직이지 않으면 여기를 살펴 보겠습니다.

app/views/layouts/application.html.haml

%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title payjptest
    %script{src: "https://js.pay.jp/", type: "text/javascript"}
    -# ↑このscriptを記載
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

조금 잡담해 버렸습니다만, 이런 느낌.
보충편이라든지 신경이 쓰이면 뷰 파일도 함께다고 할까.

다음 번은 구입 실장편으로 만나요! !