payjpを用いたクレジット決済機能の実装方法

f:id:ryoutaku_jo:20190214192759p:plain

【結論】
・ PAY.JPとは、クレジットカード決済の代行サービス

・提供されるライブラリを使用すれば、
 クレジットカード決済機能を簡単に実装できる

・PAY.JPでは「カード情報のトークン化」
 「支払い処理」「定期課金」
などの機能を提供してくれる


【目次】


【本題】

クレジットカード決済機能を実装した

チーム開発で作成しているアプリにカード決済機能を
搭載する事にしたので、今回はその内容をまとめます。

PAY.JPとは

クレジットカード決済の代行サービス。
Rails用の公式のgemが用意されており、
簡単に実装ができる。

pay.jp

PAY.JPの機能

PAY.JPの主な機能は下記の3つです。

・カード情報のトークン化
入力されたカード情報をトークンに置き換えて管理ができる仕組みです。
また、カード情報はアプリケーションのサーバーを経由せずに、
直接PAY.JPのサーバーへ伝送されて処理が行われるようになるため、高いセキュリティを保った状態で支払いができます。

・支払い処理
トークン化したカード情報を元に、クレジットカードの決済処理を行います。
トークンはセキュリティのため、一度しか使用できない仕様になっています。
顧客にトークンを紐付けておき、顧客IDを使って支払いを行うこともできます。
顧客IDは何度でも支払いに使用できるため、顧客にトークンを紐付けておけば、
二回目以降はクレジットカード情報を入力させることなく、支払いを行うことができます。

・定期課金
1ヶ月ごとの定期的な課金処理を簡単に組み込むことができます。

Checkoutの実装方法

PAY.JPで決済機能を実装する場合は、
カード情報のトークン化やバリデーションなどを行うフォームを自動生成する「Checkout」か
カード情報のトークン化のみに特化した「payjp.js」というライブラリのどちらかを使用します。

今回は「Checkout」の実装方法をまとめます。


0: PAY.JPのアカウントを作成する
まずは下記サイトでPAY.JPのアカウント登録を済ませます。

PAY.JP - 決済手数料2.59% クレジットカード決済代行サービス


1: 各種APIキーを確認する
アカウント登録後から閲覧できる管理者画面のAPIメニューを開き、
そこに表示される各種APIキーを確認します。

f:id:ryoutaku_jo:20190215015052j:plain


2:gemの導入
gemを導入します

gem 'payjp'

3:フォームを作成する
ビューの購入ボタンを設置したい箇所に下記のコードを記述します

= form_tag(action: :pay, method: :post) do
 %script.payjp-button{:src => "https://checkout.pay.jp", :type => "text/javascript" ,"data-text" => "購入する" ,"data-key" => "pk_test_***************************"}


4:コントローラーにpayアクションを追加する
フォームに入力したカード情報をトークン化して支払い処理を行う為の
処理を下記の様に記述します。

  def pay
      Payjp.api_key = 'sk_test_**************************'
      charge = Payjp::Charge.create(
      :amount => @product.price,
      :card => params['payjp-token'],
      :currency => 'jpy',
  )
  end


5:payアクションのルーティングを再定義する
新たに追加したpayアクションのルーティングを再定義します

  resources :products do
    collection do
      post 'pay/:id' => 'products#pay', as: 'pay'
    end
  end


これで基本的な機能の実装は完了です。

f:id:ryoutaku_jo:20190215015717g:plain

f:id:ryoutaku_jo:20190215015752g:plain

総括

Facebookログインなどと違い、エラーが殆ど出ずに
簡単に実装が出来ました。これこそgemの恩恵だと感じました。

但し細かいカスタマイズをしようとすると、
更に詳しく仕様を理解する必要があると思われます。
また次の機会に勉強したいと思います。

《今日の学習進捗》

チーム開発:20日目
payjpの実装に着手し、ほぼ完成。
残すはカテゴリ検索や細々した機能の実装のみ。
完成が見えてきた!

学習開始からの期間 :68日
今日までの合計時間:716h
一日あたりの平均学習時間:10.6h
今日までに到達すべき目標時間:621h
目標との解離:95h
「10,000時間」まで、

残り・・・「9284時間!」