プログラミング初心者が備忘録のために書いていますのでご注意ください。
今回はカードの登録ができるようにします。
PAY.JPとは
PAY.JPを使うと簡単にクレジットカード登録ができる。
詳しくはpay.jpのサイトを確認してください。
＜PAY.JPのサイトへ＞
認証
PAY.JPのサイトでユーザー登録。
PAY.JPのAPIを利用するには、ユーザー登録を行い、APIページからAPIキーを取得す必要があります。
ユーザー登録するとテスト用キーと本番用のキーが作成されます。
サイドバーのAPIのボタンを押すと下のページに移動します。
今回はテストのみ実装するのでテスト秘密鍵とテスト公開鍵を使用します。
環境変数に書き込む
秘密鍵はコードに直接書かないので環境変数を設定します。
それぞれのPCによって環境変数の書き方は異なると思いますので注意してください。
$ vim ~/.bash_profile
iでインサートモード
export PAYJP_PRIVATE_KEY='テスト秘密鍵'
:wqで終了
$ source ~/.bash_profile
gemの導入
実装するアプリのGemfileに書き込み、bundle install。
gem 'payjp'
cardsテーブルの作成
クレジットカードを登録するテーブルを作ります。
すでにusersテーブルができている前提で進めています。
$ rails g model card
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
アソシエーションの設定
1人のユーザーが１つのクレジットカードを持てるようにします。
has_one :card
belongs_to :user
コントローラーの作成
cards_controllerを作り require を記述。
$ rails g controller cards
require 'payjp'
ルーティングの設定
新規クレジットカードを登録するためnewとcreateを作成
resources :cards, only: [:new, :create]
ビューの作成
超単純なビューの例を作りました。
フォームのみ作成したのでご自分の目的に応じて作成してください。
- カード番号 ・ 有効期限（月/年) ・ セキュリティーコード
上記の４点を登録できるようにしました。
= 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に以下の記述を追加する必要があります。
%head
%script{src: "https://js.pay.jp/", type: "text/javascript"}
jsの作成
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アクションに飛べるようにしています。
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
最後に
何とか登録出来ただけなので細かい設定はできていませんが、参考になる方がいればと思います。
間違いがあるかもしれないのでご了承ください。