16
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Railsでのstripe(クレジット決済)の使い方

Last updated at Posted at 2019-06-01

##はじめに
※この記事はstripeにもうすでに登録している体で書いていきます。

railsへの導入については公式サイトに記載されています。
https://stripe.com/docs/checkout/rails
ですが、ちょこちょこ自分なりに修正したのでそれを書いていきます。

ログイン機能はdeviseで実装する前提で書いてますので、current_userはユーザー情報が格納されています。current_user.emailはユーザーのemailアドレスを指しています。

##導入
Gemfilegem "stripe"を追加しbundle install

##コントローラー作成

$ rails g controller charges

##ルート指定
公式ではresources :chargesで指定していますが、ぼくはこのように追加しました。

routes.rb
post "products/:id/charge", to: "charges#create", as: "charge"

今回はcreate処理のみ実装していきます。

productsというのは商品を扱うパスになります。

↓のように商品個別ページに決済ボタンを配置するような実装方法をとっています。

スクリーンショット 2019-06-01 21.51.52.png

ですので"products/:id/charge":idは商品のidが入ります。

##購入ボタン実装

show.html.erb
<%= form_tag charge_path(@product) do %>
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
    data-amount="<%= @product.price %>"
    data-currency="jpy"
    data-description="クレジット決済"
    data-name=<%= "#{@product.name}を購入" %>
    data-email=<%= "#{current_user.email}" %>
    data-label="購入する"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-allow-remember-me="false">
  </script>
<% end %>

slimで書くとこのようになりますね。

show.html.slim
= form_tag charge_path(@product) do
  script.stripe-button data-amount="#{@product.price}\
  " data-currency="jpy" data-description="クレジット決済\
  " data-key="#{Rails.configuration.stripe[:publishable_key]}" data-locale="auto" data-name="#{@product.name}を購入\
  " data-email="#{current_user.email}" data-label="購入する\
  " data-allow-remember-me="false" src="https://checkout.stripe.com/checkout.js"

@productには商品名や金額などの商品データが入ってます。

使用しているcheckout.jsのオプションについて説明していきます。

商品購入ボタンを押下したとき次のようなモーダルが表示されます。

スクリーンショット_2019-06-01_22_14_59.png

data-keyは公式サンプルコードのままでよいです。必須項目です。

###①アイコン
data-imageはべつになくても。。。飾りです。

###②名称
data-nameはこの決済の名称です。

###③説明文
data-descriptionは↑の説明文です。

###④ユーザーのメールアドレス
data-emailはユーザーのメールアドレスを指定してあげることにより、emailアドレスを入力する手間を省いています。
current_userはログイン機能をdeviseで実装しているのでそのユーザー情報が格納されています。
公式のサンプルコードではdata-emailを指定していない為、メールアドレス入力欄が表示されます。

ここで注意点があります。
data-emailを指定する場合は、ユーザー登録時に必ずsample@example.comのような形で登録させるようにしてください。例えばaaa@aaaだとstripe側の保存処理でエラーになってしまいます。
ログイン機能にdeviseを使っている場合はメール認証を実装していれば問題ないと思うのですが、デフォルトの状態ではaaa@aaaでも登録できるので注意です。
data-emailを指定せず、メールアドレス入力欄から入力する仕様の場合はメールアドレスが正しい形でないときは再入力する形になるので問題ないです。

###⑤支払いボタン
data-amountは金額を指定します。ボタンに反映されます。
data-currencyjpyを指定しているので日本円表示になっています。
data-localeautoを指定しているので「を支払う」と自動的に日本語にしてくれています。
うまくいかない場合は"jp"を指定してあげてください。

###⑥決済情報を保存

data-allow-remember-meは決済情報を保存するかどうかのチェックボックスが表示されます。
今回はfalseにしていますが、true及び指定していない場合はこちらが表示されます。

スクリーンショット_2019-06-01_23_03_56.png

決済情報を保存するときはコントローラ側で保存処理が必要だと思うのですが、今回はやっていません。ですが、実装してたらなんとなくわかると思うので試してみてください!

