0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【やってみた】未経験エンジニアのPay.jp導入(Ruby on Rails)

Last updated at Posted at 2020-02-26

###まずはじめに

Pay.jpとは
シンプルなAPIと豊富なライブラリで簡単にクレジットカード決済を導入できます。
ApplePayに対応していたり定期課金を組むことができます。
今回は開発環境での実装をイメージしているので後ほど出てくる各鍵はテストキーを使用しています。

##導入
Pay.jpの登録
まずはアカウントを取得をします。
登録完了しログインすると下記のようになります。

pay.jp root_view.png

gemのインストール

Gemfile
gem 'payjp'
```:fist_tone1::point_up:
**インストール**

bundle install



##環境変数の設定
まず、プロジェクト直下に.envファイルを新たに作成し、以下のように編集しましょう。

PAYJP_PUBLIC_KEY='自身のアカウントのテスト公開鍵'
PAYJP_SECRET_KEY='自身のアカウントのテスト秘密鍵'

各キーはPay.jpマイページのAPIより確認ができます。
<img width="1664" alt="Pay.jp api_view.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498194/b3b84802-e932-c8a2-8f62-5c9e82c5ab83.png">

そしてこの.envファイルをGithubにあげないよう .gitignoreに下記追記をします。

```ruby:.gitignore
/.env

##controller

支払い機能を管理するコントローラーを作成しpayアクションを定義します。
私の場合はPurchasesControllerを作成し記載しております。

app/controllers/purchases_controller.rb

  def index
  end

  def pay
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    Payjp::Charge.create(
      amount: params[:amount],
      card: params['payjp-token'],
      currency: 'jpy'
    )
  end

Charge.createで売り上げ作成処理をしているのかと思います。
amountは売り上げ金額(ここではviewから取得したparams[:amount]を売上高とします。)、
cardはクレジットカードのトークンを使っての決済を表し、
currencyは 'jpy'とすることで日本円での決済としています。

また、indexに「カードで支払う」ボタンを設置します。

##ルーティング

payアクションのルートを追記します。

route.rb

resources :purchases
post 'purchases/pay' => 'purchases#pay'

##view

ここまできたらあとはビューに支払い用のモーダルを設置する処理をするだけですね。

app/views/purchases/index.html.haml

= form_with local: true, url: purchases_pay_path do |form|
  = form.number_field :amount
  %script.payjp-button{"data-key" => "自身のアカウントのテスト公開鍵", src: "https://checkout.pay.jp", type: "text/javascript"}

なんとこれだけでindex.html.hamlに表示される「カードで支払う」ボタンを押すだけで下記のようなモーダルが出てくるんです。
Pay.jp modalview.png

忘れずに支払い完了後のviewも用意します。

app/views/purchases/pay.html.haml

支払いが完了しました

= link_to 'Topへ', root_path

ここまで完了したら実際に試してみましょう!
index.html.hamlに記載した「カードで支払う」ボタンを押して、モーダルを開き必要な情報を入力します。
カード番号はあらかじめPay.jpで用意しているテスト用の共通カード番号'4242 4242 4242 4242'、
有効期限は現在から未来の日付、CVC番号は3桁の適当な数字、名前も適当な名前を入力して「カードで支払う」ボタンをクリック。

すると下記のようにpay.html.hamlの画面になれば完了です。
※CSSを当ててないのでシンプルですがご了承ください。

pay.jp paied_view.png

実際にPay.jpにアクセスし売り上げの画面を見て、支払い済みとなっていれば問題ないです。

##さいごに

今回は開発環境についてですが、本番環境の際はもう少し考慮する点はあるかと思います。
が、皆さんならやってくれると信じてます。

ここから発展して定期課金などはまたの機会でご紹介できればなんて思ってます。

ありがとうございました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?