Payjp

∼ 概要とその実装方法 ∼

アジェンダ
・PAY.JPとは
・PAY.JPの特徴
・PAY.JPの仕組み
・PAY.JPの実装方法(チェックアウト版、カスタマイズ版)
・最後に

PAY.JPとは
ネットショップを誰でも簡単に作れるサービス
「BASE」が運営している決済サービスのこと。
事業者がクレジットカード情報を扱わなくてもいいように
簡単に支払い機能を実装することができる。
手数料は取引額の2.59%と業界内では屈指の安さ。

PAY.JPの特徴
・様々な言語に対応している(現在は9つの言語に対応)
→ Python, Ruby, PHP, Java etc..
・事業者が機密情報を保持することなく決済可能
→ クレジット情報をトークン化している
・カスタマイズが自由自在
→ 簡単に実装できるチェックアウト版もある

トークン化って？？？

トークン化とは、
ユーザーが入力したクレジットカード情報
(カード番号や有効期限など)を乱数化すること。
例), tok_da7d374d1da833862285e74b0408
↓
カード情報が特定されないため、高いセキュリティを誇る。
PAY.JPでは、このトークンを用いて情報のやりとりをする。

PAY.JPの仕組み
フォーム(new.html.haml)
①カード情報送信
JS(card.js) コントローラ(cards_controller.rb)
JavaScript Controller
②カード情報送信
③トークンを生成・送信
(response.id)
④トークンを送信
⑤トークンを送信
⑥顧客IDを生成・送信
(customer)

顧客IDとは、
生成されたトークンと支払った人(顧客)を結びつけたもの。
↓
1度生成されたトークンは再使用できないため、
あらかじめ購入者と結びつけておく必要がある。
なぜその必要があるのか？
一度使用したトークンは再び使用することはできませんが、顧客にカードを登録すれば、

顧客IDを支払い手段として用いることで、何度でも同じカードで支払い処理ができるようになります。
→
トークンと顧客IDの生成は同時に行う必要がある！

PAY.JPの実装方法
共通設定
①PAY.JPに登録
②PAY.JPのダッシュボードからAPIにアクセス

チェックアウト版の場合
PAY.JP側がフォームを用意してくれているため、
フォームに関する記述は1行で済みます。
チェックアウトは<script>タグを1行で、デザインされた決済フォーム、
カード情報のバリデーション、カード情報のトークン化を行うフォームを生成するライブラリです。
→

(payjp-token)
(customer)
= form_tag url: <urlを記述> do
:plain
<script type="text/javascript" src="https://checkout.pay.jp" class="payjp-button" data-key="公開 "></script>

(response.id)
(customer)
次のスライドへ

def create
Payjp.api_key = Rails.application.credentials[:payjp][:secret_key]
customer = Payjp::Customer.create(
card: params[:payjp-token],
metadata: {user_id: current_user.id}
)
@card = Card.new(
card_id: customer.default_card,
customer_id: customer.id,
user_id: current_user.id
)
@card.save
end 自身のデータベースに保存するための記述
トークンをPAY.JP側に送り、顧客IDを取得

カスタマイズ版の場合
①gem payjp'を記述
②applicattion.html.hamlのheadタグに、以下の記述を追記

(response.id)
(customer)
フォームを自身で作成(例は次のスライド)

%form#charge-form{action: "/cards", method: "POST"}
%span.charge-errors
%h4 支払い
%label カード番号
%input.number{maxlength: "16", name: "number", placeholder: "カード番号", type: "text",id:
"payment_card_no", value: 4242424242424242}/
%label CVC
%input.cvc{maxlength: "3", name: "cvc", placeholder: "CVC", type: "text",id:
"payment_card_security_code", value: 123}/
%label 有効期限
%input.exp_month{maxlength: "2", name: "exp_month", placeholder: "月", type: "text",id:
"payment_card_expire_mm", value: 12}/
%input.exp_year{maxlength: "4", name: "exp_year", placeholder: "年", type: "text",id:
"payment_card_expire_yy", value: 2022}/
フォーム例
＊単なるフォーム単体の例なので、以降との関連性はありません。

(response.id)
(customer)
カード情報をPAY.JP側に送信(実装は次のスライド)

$(function() {
if (!$('#regist_card')[0]) return false;
Payjp.setPublicKey("公開を入れます");
$("#regist_card").on("click", function(e) {
e.preventDefault();
let now = new Date();
var card = {
number: $("#card_number_form").val(),
exp_month: $("#exp_month_form").val(),
exp_year: $("#exp_year_form").val(),
cvc: $("#cvc_form").val()
};
Payjp.createToken(card, function(status, response) {
if (status === 200) {
$("#card_number_form").removeAttr("name");
$("#exp_month_form").removeAttr("name");
$("#exp_year_form").removeAttr("name");
$("#cvc_form").removeAttr("name");
var token = response.id;
$("#card_token").append(`<input type="hidden" name="card_token" value=${token}>`)
$("#card_form").get(0).submit();
} else {
alert("カード情報が正しくありません。");
$("#regist_card").prop('disabled', false);
}
});
});
});
PAY.JP側に送るクレジット情報
response.idが
トークンとして送られてくる
トークンをコントローラーに送信

(response.id)
(customer)
トークンを送信し、顧客IDを取得(実装は次のスライド)

def create
Payjp.api_key = Rails.application.credentials[:payjp][:secret_key]
customer = Payjp::Customer.create(
card: params[:card_token],
metadata: {user_id: current_user.id},
)
@card = Card.new(
card_id: customer.default_card,
customer_id: customer.id,
user_id: current_user.id
)
@card.save
end
自身のデータベースに保存するための記述
トークンをPAY.JP側に送り、顧客IDを取得

最後に
リファレンスに全てが書いてあります。
(実装方法、よく起こるエラー内容 etc...)

Payjp

Recommended

Recommended

More Related Content

Similar to Payjp

Similar to Payjp (20)

Payjp