【Rails】 PAYJPを使ってクレジットカード決済を導入しよう！

1
gem 'payjp'

1
<script type="text/javascript" src="https://js.pay.jp/v1/"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey("公開鍵の値"); 
  const form = document.getElementById("入力フォームのid"); 
  form.addEventListener("submit", function(e)  {
    e.preventDefault();
    const card = { 
      number: フォームに入力されたカード番号の値,
      name: フォームに入力されたカード名義人の値
      cvc: フォームに入力されたセキュリティコードの値,
      exp_month: フォームに入力された月の値,
      exp_year: `20${フォームに入力された年の値}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("入力フォームのid");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("カード番号の入力フォームのid").removeAttribute("name");
        document.getElementById("カード名義人の入力フォームのid").removeAttribute("name");
        document.getElementById("セキュリティコードの入力フォームのid").removeAttribute("name");
        document.getElementById("月の入力フォームのid").removeAttribute("name");
        document.getElementById("年の入力フォームのid").removeAttribute("name");
        document.getElementById("入力フォームのid").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
def アクション名
    Payjp.api_key = ENV["秘密鍵の値"] 
    customer = Payjp::Customer.create(
      description: 'test', 
      card: params[:token_id] 
    )

    card = Card.new(
      顧客idを保存するカラム名: customer.id,
      トークンidを保存するカラム名: params[:token_id],
      user_id: current_user.id
    )
end

1
2
3
4
5
6
7
def アクション名
    Payjp.api_key = "秘密鍵の値" # PAY.JPに秘密鍵を使ってアクセス
    card = Card.find_by(user_id: current_user.id) # cardsテーブルからレコードを取得

    customer = Payjp::Customer.retrieve(card.customer_id) # 顧客idを元に、顧客情報を取得
    @card = customer.cards.first # 登録したカード情報の取得
end

1
<%= @card.last4 %>

1
2
3
4
5
6
7
8
9
def アクション名
    Payjp.api_key = "秘密鍵の値" # PAY.JPに秘密鍵をセット
    customer_id = current_user.card.customer_id # 顧客idを取得
    Payjp::Charge.create( # PAY.JPに購入価格と顧客id、通過の種類を渡す
      amount: "商品の価格の値",
      customer: "顧客id",
      currency: 'jpy' 
    )
end

1
2
3
4
5
Payjp.api_key = '秘密鍵'
customer = Payjp::Customer.retrieve('顧客id')
customer.cards.create(
  card: 'トークンid'
)

1
2
3
4
5
Payjp.api_key = '秘密鍵'
customer = Payjp::Customer.retrieve('顧客id')
card = customer.cards.retrieve('カードid')
card.name = "PAY TARO"
card.save

1
2
3
4
5
6
    Payjp.api_key = '秘密鍵'
    customer = Payjp::Customer.retrieve('顧客id')
    card = customer.cards.create(
      card: 'トークンid'
    )
    card_id = card.id # カードidの取得

1
2
3
4
Payjp.api_key = '秘密鍵'
customer = Payjp::Customer.retrieve('顧客id')
card = customer.cards.retrieve('カードid')
card.delete

1
2
rails _6.0.0_ new payjp_app -d mysql
cd payjp_app

1
gem 'dotenv-rails'

1
touch .env

1
2
3
4
5
6
PAYJP_SECRET_KEY="テスト秘密鍵の値"
PAYJP_PUBLIC_KEY="テスト公開鍵の値"

# （例）値は架空の値です。
PAYJP_SECRET_KEY="sk_test_11b724efa6ec040des9a5h72"
PAYJP_PUBLIC_KEY="pk_test_16c0azc53ecdb076897k8c9c"

1
2
3
rails c
irb(main):001:0> ENV['PAYJP_SECRET_KEY']
=> "sk_test_11b724efa6ec040des9a5h72"

1
/.env

1
gem 'devise'

1
2
bundle install
rails g devise:install

1
rails g devise user

1
2
3
4
5
6
7
8
9
Class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :name,               null: false
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      #下記省略

1
2
3
4
5
6
7
8
9
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

// 略

1
rails db:create db:migrate

1
rails g devise:views

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

1
2
3
4
5
6
7
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

1
rails g model product

1
2
3
4
5
6
7
8
9
class CreateProducts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.string  :name
      t.integer :price
      t.timestamps
    end
  end
end

1
rails db:migrate

1
2
3
4
5
6
7
products = [
  { name: '鉛筆', price: 100 },
  { name: 'ボールペン', price: 200 },
  { name: '消しゴム', price: 50 },
  { name: 'ノート', price: 100 }
]
Product.create(products)

1
rails db:seed

1
rails g controller products index

1
2
3
4
5
class ProductsController < ApplicationController
  def index
    @products = Product.all
  end
end

1
2
3
4
Rails.application.routes.draw do
  root 'products#index'
  devise_for :users
end

1
2
3
4
5
6
7
8
<% if user_signed_in?%>
  <p><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></p>
<% else %>  
  <p><%= link_to "新規登録", new_user_registration_path %>　<%= link_to "ログイン", new_user_session_path %></p>
<% end %>
<% @products.each do |product| %>
  <p>商品名：<%= product.name%>　価格：<%= product.price %></p>
<% end %>

1
gem 'payjp'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>PayjpApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

1
rails g model card

1
2
3
class Card < ApplicationRecord
  belongs_to :user
end

1
2
3
4
5
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_one :card, dependent: :destroy
end

1
2
3
4
5
6
7
8
9
10
class CreateCards < ActiveRecord::Migration[5.2]
  def change
    create_table :cards do |t|
      t.string :customer_id,  null: false
      t.string :token_id,      null: false
      t.references :user,        foreign_key: true
      t.timestamps
    end
  end
end

1
rails db:migrate

1
rails g controller cards new

1
2
3
4
5
6
class CardsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]
  def new
  end

end

1
2
3
4
5
Rails.application.routes.draw do
  root 'products#index'
  devise_for :users
  resources :cards, only: [:new, :create]
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<h1>クレジットカード登録フォーム</h1>
<%= form_with url: cards_path, id: "card_form", local: true do |f| %>
  <div>
    <%= f.label :number, "カード番号" %>
    <%= f.text_field :number %>
  </div>
  <div>
    <%= f.label :name, "カード名義人" %>
    <%= f.text_field :name %>
  </div>
  <div>
    <%= f.label :cvc, "セキュリティコード" %>
    <%= f.text_field :cvc %>
  </div>
  <div>
    <%= f.label :exp_month, "有効期限（月）" %>
    <%= f.text_field :exp_month %>
  </div>
  <div>
    <%= f.label :exp_year, "有効期限（年）" %>
    <%= f.text_field :exp_year %>
  </div>
  <div>
    <%= f.submit "送信" %>
  </div>
<% end %>

1
touch config/initializers/webpacker.rb

1
Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]

1
touch app/javascript/card.js

1
2
3
4
5
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../card")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    # 略

1
2
3
4
5
6
7
8
9
10
11
12
13
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    # 略

1
2
3
4
5
6
7
const card = { 
  card_number: document.getElementById("number").value,
  card_name: document.getElementById("name").value,
  card_cvc: document.getElementById("cvc").value,
  card_exp_month: document.getElementById("exp_month").value,
  card_exp_year: `20${document.getElementById("exp_year").value}`,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "card": {
    "address_city": null,
    "address_line1": null,
    "address_line2": null,
    "address_state": null,
    "address_zip": null,
    "address_zip_check": "unchecked",
    "brand": "Visa",
    "country": null,
    "created": 1442290383,
    "customer": null,
    "cvc_check": "passed",
    "exp_month": 2,
    "exp_year": 2024,
    "fingerprint": "e1d8225886e3a7211127df751c86787f",
    "id": "car_e3ccd4e0959f45e7c75bacc4be90",
    "livemode": false,
    "metadata": {},
    "last4": "4242",
    "name": null,
    "object": "card"
  },
  "created": 1442290383,
  "id": "tok_5ca06b51685e001723a2c3b4aeb4",
  "livemode": false,
  "object": "token",
  "used": false
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const payjp = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY); 
  const form = document.getElementById("card_form"); 
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    const card = { 
      number: document.getElementById("number").value,
      name: document.getElementById("name").value,
      cvc: document.getElementById("cvc").value,
      exp_month: document.getElementById("exp_month").value,
      exp_year: `20${document.getElementById("exp_year").value}`,
    };
    Payjp.createToken(card, function(status, response) {
      if (status === 200) {
        const token = response.id;
        const tokenObj = `<input value=${token} name='token_id' type="hidden">`; 
        const cardForm = document.getElementById("card_form");
        cardForm.insertAdjacentHTML("beforeend", tokenObj);
        document.getElementById("number").removeAttribute("name");
        document.getElementById("name").removeAttribute("name");
        document.getElementById("cvc").removeAttribute("name");
        document.getElementById("exp_month").removeAttribute("name");
        document.getElementById("exp_year").removeAttribute("name");
        document.getElementById("card_form").submit();
      } else {
        alert("カード情報が正しくありません")
      } 
    });
  });
};
window.addEventListener("load", payjp);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class CardsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]
  def new
  end

  def create
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] 
    customer = Payjp::Customer.create(
      description: 'test', 
      card: params[:token_id] 
    )
  end

end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class CardsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]
  def new
  end

  def create
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] 
    customer = Payjp::Customer.create(
      description: 'test', 
      card: params[:token_id] 
    )

    card = Card.new(
      customer_id: customer.id,
      token_id: params[:token_id],
      user_id: current_user.id
    )

  end

end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class CardsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]
  def new
  end

  def create
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] 
    customer = Payjp::Customer.create(
      description: 'test', 
      card: params[:token_id] 
    )

    card = Card.new(
      customer_id: customer.id,
      token_id: params[:token_id],
      user_id: current_user.id
    )

    if card.save
      redirect_to root_path
    else
      redirect_to new_card_path
    end 
  end

end

1
2
3
Payjp.createToken(card, (status, response) => {
console.log(status)
if (status === 200) {

1
2
3
4
5
6
7
class CardsController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]
  def new
    redirect_to root_path if user_signed_in? && current_user.card
  end

# 略

1
2
3
4
5
6
Rails.application.routes.draw do
  root 'products#index'
  devise_for :users
  resources :cards, only: [:new, :create]
  resources :users, only: :show
end

1
rails g controller users show

1
2
3
4
5
6
7
8
9
class UsersController < ApplicationController
  def show
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] # PAY.JPに秘密鍵を使ってアクセス
    card = Card.find_by(user_id: current_user.id) # cardsテーブルからユーザーのカード情報を取得

    customer = Payjp::Customer.retrieve(card.customer_id) # 顧客idを元に、顧客情報を取得
    @card = customer.cards.first # cards.firstで登録した最初のカード情報を取得
  end
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#<Payjp::Card:0x3fd1e9428df8 id=car_*****************************> 
JSON: {
  "id": "car_****************************",
  "address_city": null,
  "address_line1": null,
  "address_line2": null,
  "address_state": null,
  "address_zip": null,
  "address_zip_check": "unchecked",
  "brand": "Visa",
  "country": null,
  "created": 1618992858,
  "customer": "cus_****************************",
  "cvc_check": "passed",
  "exp_month": 2,
  "exp_year": 2023,
  "fingerprint": "********************************",
  "last4": "4242",
  "livemode": false,
  "metadata": {},
  "name": null,
  "object": "card",
  "three_d_secure_status": null
}

1
2
3
4
5
6
<h1><%= current_user.name %>さんのページ</h1>
<h2>カード情報</h2>
<p>カード番号：**** **** **** <%= @card.last4%></p>
<p>カード名義人: <%= @card.name %></p>
<p>有効期限：<%= @card.exp_month %> / <%= @card.exp_year %></p>
<p>ブランド：<%= @card.brand %></p>

1
2
3
4
5
6
7
8
9
10
class UsersController < ApplicationController
  def show
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] # PAY.JPに秘密鍵を使ってアクセス
    card = Card.find_by(user_id: current_user.id) # cardsテーブルからユーザーのカード情報を入手
    if card.present?
      customer = Payjp::Customer.retrieve(card.customer_id) # 顧客トークンを元に、顧客情報を入手
      @card = customer.cards.first
    end
  end
end

1
2
3
4
5
6
7
8
9
10
<h1><%= current_user.name %>さんのページ</h1>
<h2>カード情報</h2>
<% if @card.present? %>
  <p>カード番号：**** **** **** <%= @card.last4%></p>
  <p>カード名義人: <%= @card.name %></p>
  <p>有効期限：<%= @card.exp_month %> / <%= @card.exp_year %></p>
  <p>ブランド：<%= @card.brand %></p>
<% else %>
  <p>カードが登録されていません</p>
<% end %>

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if user_signed_in?%>
  <p>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %> <%= link_to "マイページ", user_path(current_user) %>
    <% if current_user.card.blank? %>
      <%= link_to "クレジットカード登録", new_card_path %>
    <% end %>
  </p>
<% else %>  
  <p><%= link_to "新規登録", new_user_registration_path %>　<%= link_to "ログイン", new_user_session_path %></p>
<% end %>
<% @products.each do |product| %>
  <p>商品名：<%= product.name%>　価格：<%= product.price %></p>
<% end %>

1
rails g model order

1
2
3
4
class Order < ApplicationRecord
  belongs_to :user
  belongs_to :product
end

1
2
3
4
5
6
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  has_one :card, dependent: :destroy
  has_many :orders, dependent: :destroy
end

1
2
3
class Product < ApplicationRecord
  has_one :order, dependent: :destroy
end

1
2
3
4
5
6
7
8
9
class CreateOrders < ActiveRecord::Migration[6.0]
  def change
    create_table :orders do |t|
      t.references :user, foreign_key: true
      t.references :product, foreign_key: true
      t.timestamps
    end
  end
end

1
rails db:migrate

1
rails g controller orders

1
2
3
4
5
class OrdersController < ApplicationController
  before_action :authenticate_user!, only: :create
  def create
  end
end

1
2
3
4
5
6
7
8
9
Rails.application.routes.draw do
  root 'products#index'
  devise_for :users
  resources :cards, only: [:new, :create]
  resources :users, only: :show
  resources :products, only: :index do
    resources :orders, only: :create
  end
end

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if user_signed_in?%>
  <p>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %> <%= link_to "マイページ", user_path(current_user) %>
    <% if current_user.card.blank? %>
      <%= link_to "クレジットカード登録", new_card_path %>
    <% end %>
  </p>
<% else %>  
  <p><%= link_to "新規登録", new_user_registration_path %>　<%= link_to "ログイン", new_user_session_path %></p>
<% end %>
<% @products.each do |product| %>
  <p>商品名：<%= product.name%>　価格：<%= product.price %>　<%= link_to "購入", product_orders_path(product.id), method: :post %></p>
<% end %>

1
2
Prefix         Verb   URI Pattern                                   Controller#Action
product_orders POST   /products/:product_id/orders(.:format)        orders#create

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class OrdersController < ApplicationController
  before_action :authenticate_user!, only: :create
  def create
    return redirect_to new_card_path unless current_user.card.present?
    product = Product.find(params[:product_id]) # 購入する商品のレコードを取得
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"] # PAY.JPに秘密鍵を設定
    customer_id = current_user.card.customer_id # 顧客idを取得
    Payjp::Charge.create( # PAY.JPに購入価格と顧客id、通貨の種類を渡す
      amount: product.price,
      customer: customer_id,
      currency: 'jpy' 
    )

    current_user.orders.create(product_id: product.id) # 購入履歴テーブルに保存
    redirect_to root_path
  end

end

1
2
3
4
5
Payjp::Charge.create(
  amount: product.price,
  card: 'トークンid',
  currency: 'jpy' 
)

1
2
3
4
5
6
7
8
9
module ProductsHelper
  def product_order(product)
    if Order.exists?(product_id: product.id)
      "売り切れ"
    else
      link_to "購入", product_orders_path(product.id), method: :post
    end
  end
end

1
2
3
4
5
6
7
8
9
module ProductsHelper
  def product_order(product)
    if product.order.present? # アソシエーションでレコードを取得し、present?メソッド取得できているか確認
      "売り切れ"
    else
      link_to "購入", product_orders_path(product.id), method: :post
    end
  end
end

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if user_signed_in?%>
  <p>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %> <%= link_to "マイページ", user_path(current_user) %>
    <% if current_user.card.blank? %>
      <%= link_to "クレジットカード登録", new_card_path %>
    <% end %>
  </p>
<% else %>  
  <p><%= link_to "新規登録", new_user_registration_path %>　<%= link_to "ログイン", new_user_session_path %></p>
<% end %>
<% @products.each do |product| %>
  <p>商品名：<%= product.name%>　価格：<%= product.price %>　<%= product_order(product) %></p>
<% end %>