spree_gmo_pg 1.0.0

data/README.md

@@ -0,0 +1,58 @@
+# SpreeGmoPg
+
+`spree_gmo_pg` is a Spree extension that adds credit card payments through
+[GMO Payment Gateway](https://www.gmo-pg.com/) (GMO-PG), one of the largest payment
+providers in Japan.
+
+Card details are tokenized in the browser by GMO's own JavaScript SDK, so raw card
+numbers never reach your application.
+
+## Features
+
+- Credit card payment via GMO-PG
+- Tokenization in the browser using the GMO-PG Token SDK
+- 3-D Secure 2.0, including the redirect-and-return flow
+- Optional member management (saved cards) using GMO-PG site credentials
+- Automatic capture for digital-only orders, via
+  [`spree_auto_capture_digital`](https://github.com/be-agile/spree_auto_capture_digital)
+- Test mode that points at GMO's staging endpoints
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'spree_gmo_pg'
+```
+
+Then run:
+
+```bash
+bundle install
+bin/rails g spree_gmo_pg:install
+```
+
+## Configuration
+
+Add the payment method from the Spree admin
+(**Settings → Payment Methods → New**, provider `Spree::PaymentMethod::GmoPg`)
+and fill in the credentials issued by GMO-PG:
+
+| Setting | Meaning |
+|---|---|
+| Shop ID / Shop Password | Identifies your shop. Required |
+| Site ID / Site Password | Only needed if you want to store cards for members |
+| Test mode | On by default. Uses GMO's staging endpoints and SDK |
+
+Leave test mode on until GMO has approved your production account.
+
+## Requirements
+
+- Spree 5.3.6
+- [`active_merchant_gmo_pg`](https://github.com/be-agile/active_merchant_gmo_pg) —
+  the ActiveMerchant gateway this extension builds on
+- A GMO-PG merchant account
+
+## Licence
+
+AGPL-3.0-or-later. See [LICENSE](LICENSE).

data/app/controllers/spree/gmo_pg_callback_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Spree
+  class GmoPgCallbackController < StoreController
+    skip_before_action :verify_authenticity_token, only: [ :callback ]
+
+    def callback
+      @order = Spree::Order.find_by(token: params[:token])
+
+      unless @order
+        Rails.logger.error "[GMO-PG 3DS Callback] Order not found: #{params[:token]}"
+        redirect_to spree.root_path, alert: 'ご注文が見つかりませんでした'
+        return
+      end
+
+      payment = @order.payments.valid.last
+
+      unless payment
+        Rails.logger.error "[GMO-PG 3DS Callback] Payment not found for order: #{@order.number}"
+        redirect_to spree.checkout_state_path(@order.state, token: @order.token)
+        return
+      end
+
+      # GMO-PGから返ってきたAccessIDを検証
+      gmo_pg_data = payment.private_metadata[:gmo_pg] || {}
+
+      if params[:AccessID].present? && gmo_pg_data[:access_id] != params[:AccessID]
+        Rails.logger.warn "[GMO-PG 3DS Callback] AccessID mismatch! Expected: #{gmo_pg_data[:access_id]}, Got: #{params[:AccessID]}"
+      end
+
+      Rails.logger.info "[GMO-PG 3DS Callback] Received callback for order: #{@order.number}"
+
+      # CheckoutController#updateに自動submitするHTMLを返す
+      render :callback, layout: false
+    end
+  end
+end

data/app/controllers/spree/payment_sources_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Spree
+  class PaymentSourcesController < Spree::StoreController
+    before_action :authenticate_user!
+    before_action :load_payment_source
+
+    def destroy
+      # 権限チェック: 自分のカードのみ削除可能
+      unless @payment_source.user_id == spree_current_user.id
+        return render turbo_stream: turbo_stream.update(
+          "saved-cards-#{@payment_source.payment_method_id}",
+          partial: 'spree/shared/error',
+          locals: { message: Spree.t('gmo_pg.unauthorized') }
+        ), status: :forbidden
+      end
+
+      payment_method = @payment_source.payment_method
+
+      begin
+        # disable_customer_profileでGMO-PG削除+DB削除を実行
+        payment_method.disable_customer_profile(@payment_source)
+
+        # 更新後のカード一覧を返す
+        @payment_sources = spree_current_user.payment_sources.where(payment_method: payment_method)
+
+        render turbo_stream: turbo_stream.update(
+          "saved-cards-#{payment_method.id}",
+          partial: 'spree/checkout/payment/saved_cards',
+          locals: { payment_method: payment_method, payment_sources: @payment_sources }
+        )
+      rescue Spree::Core::GatewayError => e
+        render turbo_stream: turbo_stream.update(
+          "saved-cards-#{payment_method.id}",
+          partial: 'spree/shared/error',
+          locals: { message: e.message }
+        ), status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def load_payment_source
+      @payment_source = Spree::CreditCard.includes(:payment_method).find(params[:id])
+    end
+  end
+end

data/app/controllers/spree_gmo_pg/checkout_controller_decorator.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module SpreeGmoPg
+  module CheckoutControllerDecorator
+    # かつては他 engine と Spree::CheckoutControllerDecorator という同一定数を共有しており、
+    # ここで include + ActiveSupport::Concern を使うと共有モジュール全体が本体より後ろに入り、
+    # 他 engine の prepend(load_order 等)を無効化してしまうため prepend が必須だった。
+    # #1307 で engine ごとの名前空間に分離したのでその制約はなくなったが、他 engine の
+    # decorator と形を揃えて prepend + prepended フックのままにしている。
+    # @see https://github.com/be-agile/giga-repeat/issues/1307
+    def self.prepended(base)
+      # 3DSリダイレクトをハンドリング
+      base.around_action :handle_payment_redirect
+    end
+
+    private
+
+    def handle_payment_redirect
+      yield  # 通常のアクション実行
+    rescue Spree::PaymentRedirectRequired => e
+      # 3DSリダイレクトが必要な場合
+      Rails.logger.info "[CheckoutController] Redirecting to 3DS authentication: #{e.redirect_url}"
+
+      # process_payments! の with_lock トランザクションは本例外の伝播で既にロールバック済み。
+      # コールバックでの再処理に必要な Access 情報を、ここ（トランザクション外）で永続化する。
+      Spree::PaymentMethod::GmoPg.persist_3ds_redirect_data(e.payment, e.gmo_pg_data)
+
+      respond_to do |format|
+        format.html { redirect_to e.redirect_url, allow_other_host: true }
+        format.turbo_stream do
+          # Turboリクエストの場合はカスタムredirectアクションを使う
+          escaped_url = ERB::Util.html_escape(e.redirect_url)
+          render turbo_stream: "<turbo-stream action=\"redirect\" url=\"#{escaped_url}\"></turbo-stream>".html_safe
+        end
+      end
+    end
+  end
+end
+
+Spree::CheckoutController.prepend(SpreeGmoPg::CheckoutControllerDecorator)

data/app/javascript/spree_gmo_pg/controllers/gmo_pg_payment_controller.js

@@ -0,0 +1,295 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["numberInput", "expiryInput", "cvvInput", "nameInput", "token", "maskedCard", "errorContainer", "existingCardRadio", "newCardRadio", "newCardForm"]
+  static values = {
+    shopId: String,
+    testMode: { type: Boolean, default: true },
+    errorMessages: Object
+  }
+
+  connect() {
+    // GMO-PG SDK初期化
+    if (typeof Multipayment !== 'undefined') {
+      // テストモードの設定
+      if (this.testModeValue) {
+        Multipayment.init(this.shopIdValue)
+        console.log('GMO-PG SDK initialized (TEST MODE) with shop_id:', this.shopIdValue)
+      } else {
+        Multipayment.init(this.shopIdValue)
+        console.log('GMO-PG SDK initialized (PRODUCTION MODE) with shop_id:', this.shopIdValue)
+      }
+    } else {
+      console.error('Multipayment SDK not loaded')
+    }
+
+    // フォーム送信をインターセプト
+    // bind した関数を保持しないと removeEventListener が効かないため this に退避する。
+    // capture phase(第3引数 true)で登録することで、同じ form の submit を listen する
+    // turbo-stream-form コントローラより先に実行され、トークン未取得時に
+    // stopImmediatePropagation で turbo-stream-form の送信を確実に抑止できる。
+    this.boundHandleSubmit = this.handleSubmit.bind(this)
+    const form = this.element.closest('form')
+    if (form) {
+      form.addEventListener('submit', this.boundHandleSubmit, true)
+    }
+
+    // 初期状態でカード選択状態を処理
+    this.handleCardSelection()
+  }
+
+  disconnect() {
+    const form = this.element.closest('form')
+    if (form && this.boundHandleSubmit) {
+      form.removeEventListener('submit', this.boundHandleSubmit, true)
+    }
+  }
+
+  handleCardSelection() {
+    // 新規カード選択のラジオボタンが存在しない場合は何もしない
+    if (!this.hasNewCardRadioTarget) {
+      return
+    }
+
+    const newCardSelected = this.newCardRadioTarget.checked
+
+    if (newCardSelected) {
+      this.showNewCardForm()
+    } else {
+      this.hideNewCardForm()
+    }
+  }
+
+  showNewCardForm() {
+    if (this.hasNewCardFormTarget) {
+      this.newCardFormTarget.style.display = 'block'
+      this.enableNewCardInputs()
+    }
+  }
+
+  hideNewCardForm() {
+    if (this.hasNewCardFormTarget) {
+      this.newCardFormTarget.style.display = 'none'
+      this.disableNewCardInputs()
+    }
+  }
+
+  enableNewCardInputs() {
+    if (this.hasNewCardFormTarget) {
+      const inputs = this.newCardFormTarget.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.disabled = false
+        if (input.hasAttribute('data-original-required')) {
+          input.required = true
+        }
+      })
+    }
+  }
+
+  disableNewCardInputs() {
+    if (this.hasNewCardFormTarget) {
+      const inputs = this.newCardFormTarget.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.disabled = true
+        if (input.required) {
+          input.setAttribute('data-original-required', 'true')
+          input.required = false
+        }
+      })
+    }
+  }
+
+  handleSubmit(event) {
+    // このコントローラーの要素が非表示の場合（他の支払い方法が選択されている）は何もしない
+    if (this.element.offsetParent === null) {
+      return true
+    }
+
+    // 既存カードが選択されている場合はトークン取得をスキップ
+    if (this.hasExistingCardRadioTarget) {
+      const existingCardSelected = Array.from(this.existingCardRadioTargets || []).some(radio => radio.checked)
+      if (existingCardSelected) {
+        return true
+      }
+    }
+
+    // カード情報が入力されているか確認
+    const hasCardInput = this.hasNumberInputTarget && this.numberInputTarget.value.trim() !== ''
+
+    // トークンが既にセットされていて、かつカード番号が空（既にクリア済み）なら送信続行
+    if (this.hasTokenTarget && this.tokenTarget.value && !hasCardInput) {
+      return true
+    }
+
+    // トークン未取得、またはカード情報が変更された場合はトークンを再取得
+    // stopImmediatePropagation で、同じ form の submit を listen する
+    // turbo-stream-form コントローラがトークン未取得のまま送信してしまうのを防ぐ。
+    // (capture phase で登録しているため turbo-stream-form より先に実行される)
+    event.preventDefault()
+    event.stopImmediatePropagation()
+
+    // エラーメッセージを非表示
+    this.hideError()
+
+    this.getToken()
+    return false
+  }
+
+  getToken() {
+    // 有効期限をMM/YYYY → YYMMに変換
+    const expiry = this.expiryInputTarget.value
+    const [month, year] = expiry.split('/')
+    const yymm = year ? year.slice(-2) + month : ''
+
+    const cardData = {
+      cardno: this.numberInputTarget.value.replace(/\s/g, ''),
+      expire: yymm,
+      securitycode: this.cvvInputTarget.value,
+      holdername: this.nameInputTarget.value,
+      tokennumber: '1'
+    }
+
+    console.log('=== GMO-PG Token Request Debug ===')
+    console.log('Original expiry input:', expiry)
+    console.log('Converted expire (YYMM):', yymm)
+    console.log('Card data being sent:', {
+      cardno: cardData.cardno.replace(/./g, '*'),  // マスク表示
+      expire: cardData.expire,
+      securitycode: '***',
+      holdername: cardData.holdername,
+      tokennumber: cardData.tokennumber
+    })
+    console.log('================================')
+
+    // GMO-PG SDKはbind()を使ったコールバックを受け付けないため、
+    // thisを保持するためにアロー関数でラップする
+    const self = this
+    Multipayment.getToken(cardData, (result) => {
+      self.handleTokenResponse(result)
+    })
+  }
+
+  handleTokenResponse(result) {
+    console.log('Token response:', result)
+
+    // resultCodeは数値または文字列で返ってくる可能性があるため、文字列に変換して比較
+    const resultCodeStr = String(result.resultCode)
+    console.log('resultCodeStr:', resultCodeStr, 'type:', typeof resultCodeStr)
+
+    if (resultCodeStr !== '000') {
+      console.log('Error detected! resultCode:', resultCodeStr)
+      const errorMessage = this.getErrorMessage(result.resultCode)
+      console.log('Error message:', errorMessage)
+      this.showError(errorMessage)
+      return
+    }
+
+    // トークンとマスク済みカード番号をセット
+    this.tokenTarget.value = result.tokenObject.token
+
+    // マスク済みカード番号から下4桁を抽出
+    const maskedCard = result.tokenObject.maskedCardNo
+    const lastDigits = maskedCard.replace(/\*/g, '').slice(-4)
+    this.maskedCardTarget.value = lastDigits
+
+    console.log('Token acquired successfully')
+
+    // 生カード情報をクリア（セキュリティ対策）
+    this.numberInputTarget.value = ''
+    this.cvvInputTarget.value = ''
+
+    // フォーム送信
+    // トークン取得が完了したのでフォームを送信する。
+    // form.submit() はネイティブ送信で submit イベントを発火しないため、
+    // capture phase で登録した handleSubmit が再度呼ばれて二重にトークン取得を
+    // 試みることがなく、確実に1回だけ送信できる。
+    const form = this.element.closest('form')
+    if (form) {
+      form.submit()
+    }
+  }
+
+  getErrorMessage(resultCode) {
+    // GMO-PGエラーコードに応じたメッセージ（i18n対応）
+    const codeStr = String(resultCode)
+    const prefix = codeStr.substring(0, 3)
+    const messages = this.errorMessagesValue
+    return messages[prefix] || `${messages['default']} (${codeStr})`
+  }
+
+  showError(message) {
+    // エラーメッセージをフォーム上部に表示
+    if (this.hasErrorContainerTarget) {
+      this.errorContainerTarget.textContent = message
+      this.errorContainerTarget.style.display = 'block'
+
+      // フォーム上部にスムーズスクロール
+      this.errorContainerTarget.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      })
+    } else {
+      // フォールバック: エラーコンテナがない場合はalertを使用
+      console.error('Error container not found! Using alert fallback.')
+      alert(message)
+    }
+  }
+
+  hideError() {
+    // エラーメッセージを非表示
+    if (this.hasErrorContainerTarget) {
+      this.errorContainerTarget.style.display = 'none'
+      this.errorContainerTarget.textContent = ''
+    }
+  }
+
+  deleteCard(event) {
+    // カード削除処理
+    event.preventDefault()
+
+    const button = event.currentTarget
+    const url = button.dataset.url
+    const turboFrame = button.dataset.turboFrame
+    const confirmMessage = button.dataset.turboConfirm
+
+    // 確認ダイアログを表示
+    if (!confirm(confirmMessage)) {
+      console.log('Card deletion cancelled by user')
+      return
+    }
+
+    console.log('Deleting card:', url)
+
+    // CSRFトークンを取得
+    const csrfToken = document.querySelector('[name="csrf-token"]')?.content
+
+    // DELETEリクエストを送信
+    fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-Token': csrfToken,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      credentials: 'same-origin'
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      return response.text()
+    })
+    .then(html => {
+      // Turbo Streamレスポンスを処理してDOMを更新
+      if (typeof Turbo !== 'undefined' && Turbo.renderStreamMessage) {
+        Turbo.renderStreamMessage(html)
+        console.log('Card deleted successfully')
+      } else {
+        console.error('Turbo is not available')
+      }
+    })
+    .catch(error => {
+      console.error('Card deletion failed:', error)
+      alert('カードの削除に失敗しました。もう一度お試しください。')
+    })
+  }
+}

data/app/javascript/spree_gmo_pg/index.js

@@ -0,0 +1,11 @@
+import { lazyLoadControllersFromManifest } from "spree/storefront/helpers/lazy_load_controllers_with_manifest"
+
+const controllers = ["gmo-pg-payment"]
+const manifest = {
+  "gmo-pg-payment": "spree_gmo_pg/controllers/gmo_pg_payment_controller"
+}
+
+document.addEventListener('turbo:load', function() {
+  const application = window.Stimulus
+  lazyLoadControllersFromManifest(controllers, null, application, manifest)
+});