tapitapi’s blog

1日1杯タピオカ!エンジニア

【Ruby on Rails】Square でOnline決済実装 Checkout編

Ruby on rails で作られたサイト内にOnline決済(Square)を実装する方法を紹介します。

 

Squareってなに?という方は、下記が参考になれば。

tapitapi.hatenadiary.com

 

まず前提として、Online決済は大まかに分けて二種類(Checkout & Payment)存在します。

 

どっちも支払い(Payment)じゃないんか??というツッコミはちょっと置いといて、、、

 

Checkout

決済の際にSquareドメインに移動してカード情報を入力。決済完了後、指定したURL(自分のドメイン)に戻ってくる。

 

メリット:

*フォーム(カード情報入力欄)を作成しなくていい

*エラー処理を実装しなくてよい(カード決済が成功したときのみ指定URLに戻ってくるため)

 

デメリット:

*UI&UXは変更できない。ユーザフレンドリーではない。(いきなり外部サイトに遷移するため)

*在庫管理と連動したり、決済の戻り値(決済が成功か不成功か)によって処理を変えるなど、複雑な処理を実装できない。

(指定URLに戻ってきた時に、Sessionがすべてクリアされる。そのため、特にデータベースが入っていないサイトだと、決済後の自動メール送信なども実装が難しくなる)

 

Payment

決済は全て自分のドメイン内で行われる。

 

メリット:

*見た目を変更できる。ユーザフレンドリー。

*複雑な処理と連動できる。

 

デメリット:

*フォームやエラー処理をすべて自分で実装する必要あり。

 

今回は、Checkoutの実装方法を紹介します。

 

1.まずgem 'square.rb'をgemflieに追加

github.com

 

Gemfile

 

gem 'square.rb'

 

いつも通り、Gemを追加したのでbundle installします

 

 

2.Checkout用のcontrollerとviewとroutesを作成

(今回は、一人のユーザに一回のみ支払いさせる(スポーツジムの登録料支払いなど?)を想定)

Checkouts_Controller.rb 

class CheckoutsController < ApplicationController

 require 'square'

 require 'securerandom'

 before_action :set_user

 

 def checkout; end

 def checkout_api

   client = Square::Client.new( access_token: ENV['SQUARE_TOKEN'],environment: ENV['SQUARE_ENV'])

 

   checkout_api = client.checkout

 

   result = checkout_api.create_checkout(location_id: ENV['SQUARE_LOCATION_ID'], body: square_params)

 

   if result.success?

    redirect_to result.data[:checkout][:checkout_page_url]

   elsif result.error?

    render : checkout

   end

 

 end

 

 def thanks; end

 

 private

 

 def set_user

   @user = User.find(params[:id])

 end

 

 def square_params

  redirect_url = ENV['SQUARE_ENV'] == 'sandbox' ? "http://localhost:3000/checkouts/#{params[:id]}/thanks" : "production_url"

  order = {
    reference_id: "test",
    line_items: [
     {
      name: 'test',

      quantity: '1',
      base_price_money:
      {
       amount: 1000,
       currency: 'JPY'
      }
    }
  ]
 }

 

 {
   idempotency_key: SecureRandom.uuid,
   order: order,
   redirect_url: redirect_url
 }

 end

end

上記result(response json)は、コチラを参考に。

POST /v2/locations/{location_id}/checkouts- Square API Reference

 

上記square paramsのカスタマイズは、コチラを参考に。

API Explorer - POST /v2/locations/{location_id}/checkouts- Square API Reference

 

 

checkout.html.erb (form部分だけ。ヘッダなどは省略)

<%= simple_form_for(@user, url: checkout_checkout_path(:id => @user.id)) do |f| %>

   <%= f.button :submit %>
<% end %>

 

thanks.html.erb (ヘッダなどは省略)

<div>
  <h1>支払い完了!ありがとうございます</h1>

</div>

 

routes.rb

get 'checkouts/:id/checkout', to: 'checkouts#checkout',as: :checkout_checkout
post 'checkouts/:id/checkout', to: 'checkouts#checkout_api'
patch 'checkouts/:id/checkout', to: 'checkouts#checkout_api'
get 'checkouts/:id/thanks', to: 'contracts#thanks',as: :checkout_thanks

 

 

3.access token, location idの取得

まず、squareのaccountを作成し、アプリを作成

squareup.com

 

その後sandboxのaccess token, location idの取得

developer.squareup.com

 

access tokenは「credential」タブですが、location idは同じページの「location」タブにあります

 

4..envファイルに取得したtokenなどを記載

.env (sandbox用なので、本番環境では本番用のtokenやlocation idを環境変数に記載)

SQUARE_TOKEN=EAAAEJ... 
SQUARE_LOCATION_ID=SX2...
SQUARE_ENV=sandbox 

 

以上です!!!

 

payment編もいつか取り扱えればと思います。

 

おやすみなさいいいいぃぃぃ