PAY.JP에서 신용카드를 등록하는 방법

프로그래밍 초보자가 비망록을 위해 쓰고 있으므로주의하시기 바랍니다.
이번에는 카드 등록이 가능합니다.

PAY.JP란?
PAY.JP를 사용하면 쉽게 신용카드 등록을 할 수 있다.
자세한 내용은 pay.jp 사이트를 확인하십시오.
＜ PAY.JP 사이트로 ＞

인증

파 Y. JP 사이트에서 사용자 등록.
PAY.JP의 API를 이용하려면 사용자 등록을 하고 API 페이지에서 API 키를 가져와야 합니다.
사용자를 등록하면 테스트 키와 프로덕션 키가 생성됩니다.
사이드바의 API 버튼을 누르면 아래 페이지로 이동합니다.
이번에는 테스트만 구현하므로 테스트 비밀 키와 테스트 공개 키를 사용합니다.

환경 변수에 쓰기

개인 키는 코드에 직접 쓰지 않으므로 환경 변수를 설정합니다.
각각의 PC에 의해 환경 변수의 작성 방법은 다르다고 생각하므로 주의해 주세요.

터미널

$ vim ~/.bash_profile

iでインサートモード
export PAYJP_PRIVATE_KEY='テスト秘密鍵'
:wqで終了

$ source ~/.bash_profile

gem 도입

구현하는 앱의 Gemfile에 쓰고 bundle install.

Gemfile

gem 'payjp'

cards 테이블 만들기

신용카드를 등록하는 테이블을 만듭니다.
이미 users 테이블이 되어 있는 전제로 진행하고 있습니다.

터미널

$ rails g model card

*****_create_cards.rb (이주 파일)

class CreateCards < ActiveRecord::Migration[5.2]
  def change
    create_table :cards do |t|
      t.references :user, foreign_key: true, null: false
      t.string :customer_id, null: false
      t.string :card_id, null: false
      t.timestamps
    end
  end
end

터미널

$ rails db:migrate

연관 설정

한 명의 사용자가 하나의 신용 카드를 가질 수 있습니다.

user.rb

has_one :card

card.rb

belongs_to :user

컨트롤러 작성

cards_controller 를 작성 require 를 기술.

터미널

$ rails g controller cards

cards_controller.rb

require 'payjp'

라우팅 설정

신규 신용카드를 등록하기 위한 new와 create를 작성

routes.rb

resources :cards, only: [:new, :create]

뷰 만들기

매우 간단한 보기의 예를 만들었습니다.
양식만 작성했으므로 자신의 목적에 따라 작성하십시오.
- 카드번호 · 만료일 (월/년) · 보안 코드
상기의 4점을 등록할 수 있도록 했습니다.

new.html.haml

= form_with model: @card, url: cards_path, local: true, html: { name: 'inputForm' } do |f|
  カード番号
  = f.text_field :card_number, id: "card_number"
  有効期限
  = 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]]
  = f.select :exp_year, [["20",2020],["21",2021],["22",2022],["23",2023],["24",2024],["25",2025],["26",2026],["27",2027],["28",2028],["29",2029]]
  セキュリティーコード
  = f.text_field :cvc, id: 'cvc'
  #card_token
  = f.submit '登録', id: 'token_submit'

또한 application.html.haml에 다음 설명을 추가해야합니다.

application.html.haml

%head
  %script{src: "https://js.pay.jp/", type: "text/javascript"}

js 만들기

js를 사용하여 얻은 토큰을 보낼 수 있습니다.

payjp.js

document.addEventListener(
  "DOMContentLoaded", e => {
    if (document.getElementById("token_submit") != null) {
      Payjp.setPublicKey("自分のテスト公開鍵を記述"); 
      let btn = document.getElementById("token_submit");
      btn.addEventListener("click", e => { 
        e.preventDefault(); 
        let 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"); 
            $("#card_token").append(
              $('<input type="hidden" name="payjp-token">').val(response.id)
            ); 
            document.inputForm.submit();
            alert("登録が完了しました"); 
          } else {
            alert("カード情報が正しくありません。");
          }
        });
      });
    }
  },
  false
);

컨트롤러 편집

보기에 맞게 컨트롤러를 작성합니다.
save 후에는 이동하고 싶은 페이지를 스스로 지정해 주세요.
이번에는 users_controller의 done 액션에 날 수 있도록하고 있습니다.

cards_controller.rb

class CardsController < ApplicationController
  require 'payjp'

  def create
    Payjp.api_key = ENV["PAYJP_PRIVATE_KEY"]
    if params['payjp-token'].blank?
      redirect_to action: "new"
    else
      user_id = current_user.id
      customer = Payjp::Customer.create(
      card: params['payjp-token']
      ) 
      @card = Card.new(user_id: user_id, customer_id: customer.id, card_id: customer.default_card)
      if @card.save
        redirect_to controller: :users, action: :done
      else
        redirect_to action: "new"
      end
    end
  end
end

마지막으로

어떻게든 등록할 수 있었을 뿐이므로 세세한 설정은 되어 있지 않습니다만, 참고가 되는 쪽이 있으면이라고 생각합니다.
실수가있을 수 있으므로 양해 바랍니다.