[89]Bootstrap | クレジットカード決済 | Stripe(ストライプ)<< [ホームに戻る] >> [91]Bootstrap | ページネーション
「42 | クレジットカード決済 | Stripe(ストライプ)コネクト」をBootstrapの記述に書き換えます。
お部屋を登録したホストに宿泊料金の80%が自動で支払われるように設定します。
これにはStripeコネクトというサービスを使いますが、プランに「スタンダード」と「エクスプレス」があります。
「エクスプレス」の方がホストの登録や設定が楽なので「エクスプレス」で実装していきます。
「テスト環境のクライアント ID」の取得方法は下記の手順でお願いします。
mrradiology.hatenablog.jp
どんな画像でも良いので、「stripe_button.png」を「app\assets\images」フォルダにコピーしておいてください。
記述追加 GemFile(85行目)
gem 'omniauth-stripe-connect', '~> 2.10.0'
GemFile
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.6' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.3' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'sass-rails', '>= 6' # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker gem 'webpacker', '~> 4.0' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Active Storage variant # gem 'image_processing', '~> 1.2' # Reduces boot times through caching; required in config/boot.rb gem 'bootsnap', '>= 1.4.2', require: false group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] end group :development do # Access an interactive console on exception pages or by calling 'console' anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :test do # Adds support for Capybara system testing and selenium driver gem 'capybara', '>= 2.15' gem 'selenium-webdriver' # Easy installation and use of web drivers to run system tests with browsers gem 'webdrivers' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # デバイス gem 'devise' # 日本語化 gem 'rails-i18n' # アマゾンS3 gem "aws-sdk" # アクションテキスト画像表示 gem "mini_magick" gem 'image_processing', '~> 1.2' #googleマップ gem 'geocoder', '~> 1.4' #facebook認証 gem 'omniauth', '= 1.9.0' gem 'omniauth-facebook', '= 5.0.0' #Google認証 gem 'omniauth-google-oauth2' # 検索 gem 'ransack', '~> 2.3' # stripe gem 'stripe', '=4.18.1' # stripeコネクト gem 'omniauth-stripe-connect', '~> 2.10.0'
コマンド
bundle
ユーザテーブルにStripeコネクトのIDを入れるカラムを作成します。
コマンド
rails g migration AddMerchantIdToUser merchant_id
コマンド マイグレーション適用
rails db:migrate
「app\models\user.rb」ファイルを編集します。
記述追加 app\models\user.rb(18行目)
def is_active_host !self.merchant_id.blank? end
app\models\user.rb
class User < ApplicationRecord has_many :rooms has_many :reservations has_many :guest_reviews, class_name: "GuestReview", foreign_key: "guest_id" has_many :host_reviews, class_name: "HostReview", foreign_key: "host_id" has_one_attached :avatar # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, :confirmable, :omniauthable validates :full_name, presence: true, length: {maximum: 50} def is_active_host !self.merchant_id.blank? end def self.from_omniauth(auth) user = User.where(email: auth.info.email).first if user if !user.provider user.update(uid: auth.uid, provider: auth.provider, image: auth.info.image) end return user else where(provider: auth.provider, uid: auth.uid).first_or_create do |user| user.email = auth.info.email user.password = Devise.friendly_token[0, 20] user.full_name = auth.info.name # ユーザーモデルに名前があると仮定 user.image = auth.info.image # ユーザーモデルに画像があると仮定 user.uid = auth.uid user.provider = auth.provider end end end end
テスト環境のクライアントIDを確認します。
Stripeダッシュボードで右上の歯車マーク(設定)をクリックし、Connectの「設定」をクリックします。
下へ進み、テスト環境のクライアントIDをコピーします。
記述追加 config\initializers\devise.rb(325行目)
ご自分のテスト環境のクライアント IDとシークレットキーを入れて下さい。
シークレットキーはStripe APIキーのシークレットキーです。
# stripeコネクト # 最初にテスト環境のクライアント ID(コネクトのID) ca_ # 次にシークレットキー sk_test_ config.omniauth :stripe_connect, 'ご自分のクライアントIDを入れてください', 'ご自分のシークレットキーを入れてください', scope: 'read_write', stripe_landing: 'login'
config\initializers\devise.rb
# frozen_string_literal: true # Assuming you have not yet modified this file, each configuration option below # is set to its default value. Note that some are commented out while others # are not: uncommented lines are intended to protect your configuration from # breaking changes in upgrades (i.e., in the event that future versions of # Devise change the default values for those options). # # Use this hook to configure devise mailer, warden hooks and so forth. # Many of these configuration options can be set straight in your model. Devise.setup do |config| # The secret key used by Devise. Devise uses this key to generate # random tokens. Changing this key will render invalid all existing # confirmation, reset password and unlock tokens in the database. # Devise will use the `secret_key_base` as its `secret_key` # by default. You can change it below and use your own secret key. # config.secret_key = '32204ae839654bd9f63a7990f6c7ba06ae608a6855c9c1092e9c94852a964df00dcb8865ba401f988ba8c68b47468e04f876b679a8d8a9b917aa70e973e61943' # ==> Controller configuration # Configure the parent class to the devise controllers. # config.parent_controller = 'DeviseController' # ==> Mailer Configuration # Configure the e-mail address which will be shown in Devise::Mailer, # note that it will be overwritten if you use your own mailer class # with default "from" parameter. config.mailer_sender = 'win.rails.learn@gmail.com' # Configure the class responsible to send e-mails. # config.mailer = 'Devise::Mailer' # Configure the parent class responsible to send e-mails. # config.parent_mailer = 'ActionMailer::Base' # ==> ORM configuration # Load and configure the ORM. Supports :active_record (default) and # :mongoid (bson_ext recommended) by default. Other ORMs may be # available as additional gems. require 'devise/orm/active_record' # ==> Configuration for any authentication mechanism # Configure which keys are used when authenticating a user. The default is # just :email. You can configure it to use [:username, :subdomain], so for # authenticating a user, both parameters are required. Remember that those # parameters are used only when authenticating and not when retrieving from # session. If you need permissions, you should implement that in a before filter. # You can also supply a hash where the value is a boolean determining whether # or not authentication should be aborted when the value is not present. # config.authentication_keys = [:email] # Configure parameters from the request object used for authentication. Each entry # given should be a request method and it will automatically be passed to the # find_for_authentication method and considered in your model lookup. For instance, # if you set :request_keys to [:subdomain], :subdomain will be used on authentication. # The same considerations mentioned for authentication_keys also apply to request_keys. # config.request_keys = [] # Configure which authentication keys should be case-insensitive. # These keys will be downcased upon creating or modifying a user and when used # to authenticate or find a user. Default is :email. config.case_insensitive_keys = [:email] # Configure which authentication keys should have whitespace stripped. # These keys will have whitespace before and after removed upon creating or # modifying a user and when used to authenticate or find a user. Default is :email. config.strip_whitespace_keys = [:email] # Tell if authentication through request.params is enabled. True by default. # It can be set to an array that will enable params authentication only for the # given strategies, for example, `config.params_authenticatable = [:database]` will # enable it only for database (email + password) authentication. # config.params_authenticatable = true # Tell if authentication through HTTP Auth is enabled. False by default. # It can be set to an array that will enable http authentication only for the # given strategies, for example, `config.http_authenticatable = [:database]` will # enable it only for database authentication. # For API-only applications to support authentication "out-of-the-box", you will likely want to # enable this with :database unless you are using a custom strategy. # The supported strategies are: # :database = Support basic authentication with authentication key + password # config.http_authenticatable = false # If 401 status code should be returned for AJAX requests. True by default. # config.http_authenticatable_on_xhr = true # The realm used in Http Basic Authentication. 'Application' by default. # config.http_authentication_realm = 'Application' # It will change confirmation, password recovery and other workflows # to behave the same regardless if the e-mail provided was right or wrong. # Does not affect registerable. # config.paranoid = true # By default Devise will store the user in session. You can skip storage for # particular strategies by setting this option. # Notice that if you are skipping storage for all authentication paths, you # may want to disable generating routes to Devise's sessions controller by # passing skip: :sessions to `devise_for` in your config/routes.rb config.skip_session_storage = [:http_auth] # By default, Devise cleans up the CSRF token on authentication to # avoid CSRF token fixation attacks. This means that, when using AJAX # requests for sign in and sign up, you need to get a new CSRF token # from the server. You can disable this option at your own risk. # config.clean_up_csrf_token_on_authentication = true # When false, Devise will not attempt to reload routes on eager load. # This can reduce the time taken to boot the app but if your application # requires the Devise mappings to be loaded during boot time the application # won't boot properly. # config.reload_routes = true # ==> Configuration for :database_authenticatable # For bcrypt, this is the cost for hashing the password and defaults to 12. If # using other algorithms, it sets how many times you want the password to be hashed. # The number of stretches used for generating the hashed password are stored # with the hashed password. This allows you to change the stretches without # invalidating existing passwords. # # Limiting the stretches to just one in testing will increase the performance of # your test suite dramatically. However, it is STRONGLY RECOMMENDED to not use # a value less than 10 in other environments. Note that, for bcrypt (the default # algorithm), the cost increases exponentially with the number of stretches (e.g. # a value of 20 is already extremely slow: approx. 60 seconds for 1 calculation). config.stretches = Rails.env.test? ? 1 : 12 # Set up a pepper to generate the hashed password. # config.pepper = 'e5ed481f9edff1111c47541d16cacaf5cfcca3a033dbb4e53df12ca0fc50094dcd77c1328e849b14ff5cd9a6723ccde0dc353a5dbcfd59f791ca72410c238556' # Send a notification to the original email when the user's email is changed. # config.send_email_changed_notification = false # Send a notification email when the user's password is changed. # config.send_password_change_notification = false # ==> Configuration for :confirmable # A period that the user is allowed to access the website even without # confirming their account. For instance, if set to 2.days, the user will be # able to access the website for two days without confirming their account, # access will be blocked just in the third day. # You can also set it to nil, which will allow the user to access the website # without confirming their account. # Default is 0.days, meaning the user cannot access the website without # confirming their account. # config.allow_unconfirmed_access_for = 2.days # A period that the user is allowed to confirm their account before their # token becomes invalid. For example, if set to 3.days, the user can confirm # their account within 3 days after the mail was sent, but on the fourth day # their account can't be confirmed with the token any more. # Default is nil, meaning there is no restriction on how long a user can take # before confirming their account. # config.confirm_within = 3.days # If true, requires any email changes to be confirmed (exactly the same way as # initial account confirmation) to be applied. Requires additional unconfirmed_email # db field (see migrations). Until confirmed, new email is stored in # unconfirmed_email column, and copied to email column on successful confirmation. config.reconfirmable = false # Defines which key will be used when confirming an account # config.confirmation_keys = [:email] # ==> Configuration for :rememberable # The time the user will be remembered without asking for credentials again. # config.remember_for = 2.weeks # Invalidates all the remember me tokens when the user signs out. config.expire_all_remember_me_on_sign_out = true # If true, extends the user's remember period when remembered via cookie. # config.extend_remember_period = false # Options to be passed to the created cookie. For instance, you can set # secure: true in order to force SSL only cookies. # config.rememberable_options = {} # ==> Configuration for :validatable # Range for password length. config.password_length = 6..128 # Email regex used to validate email formats. It simply asserts that # one (and only one) @ exists in the given string. This is mainly # to give user feedback and not to assert the e-mail validity. config.email_regexp = /\A[^@\s]+@[^@\s]+\z/ # ==> Configuration for :timeoutable # The time you want to timeout the user session without activity. After this # time the user will be asked for credentials again. Default is 30 minutes. # config.timeout_in = 30.minutes # ==> Configuration for :lockable # Defines which strategy will be used to lock an account. # :failed_attempts = Locks an account after a number of failed attempts to sign in. # :none = No lock strategy. You should handle locking by yourself. # config.lock_strategy = :failed_attempts # Defines which key will be used when locking and unlocking an account # config.unlock_keys = [:email] # Defines which strategy will be used to unlock an account. # :email = Sends an unlock link to the user email # :time = Re-enables login after a certain amount of time (see :unlock_in below) # :both = Enables both strategies # :none = No unlock strategy. You should handle unlocking by yourself. # config.unlock_strategy = :both # Number of authentication tries before locking an account if lock_strategy # is failed attempts. # config.maximum_attempts = 20 # Time interval to unlock the account if :time is enabled as unlock_strategy. # config.unlock_in = 1.hour # Warn on the last attempt before the account is locked. # config.last_attempt_warning = true # ==> Configuration for :recoverable # # Defines which key will be used when recovering the password for an account # config.reset_password_keys = [:email] # Time interval you can reset your password with a reset password key. # Don't put a too small interval or your users won't have the time to # change their passwords. config.reset_password_within = 6.hours # When set to false, does not sign a user in automatically after their password is # reset. Defaults to true, so a user is signed in automatically after a reset. # config.sign_in_after_reset_password = true # ==> Configuration for :encryptable # Allow you to use another hashing or encryption algorithm besides bcrypt (default). # You can use :sha1, :sha512 or algorithms from others authentication tools as # :clearance_sha1, :authlogic_sha512 (then you should set stretches above to 20 # for default behavior) and :restful_authentication_sha1 (then you should set # stretches to 10, and copy REST_AUTH_SITE_KEY to pepper). # # Require the `devise-encryptable` gem when using anything other than bcrypt # config.encryptor = :sha512 # ==> Scopes configuration # Turn scoped views on. Before rendering "sessions/new", it will first check for # "users/sessions/new". It's turned off by default because it's slower if you # are using only default views. # config.scoped_views = false # Configure the default scope given to Warden. By default it's the first # devise role declared in your routes (usually :user). # config.default_scope = :user # Set this configuration to false if you want /users/sign_out to sign out # only the current scope. By default, Devise signs out all scopes. # config.sign_out_all_scopes = true # ==> Navigation configuration # Lists the formats that should be treated as navigational. Formats like # :html, should redirect to the sign in page when the user does not have # access, but formats like :xml or :json, should return 401. # # If you have any extra navigational formats, like :iphone or :mobile, you # should add them to the navigational formats lists. # # The "*/*" below is required to match Internet Explorer requests. # config.navigational_formats = ['*/*', :html] # The default HTTP method used to sign out a resource. Default is :delete. config.sign_out_via = :delete # ==> OmniAuth # Add a new OmniAuth provider. Check the wiki for more information on setting # up on your models and hooks. # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo' # ==> Warden configuration # If you want to use other strategies, that are not supported by Devise, or # change the failure app, you can configure them inside the config.warden block. # # config.warden do |manager| # manager.intercept_401 = false # manager.default_strategies(scope: :user).unshift :some_external_strategy # end # ==> Mountable engine configurations # When using Devise inside an engine, let's call it `MyEngine`, and this engine # is mountable, there are some extra configurations to be taken into account. # The following options are available, assuming the engine is mounted as: # # mount MyEngine, at: '/my_engine' # # The router that invoked `devise_for`, in the example above, would be: # config.router_name = :my_engine # # When using OmniAuth, Devise cannot automatically set OmniAuth path, # so you need to do it manually. For the users scope, it would be: # config.omniauth_path_prefix = '/my_engine/users/auth' # ==> Turbolinks configuration # If your app is using Turbolinks, Turbolinks::Controller needs to be included to make redirection work correctly: # # ActiveSupport.on_load(:devise_failure_app) do # include Turbolinks::Controller # end # ==> Configuration for :registerable # When set to false, does not sign a user in automatically after their password is # changed. Defaults to true, so a user is signed in automatically after changing a password. # config.sign_in_after_change_password = true # アプリIDとシークレットはご自分のものを入れてください。 config.omniauth :facebook, "ご自分のアプリIDを入れてください, "ご自分のシークレットを入れてください", scope: 'email', info_fields: 'email,name', image_size: 'large' #クライアントID クライアントシークレット はご自分のものを入れてください。 config.omniauth :google_oauth2, 'ご自分のクライアントIDを入れてください', 'ご自分のクライアントシークレットを入れてください', {access_type: "offline", approval_prompt: "", skip_jwt: true} # stripeコネクト # 最初にテスト環境のクライアント ID(コネクトのID) ca_ # 次にシークレットキー sk_test_ config.omniauth :stripe_connect, 'ご自分のクライアントIDを入れてください', 'ご自分のシークレットキーを入れてください', scope: 'read_write', stripe_landing: 'login' end
記述追加 app\helpers\application_helper.rb(22行目)
「client_id=」と「&scope=read_write」の間にご自分のテスト環境のクライアント ID(コネクトのID)を入れて下さい。
# テスト環境のクライアント ID(コネクトのID) ca_ def stripe_express_path "https://connect.stripe.com/express/oauth/authorize?response_type=code&client_id=ご自分のクライアントIDを入れてください&scope=read_write" end
app\helpers\application_helper.rb
module ApplicationHelper def avatar_url(user) if user.avatar.attached? url_for(user.avatar) elsif user.image? user.image else ActionController::Base.helpers.asset_path('icon_default_avatar.jpg') end end def room_cover(room) if room.photos.attached? url_for(room.photos[0]) else ActionController::Base.helpers.asset_path('blank.jpg') end end # テスト環境のクライアント ID(コネクトのID) ca_HZ3ThjQzLs4VUBN4g4EgIYwyICozH1iy def stripe_express_path "https://connect.stripe.com/express/oauth/authorize?response_type=code&client_id=ca_HZ3ThjQzLs4VUBN4g4EgIYwyICozH1iy&scope=read_write" end end
記述追加 app\controllers\users_controller.rb(51行目)
def payout if !current_user.merchant_id.blank? account = Stripe::Account.retrieve(current_user.merchant_id) @login_link = account.login_links.create() end end
app\controllers\users_controller.rb
class UsersController < ApplicationController before_action :authenticate_user! def dashboard end def show @user = User.find(params[:id]) @rooms = @user.rooms # ユーザーがホストの場合、ホストに対するすべてのゲストレビューを表示 @guest_reviews = Review.where(type: "GuestReview", host_id: @user.id) # ユーザーがゲストの場合、ユーザに対するすべてのホストレビューを表示 @host_reviews = Review.where(type: "HostReview", guest_id: @user.id) end def update @user = current_user if @user.update_attributes(current_user_params) flash[:notice] = "保存しました" else flash[:alert] = "更新できません" end redirect_to dashboard_path end def update_payment if !current_user.stripe_id customer = Stripe::Customer.create( email: current_user.email, source: params[:stripeToken] ) else customer = Stripe::Customer.update( current_user.stripe_id, source: params[:stripeToken] ) end if current_user.update(stripe_id: customer.id, stripe_last_4: customer.sources.data.first["last4"]) flash[:notice] = "新しいカード情報が登録されました" else flash[:alert] = "無効なカードです" end redirect_to request.referrer rescue Stripe::CardError => e flash[:alert] = e.message redirect_to request.referrer end def payout if !current_user.merchant_id.blank? account = Stripe::Account.retrieve(current_user.merchant_id) @login_link = account.login_links.create() end end private def current_user_params params.require(:user).permit(:about, :status, :avatar) end end
ルートの設定をします。
17行目に以下の記述を追加します。
get 'settings/payout', to: 'users#payout', as: 'settings_payout'
config\routes.rb
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'user' get '/your_trips' => 'reservations#your_trips' get '/your_reservations' => 'reservations#your_reservations' get 'search' => 'pages#search' get 'settings/payment', to: 'users#payment', as: 'settings_payment' get 'settings/payout', to: 'users#payout', as: 'settings_payout' post '/users/edit', to: 'users#update' post '/settings/payment', to: 'users#update_payment', as: "update_payment" resources :rooms, except: [:edit] do member do get 'listing' get 'pricing' get 'description' get 'photo_upload' get 'amenities' get 'location' get 'preload' get 'preview' delete :delete_photo post :upload_photo end resources :reservations, only: [:create] end resources :guest_reviews, only: [:create, :destroy] resources :host_reviews, only: [:create, :destroy] resources :reservations, only: [:approve, :decline] do member do post '/approve' => "reservations#approve" post '/decline' => "reservations#decline" end end # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
「app/controllers/omniauth_callbacks_controller.rb」ファイルに以下の記述を追加します。(29行目)
def stripe_connect auth_data = request.env["omniauth.auth"] @user = current_user if @user.persisted? @user.merchant_id = auth_data.uid @user.save if !@user.merchant_id.blank? # 支払いスケジュールを更新する account = Stripe::Account.retrieve(current_user.merchant_id) # 決算の15日後にお支払い account.settings.payouts.schedule.delay_days = 15 account.save logger.debug "#{account}" end sign_in_and_redirect @user, event: :authentication flash[:notice] = "ストライプアカウントを作成し接続しました。" if is_navigational_format? else session["devise.stripe_connect_data"] = request.env["omniauth.auth"] redirect_to dashboard_path end end
app\controllers\omniauth_callbacks_controller.rb
class OmniauthCallbacksController < Devise::OmniauthCallbacksController def facebook @user = User.from_omniauth(request.env["omniauth.auth"]) if @user.persisted? sign_in_and_redirect @user, event: :authentication # @userがアクティブ化されていない場合 set_flash_message(:notice, :success, kind: "Facebook") if is_navigational_format? else session["devise.facebook_data"] = request.env["omniauth.auth"] redirect_to new_user_registration_url end end def google_oauth2 # 以下のメソッドをモデルに実装する必要があります(app/models/user.rb) @user = User.from_omniauth(request.env['omniauth.auth']) if @user.persisted? flash[:notice] = I18n.t 'devise.omniauth_callbacks.success', kind: 'Google' sign_in_and_redirect @user, event: :authentication else session['devise.google_data'] = request.env['omniauth.auth'].except(:extra) redirect_to new_user_registration_url, alert: @user.errors.full_messages.join("\n") end end def stripe_connect auth_data = request.env["omniauth.auth"] @user = current_user if @user.persisted? @user.merchant_id = auth_data.uid @user.save if !@user.merchant_id.blank? # 支払いスケジュールを更新する account = Stripe::Account.retrieve(current_user.merchant_id) # 決算の15日後にお支払い account.settings.payouts.schedule.delay_days = 15 account.save logger.debug "#{account}" end sign_in_and_redirect @user, event: :authentication flash[:notice] = "ストライプアカウントを作成し接続しました。" if is_navigational_format? else session["devise.stripe_connect_data"] = request.env["omniauth.auth"] redirect_to dashboard_path end end def failure redirect_to root_path end end
「app\views\users」フォルダに「payout.html.erb」ファイルを新規作成してください。
app\views\users\payout.html.erb(新規作成したファイル)
<div class="row" style="margin-left: 150px;"> <div class="col-sm-7"> <br/> <div class="card text-center"> <h4 class="card-header text-center"> <% if current_user.merchant_id.blank? %> <p class="title has-text-centered">振込先の登録</p> <div class="card" style="text-align: center;"> <br/> <p> Stripeというサービスを利用して振込先を登録します。<br/> 民泊で得た報酬はここで登録した振込先に振り込まれます。<br/> <br/> <br/> <p>下のボタンを押してアカウントに振込先を登録して下さい。</p> <br/> <%= link_to image_tag('stripe_button.png'), stripe_express_path %> <br/> <br/> <% else %> <p class="title has-text-centered">振込金額の確認</p> <div class="card" style="text-align: center;"> <br/> <p> 民泊で得た報酬に対する振込金額をここで確認することができます。<br/> </p> <br/> <br/> <p>下のボタンを押すと振り込み金額の確認ができます。</p> <br/> <div class="text-center"> <%= link_to "売上金額の確認", @login_link.url, class: "button is-primary" %> </div> <br/> <br/> <% end %> </h4> </div> </div> </div> <script> var toggle_modals = $('.toggle-contact'); if (toggle_modals) { toggle_modals.on('click', function(event) { event.stopPropagation(); event.preventDefault(); var form = document.getElementById('contact-form'); form.classList.toggle('is-active'); }); } </script>
ナビゲーションバーのリンクを追加します。
記述追加 app\views\shared\_navbar.html.erb(58行目)
<span class="dropdown-item"><i class="far fa-credit-card"></i></i><%= link_to "振込口座の登録", settings_payout_path, class: "btn btn-white" %></span>
app\views\shared\_navbar.html.erb
<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"> <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %> </li> <li class="nav-item"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %> </li> <!-- ログインしていたら --> <% else %> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <figure class="avatar <%= current_user.status ? "online" : "offline" %>"></figure> <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %> <%= current_user.full_name %> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span> <hr/> <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span> </div> </li> <% end %> </ul> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 4;"> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;"> <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span><%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %> </li> <li class="nav-item dropdown" style="margin-right: 50px;"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-hospital-symbol"></i> ホスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="fas fa-edit"></i></i><%= link_to "お部屋を新規登録", new_room_path, class: "btn btn-white" %></span> <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "登録したお部屋一覧", rooms_path, class: "btn btn-white" %></span> <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "受注予約の管理", your_reservations_path, class: "btn btn-white" %></span> <span class="dropdown-item"><i class="far fa-credit-card"></i></i><%= link_to "振込口座の登録", settings_payout_path, class: "btn btn-white" %></span> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-user-friends"></i> ゲスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "ご予約の確認", your_trips_path, class: "btn btn-white" %></span> <span class="dropdown-item"><i class="far fa-credit-card"></i><%= link_to 'クレジットカード登録', settings_payment_path, class: "btn btn-white", data: { turbolinks: false} %></span> </div> </li> </ul> </div> </nav> <% end %>
「app/assets/config/manifest.js」ファイルに記述を追加します。
記述追加 app/assets/config/manifest.js(3行目)
//= link stripe_button.png
app/assets/config/manifest.js
//= link_tree ../images //= link_directory ../stylesheets .css //= link stripe_button.png
以下の画像を「app/assets/images」フォルダに「stripe_button.png」という名前で保存してください。
ブラウザ確認
http://localhost:3000/settings/payout
コネクトボタンを押すとホストの振込口座の登録ができます。
テストで登録をしてみます。
SMSに送られたPINコードを入力します。
ホストの必要な情報を入力したら次へ進みます。
振込口座はテスト口座を使います。
完了して接続してみます。
ストライプコネクトとの連結が成功しました。
「merchant_id」にストライプのIDが格納されています。
ストライプのダッシュボードページで連結されたアカウントの詳細が確認できます。
登録したホストへストライプからメールが届きます。
↓↓クリックして頂けると励みになります。
[89]Bootstrap | クレジットカード決済 | Stripe(ストライプ)<< [ホームに戻る] >> [91]Bootstrap | ページネーション