Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

まずはじめに

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より確認ができます。
Pay.jp api_view.png

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

.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にアクセスし売り上げの画面を見て、支払い済みとなっていれば問題ないです。

さいごに

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

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

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

sho40
文系なのに語彙力がない未経験プログラマー。  間違ってる。こうした方が良い。もっとこんな内容書きなさい。 こんなコメントたくさん受け付けてます。お尻叩かれて成長していく姿見届けてください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away