###⑦商品ページの購入ボタンのラベル
data-labelは商品ページの購入ボタンのラベルです。

スクリーンショット 2019-06-01 22.34.27.png

###オプションまとめ

他にもいろいろとオプションがあるのでまとめてみました。

オプション名 内容 実装例
data-image フォームの上部に表示されるアイコン data-image=URL
data-name ショップ名や商品名などの名称 data-name="定期便"
data-description data-nameに対する説明文 data-description="説明文"
data-amount 課金額 data-amount="250"
data-locale 言語を設定
未設定の場合"en"(英語)
data-locale="ja"
data-currency 通貨設定
未設定の場合"USD"
data-currency="JPY"
data-panel-label モーダルの支払いボタンのラベル data-panel-label="250円を支払う"
data-label 親画面の購入ボタンのラベル data-label="購入する"
data-email 決済時に入力が必要となるメールアドレスを予め指定 data-email="sample@example.com"
data-allow-remember-me 決済情報の保存機能を利用するかどうか data-allow-remember-me="false"

##決済処理実装

charges_controller.rb
class ChargesController < ApplicationController

  def create
    @product = Product.find(params[:id])
    customer = Stripe::Customer.create({
      email: params[:stripeEmail],
      source: params[:stripeToken],
    })
    charge = Stripe::Charge.create({
      customer: customer.id,
      amount: @product.price,
      description: "商品ID:#{@product.id} 商品名:#{@product.name}",
      currency: "jpy",
    })
    #rails側の売れたとき処理
    if @product.update(sold_flg: true)
      redirect_to product_path(params[:id]), notice: "商品を購入しました!"
    end
  rescue Stripe::CardError => e
    flash[:error] = e.message
    redirect_to new_charge_path
  end
end

コントローラのコードはほぼほぼ公式のサンプルコードと同じです。

:idは商品のidを渡しているので@productに対象の商品情報を格納します。

Stripe::Customer.createメソッド内ではstripe内でのユーザーを作成しています。
公式のサンプルコードと全く同じで問題ないです。
ただし、クレジット情報を保存していてそのクレジット番号を使うときはstripeTokenを取得する処理が必要です。今回はその説明は除外します。

Stripe::Charge.createは課金情報を保存します。

スクリーンショット 2019-06-02 0.01.55.png

stripeにログインして支払い画面を開くとこのように支払い情報が表示されます。この情報を保存しています。

@product.update(sold_flg: true)の処理はrails側で売れましたよっていう処理です。stripeの説明とはあまり関係ないので簡易的な処理にしてます。仕様に沿って実装してください。

##起動してみる

PUBLISHABLE_KEYSECRET_KEYこちらからログインしてコピってください。

PUBLISHABLE_KEY=pk_test_~~~~~~~~~~ \
SECRET_KEY=sk_test_~~~~~~~~~~ rails s

これで起動できるのですが、毎回このコマンドで起動するのは面倒という方は

stripe.rb作成してあげて

config/initializers/stripe.rb
Rails.configuration.stripe = {
  publishable_key: ENV["PUBLISHABLE_KEY"],
  secret_key: ENV["SECRET_KEY"],
}
Stripe.api_key = Rails.configuration.stripe[:secret_key]

Gemを追加します。

group :development, :test do
  #中略
  gem "dotenv-rails"
end

bundle installしてあげて、ルートディレクトリに.envファイルを作成し、

.env
PUBLISHABLE_KEY="pk_test_~~~~~~~~~~~"
SECRET_KEY="sk_test_~~~~~~~~~~~~"

これでrails sでいけるでしょう。
.envファイルは開発時だけしか使わないと思うのでgitでは除外しておくとよいです。
デプロイ時にも不要です。

##herokuにデプロイ

$ heroku create アプリ名
$ heroku config:set PUBLISHABLE_KEY=pk_test_~~~~~~~~~~ SECRET_KEY=sk_test_~~~~~~~~~
$ git push heroku master
$ heroku open

これだけ!

##おわり

おわり:sleeping:

16
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?