クレジット決済ミニアプリ実装について

クレジット決済ミニアプリ実装について(その1)

クレジットカード決済代行サービスを利用することは、以下のようなメリットがあります。

• 会社ごとに事務的手続きをする必要がない
• 決済代行サービスが提供するAPIなどを用いることで、クレジットカード情報の取り扱いに関するセキュリティ対策をしなくても、安全なやり取りができる

  早速、アプリケーションを作成レツゴ！！！

# アプリを作成するprojectsディレクトリに移動
% cd ~/projects

# payjp_practiceという新規アプリをRailsバージョン6.0で、-dオプションをつけMySQLの使用を明示して作成
% rails _6.0.0_ new payjp_practice -d mysql

# payjp_practiceに移動
% cd payjp_practice

# データベースの生成
% rails db:create

でた！ケーキマーク

# 開発用ファイル生成
USERnoMacBook-puro:payjp_practice user$ rails db:create
Created database 'payjp_practice_development'
Created database 'payjp_practice_test'
USERnoMacBook-puro:payjp_practice user$ 

order モデルを作成

# rails g model order
USERnoMacBook-puro:payjp_practice user$ rails g model order
Running via Spring preloader in process 47891
      invoke  active_record
      create    db/migrate/20211003013422_create_orders.rb
      create    app/models/order.rb
      invoke    test_unit
      create      test/models/order_test.rb
      create      test/fixtures/orders.yml
USERnoMacBook-puro:payjp_practice user$ 

ordersテーブルを作成

class CreateOrders < ActiveRecord::Migration[6.0]
  def change
    create_table :orders do |t|

      t.integer :price  ,null: false # ←追加
      t.timestamps
    end
  end
end

コマンドを実行してデータベースにテーブル情報を反映

USERnoMacBook-puro:payjp_practice user$ rails db:migrate
== 20211003013422 CreateOrders: migrating =====================================
-- create_table(:orders)
   -> 0.0396s
== 20211003013422 CreateOrders: migrated (0.0397s) ============================

USERnoMacBook-puro:payjp_practice user$ 

Sequel Pro確認ok!

バリデーションを設定

class Order < ApplicationRecord
   validates :price, presence: true
end

ルーティングを設定

Rails.application.routes.draw do
  root to: 'orders#index'
  resources :orders, only:[:create]
end

ordersコントローラーを作成

USERnoMacBook-puro:payjp_practice user$ rails g controller orders
Running via Spring preloader in process 48287
      create  app/controllers/orders_controller.rb
      invoke  erb
      create    app/views/orders
      invoke  test_unit
      create    test/controllers/orders_controller_test.rb
      invoke  helper
      create    app/helpers/orders_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/orders.scss
USERnoMacBook-puro:payjp_practice user$ 

indexアクションとcreateアクションを定義

class OrdersController < ApplicationController
  def index
  end

  def create
  end

end

ビューファイルindex.html.erbを作成,記述

<%= form_with  model: @order, id: 'charge-form', class: 'card-form',local: true do |f| %>
  <div class='form-wrap'>
    <%= f.label :price, "金額" %>
    <%= f.text_field :price, class:"price", placeholder:"例)2000" %>
  </div>
  <%= f.submit "購入", class:"button", id: "button" %>
<% end %>

とstyle.cssファイルを作成,記述略

保存できるようにする

class OrdersController < ApplicationController
  def index
    @order = Order.new
  end

  def create
    @order = Order.new(order_params)
    if @order.valid?
      @order.save
      return redirect_to root_path
    else
      render 'index'
    end
  end

  private

  def order_params
    params.require(:order).permit(:price)
  end

end

ブラウザで挙動を確認

ok!!!しっかりデータ保存できた！

バリデーションがしっかりと機能し、エラーメッセージが出力されるか確認

• gemファイルにgem 'pry-rails'を記述

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'pry-rails'

USERnoMacBook-puro:payjp_practice user$ bundle install
Using webpacker 4.3.0
中略
Bundle complete! 18 Gemfile dependencies, 78 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
USERnoMacBook-puro:payjp_practice user$ 

• 次orders_controller.rbにbinding.pryを追記

  def create
    @order = Order.new(order_params)
    binding.pry # ←ここに記述
    if @order.valid?
      @order.save
　binding.pry # ←ここに記述しても機能しない
      return redirect_to root_path
    else
      render 'index'
    end
  end

• からのデータを送信すると

Started POST "/orders" for ::1 at 2021-10-03 11:33:34 +0900
Processing by OrdersController#create as HTML
  Parameters: {"authenticity_token"=>"K8vy474+YQ1fEO0CXPTV/FfvsLN+DzPIqHqklYMmPqWvj2ujBzwm3XW3dMYNW+Rw7mZQ7gOEbhqUvjYDZFRbcQ==", "order"=>{"price"=>""}, "commit"=>"購入"}

From: /Users/user/projects/payjp_practice/app/controllers/orders_controller.rb:8 OrdersController#create:

     6: def create
     7:   @order = Order.new(order_params)
 =>  8:   binding.pry
     9:   if @order.valid?
    10:     @order.save
    11:     return redirect_to root_path
    12:   else
    13:     render 'index'
    14:   end
    15: end

[1] pry(#<OrdersController>)> 

• @order.valid?を叩くと

[1] pry(#<OrdersController>)> @order.valid?
=> false

• 次エラーメッセージを確認：@order.erros.full_messages を叩く

[3] pry(#<OrdersController>)> @order.errors.full_messages
=> ["Price can't be blank"]
[4] pry(#<OrdersController>)> 

「"Price can't be blank"」のエラーメッセージが生成されることがわかりました

未経験でのWebエンジニア転職を目指して、プログラミングを学習しています。日々の学習した内容をアウトプット用にはてなを書き始めました。TECH CAMP 102 期学生