EC-CUBE4系を触ってみた(その2:ローカル環境構築〜Stripe決済導入)

EC-CUBE4系を触ってみた(その2:ローカル環境構築〜Stripe決済導入)

目次

    はじめに

    近年、オンラインサービスやECサイトの拡大に伴い、ユーザーにとって安全かつスムーズな決済体験を提供することがますます重要になっています。その中でも、世界的に利用されているオンライン決済プラットフォーム「Stripe(ストライプ)」は、導入のしやすさや柔軟な機能によって、多くの開発者や企業から支持を集めています。

    本記事では、Stripe決済を自社サービスに導入する際の基本的な流れやポイントについて解説し、初めて触れる方でも理解しやすいようにまとめていきます。

    参考資料

    StripeダッシュボードでEC-CUBEを設定

    ① Stripeにログイン後、マーケットプレイスに遷移します

    ② 検索欄に「EC-CUBE」と入力してアプリを検索し、選択します。

    Stripe App MarketplaceでEC-CUBEを検索した結果画面

    ③ Stripeでは、サンドボックス環境でEC-CUBEのアプリが使用できないので、Try it in test modeをクリックして、テスト環境でインストールします

    EC-CUBEアプリの詳細画面

    Install app in test modeをクリックして、インストールを完了させます

    EC-CUBEアプリのインストール確認画面(テストモード)

    Continue to app settingsをクリックして、詳細画面に遷移します

    EC-CUBEアプリのインストール完了画面

    APIキーを表示をクリックして、公開可能キー制限付きキーをメモします

    EC-CUBEのAPIキー(公開可能キー・制限付きキー)表示画面

    EC-CUBEにStripeプラグインをインストール

    ① EC-CUBEのオーナーズストア>プラグイン>プラグインを探すからStripe決済プラグインでStripe決済プラグインを検索する

    EC-CUBE管理画面でStripe決済プラグインを検索した結果画面

    ② 【入手する】ボタンをクリックして詳細画面に遷移する

    Stripe決済プラグインの詳細画面

    ③ 【インストール】ボタンをクリックしてプラグインをインストール

    Stripe決済プラグインのインストール確認画面

    ④ インストール完了後、オーナーズストア>プラグイン>プラグイン一覧からStripe決済プラグインの設定画面に遷移する

    オーナーズストアのプラグイン一覧画面(Stripe決済プラグインが有効化された状態)

    ⑤ 詳細画面にて、公開可能キー制限付きキーを入力して、決済の承認と請求を別々に行うStripeからの決済完了の通知を受け取るをチェックして【登録】ボタンをクリック

    Stripe決済プラグインの設定画面(APIキー入力欄・環境切り替え)

    ※保存する前に、次のセクションの【Stripe CLIのダウンロード】を完了してください。

    ⑥ 「設定 → 店舗設定 → 配送方法設定」でStripe決済を利用可能な配送業者を選択し、「取り扱う支払方法」の「Stripe決済」を有効化します。

    ⑦ フロントエンドおよび管理画面で正常に動作していることを確認します。

    フロントエンドのお支払い方法詳細画面(Stripe決済でのカード情報入力)

    Stripe CLIのダウンロード

    Stripeを使った開発を始めるには、まずStripe CLI(Command Line Interface)をインストールする必要があります。

    Stripe CLIを使うことで、ローカル環境で決済フローのテストやWebhookの受信が簡単に行えるようになります。

    本記事では、筆者の環境(WSL2 + Docker)を例に、手順をわかりやすく解説します。

    GitHubから、最新のLinux版のtar.gzファイルをダウンロードします。

    tar -xvf stripe_X.X.X_linux_x86_64.tar.gzを使用して、ファイルを解凍します。

    ./stripeを自身の実行パスに移動します。

    ④ ターミナルでstripe loginを実行してStripeにログインします

    ⑤ Enterキーを押し、ブラウザでの認証プロセスを完了します。

    Your pairing code is: xxxx-xxxx-xxxx
    This pairing code verifies your authentication with Stripe.
    Press Enter to open the browser or visit https://dashboard.stripe.com/stripecli/confirm_auth?t=xxxx-xxxx-xxxx-xxxx (^C to quit)
    

    ⑥ 以下のコマンドで、ローカル環境のwebhookを監視します

    stripe listen --forward-to http://172.24.48.1:8080/stripe_payment/webhook
    

    localhostは使用せず、IP/ドメインを使用すること。

    ※(WSL2 + Docker)以外の環境のインストールはStripe CLI使用手順書を参考にしてください。

    終わりに

    今回は、Stripe CLI のダウンロードからテスト環境への切り替えまで、筆者の環境(WSL2 + Docker)を例に手順を紹介しました。

    Stripe を利用すると、安全でスムーズな決済機能を自社サービスに簡単に組み込むことができます。

    今回紹介した手順は、開発環境でのテストに焦点を当てていますが、本番環境への導入時も同じ流れで APIキーを切り替えるだけで対応可能です。

    ※本記事の情報・画像は執筆時点(2025年12月)のものです ※本記事の検証はEC-CUBE 4.3.0系で行っています。

    アジアクエスト株式会社では一緒に働いていただける方を募集しています。
    興味のある方は以下のURLを御覧ください。