前回はECサイトにカート機能を追加したので、今回は決済機能を追加していきたいと思います！
今回やること
・購入の確認ページで確定ボタンを押すと購入が完了する
こんな感じで今回もやっていきたいと思います！！
参考にした記事
今回もこちらのページを参考にさせて頂きました！
作成手順
stripeの実装
Stripeという決済サービスを使って、決済システムを作っていきます。
stripeの説明がこちらに載ってありましたので、こちらを参考にさせていただきました！
まずはGemfileにgem 'stripe'を追加
bundle installを実行！
コントローラーの作成
$ rails g controller chargescontrollerは以下の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
こんな感じで決済システムが作られて、支払いボタンを押すと購入が完了するようになりました！
まとめ
次回では購入が確定した時点で、購入履歴を保存できるようにしていきたいと思います！
もし間違っている部分などがありましたら、コメント頂けますと助かります🙇♂️