
前回はECサイトにカート機能を追加したので、今回は決済機能を追加していきたいと思います!
今回やること
・購入の確認ページで確定ボタンを押すと購入が完了する
こんな感じで今回もやっていきたいと思います!!
参考にした記事
今回もこちらのページを参考にさせて頂きました!
作成手順
stripeの実装
Stripeという決済サービスを使って、決済システムを作っていきます。
stripeの説明がこちらに載ってありましたので、こちらを参考にさせていただきました!
まずはGemfileにgem 'stripe'
を追加
bundle install
を実行!
コントローラーの作成
$ rails g controller charges
controllerは以下の2つのことを行います。
- クレジットカードフォームの表示
- APIを呼び出し、実際の料金の表示をする
class ChargesController < ApplicationController
def new
end
def create
Stripe.api_key = ENV.fetch('STRIPE_SECRET_KEY')
# Token is created using Checkout or Elements!
# Get the payment token ID submitted by the form:
token = params[:stripeToken]
charge = Stripe::Charge.create({
amount: 999,
currency: 'usd',
description: 'Example charge',
source: token,
})
rescue Stripe::CardError => e
flash[:error] = e.message
redirect_to new_charge_path
end
end
ルートの定義
resource :charge, only: [:create]
config /routes.rb
に上記のコードを追加。
アプリケーションの構成
以下をconfig / initializers /stripe.rb
に追加。
Rails.configuration.stripe = {
:publishable_key => ENV['STRIPE_PUBLISHABLE_KEY'],
:secret_key => ENV['STRIPE_SECRET_KEY']
}
Stripe.api_key = Rails.configuration.stripe[:secret_key]
APIキーはここでは書き込まず、gem dotenvを使って保管するようにあとで管理できるようにします。
ビューの作成
次に、チェックアウトページであるapp / views / charges
の下にnew.html.erb
を作成。
<%= form_tag charges_path do %>
<article>
<% if flash[:error].present? %>
<div id="error_explanation">
<p><%= flash[:error] %></p>
</div>
<% end %>
<label class="amount">
<span>Amount: </span>
</label>
</article>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
data-description="payment"
data-amount="500"
data-locale="auto">
</script>
<% end %>
gem dotenv の追加
Stripeのsecret_keyをgem dotenv
を使って管理する。
まずは、Gemfile
に下記を追加。
gem 'dotenv-rails', groups: [:development, :test]
bundle install
を忘れずに実行!
ルートディレクトリ(Gemfileがある場所ですね!)に.env
ファイル(このファイルに環境変数が入ります)を作成し、そこに公開可能キーとシークレットキーを記入していきます。
STRIPE_PUBLISHABLE_KEY="pk_test_~~~~~~~~~~~"
STRIPE_SECRET_KEY="sk_test_~~~~~~~~~~~~"
Githubには公開したくない変数なので、下記のように.gitignore
の中に./env
を追加。
/.env

こんな感じで決済システムが作られて、支払いボタンを押すと購入が完了するようになりました!
まとめ
次回では購入が確定した時点で、購入履歴を保存できるようにしていきたいと思います!
もし間違っている部分などがありましたら、コメント頂けますと助かります🙇♂️