PROGRAMMING

RailsでECサイトを作る!【決済機能の追加⑴】









前回は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

こんな感じで決済システムが作られて、支払いボタンを押すと購入が完了するようになりました!

まとめ

次回では購入が確定した時点で、購入履歴を保存できるようにしていきたいと思います!

もし間違っている部分などがありましたら、コメント頂けますと助かります🙇‍♂️

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.