WooCommerceに標準装備されている決済方法の1つがStripeです。
クレジットカード決済をかんたんに組み込めるStripeですが、はじめてWooCommerceと連携する人にとっては、少々複雑な設定画面に困惑してしまうでしょう。
そこで本記事では、WooCommerceとStripeを連携する設定方法を解説します。参考画像をたくさん付けましたので、見様見真似で設定してみてくださいね。
目次
プラグインのインストール
はじめにWooCommerce Stripe Payment Gatewayを、WordPressにインストールします。
WooCommerce Stripe Payment Gateway
WordPressの管理画面より「プラグイン」→「新規追加」の順で進んでください。
検索欄に「Stripe」と入力すると、WooCommerce Stripe Payment Gatewayが表示されます。「今すぐインストール」をクリックした後「有効化」しておきましょう。
Stripeアカウントの作成
次にStripeのアカウントを作成します。
サイトが表示されたら「今すぐ始める」をクリックしてください。「Stripeアカウントの作成」が表示されるので、必要事項を入力して「アカウントを作成」をクリックしましょう。
登録したメールアドレス宛に、確認メールが届きます。メッセージ内にある「メールアドレスを確認」をクリックして認証を完了してください。
メールアドレスの確認が完了すると、自動的に下画像の画面に移行します。「支払いを有効にする」をクリックして、設定に進みましょう。
Stripeに事業者情報を入力していきます。
はじめに所在地を入力します。事業形態も忘れずに選択してください。入力が完了したら「続ける」をクリックしましょう。
氏名や年齢を入力する項目です。
電話番号は、先頭の「0」を削除して入力します。
事業内容について入力します。
「事業のウェブサイト」には、WooCommerceをインストールしたサイトURLを入力してください。サービス内容はサイト運営の目的を簡潔に説明できていれば問題ありません。
改正割賦販売法に関する質問です。全て「いいえ」にチェックを入れておけば問題ありません。
※販売者によって設定が異なるケースがあるため、内容はしっかり確認しておきましょう。
決済の利用明細で表示させる内容を決められます。「店舗名・サービス名」を入力して「続ける」をクリックしてください。
入金用の銀行口座情報を入力します。口座の名義人はStripeアカウントに登録した個人名（または法人名）でなければならない点に注意してください。
ログイン時に利用する2段階認証の種類を選択します。
「SMSを有効化」をクリックしましょう。
SMS認証をする携帯電話番号を入力して「電話番号を確認」をクリックしてください。ここでも先頭の「0」を抜いた「80-0000-0000」の形式で入力します。
SMSで送られてきた6桁のコードを入力して「確定」をクリックすると、認証が完了します。
認証が正常に完了すると、緊急バックアップコードが表示されます。このコードは万が一、携帯電話で2段階認証できない時に利用するものです。必ずコピーして、メモ帳やパスワード管理アプリに保存しておきましょう。
2段階認証の手続きが完了したら「続ける」をクリックしてください。
税金関連の設定項目です。形のある商品を販売する場合は「一般・有形商品」を選んでおけばOKです。
売上の一部を寄付するかどうか設定します。設定したくない場合は「今はやめておく」をクリックしましょう。
最後に全ての登録情報を確認する画面が表示されます。間違いがないか確認できたら「完了」をクリックしましょう。
これでStripeの登録が完了しました。
Stripeをテスト環境で使う際の設定方法
テスト環境用の認証キーをコピーする
Stripeの管理画面右上にある「テスト環境」のスイッチをオンにして「開発者」をクリックしてください。
左上あたりにある「APIキー」をクリックすると、認証キーが表示されます。WooCommerce側で設定する際に使うので、以下2種類のキーをコピーしておきましょう。
（設定画面が少し変わったようですので、↓の画像を差し替えています。 2023/06/12）
- 公開可能キー
- シークレットキー
Stripe側での設定はひとまず完了です。
WooCommerce側の設定手順
WordPressの管理画面から「WooCommerce」→「設定」と進み「決済」の中にある「Stripe – クレジットカード」の「有効」スイッチをオンにします。
Stripeの連携画面が表示されるので「Create or connect an account」をクリックしてください。
連携するアカウントが表示されますので「連結する」をクリックしましょう。
連携が完了すると、Stripeの設定画面が表示されます。
- 「Stripeを有効化」にチェック
- 「Enable test mode」にチェック
上記2つにチェックを入れて「Edit account keys」をクリックしてください。
認証キーを設定する画面が表示されます。Stripeで事前にコピーしておいた、2種類のキーを入力してください。
- 公開可能なキーをテストする：公開可能キー
- 秘密鍵をテストする：シークレットキー
上記2つを入力したら、次にWebhookを設定します。
異なるアプリケーションを連携して、リアルタイムにデータを提供する仕組み。WooCommerceとStripeの連携に必要。
下画像の赤枠で囲んだコードをコピーして「Stripeアカウントの設定に追加します」をクリックしてください。
設定画面に移るので「エンドポイントを追加」をクリックします。
「エンドポイントURL」に先ほどコピーしたコードをペーストしてください。次に「イベントを選択」をクリックします。
「全イベントを選択」にチェックを入れて「イベントを追加」をクリックしましょう。
最後にもう一度画面下にある「イベントを追加」をクリックすれば登録完了です。
Stripeの管理画面で「開発者」→「Webhook」の順に進みます。「署名シークレット」の「表示」をクリックするとコードが表示されるので、こちらをコピーしてください。
WooCommerceの設定画面に戻って「Webhookの秘密をテストする」にコピーしたコードをペーストします。
全て入力できたら「テストキーを保存します」をクリックしましょう。
これでテスト環境での利用が可能になりました。
正常に支払いテストができるかチェックしてみましょう。ちなみに各クレジットカードのテスト番号は、以下で確認できます。
Stripeを本番環境で利用する方法
はじめにWordPress管理画面から「WooCommerce」→「設定」→「決済」と進みます。「Stripe – クレジットカード」の右側にある「管理」をクリックしてください。
「設定」の項目ないにある「Enable test mode」のチェックを外して「Edit account keys」をクリックしましょう。
自動で本番環境のキーが設定されます。Webhookの認証キーのみ、Stripeからコピペして「Save live Keys」をクリックしてください。
Webhookの認証キーは、Stripeの管理画面から「開発者」→「Webhook」と進み「署名シークレット」の「表示」をクリックすると確認できます。テスト環境で設定したものと同じコードです。
ちなみに本番環境の認証コードが自動表示されなかった場合は、Stripeの管理画面から「開発者」→「APIキー」の順に進むと確認できます。
コードの入力が全て完了したら、最後に「Save changes」をクリックしましょう。
これで本番環境でもクレジットカード決済が利用できるようになりました。商品ページにカートボタンを追加して、実際に決済画面が表示されるかチェックしてみましょう。
これにてWooCommerceにStripeを連携する作業は完了です。
まとめ
StripeをWooCommerceに連携させることで、決済のバリエーションを飛躍的に増やすことができます。
まずはテスト環境で、正常に決済できるかチェックしてみてください。問題なく処理が完了したことを確認したら、本番環境で運用を始めましょう。決済手続きの不具合は、利用者のストレスになるので注意が必要です。
Stripeは決済手数料のみで手軽に利用できます。WooCommerceとStripeを連携して、ECサイトの販売機会を増やしていきましょう。
- WordPressテーマ「EGO.」：アパレル・セレクトショップ・インテリア・家具・スポーツ用品
- WordPressテーマ「Ankle」：雑貨・アクセサリー・ギフト
- WordPressテーマ「common」：デジタルコンテンツ（写真・イラスト・セミナー・レッスン動画など）
- WordPressテーマ「BASARA」：和菓子・日本酒・和食器・呉服・和楽器・日本画・書道作品
- WordPressテーマ「RIKYU」：物販（あらゆる業種）
第1回 ：WooCommerceとは？
第2回 ：インストール
第3回 ：基本設定
第4回 ：商品登録
第5回 ：デジタルコンテンツ販売
第6回 ：クーポンの設定
第7回 ：レビューの承認制
第8回 ：おすすめの決済サービス
第9回 ：Stripeの導入（当記事）
第10回 ：PayPalの導入
第11回 ：指定の商品のみを表示
第12回 ：マイアカウントのカスタマイズ
第13回 ：カートボタンのリンク先を変える
こんにちは。突然申し訳ありません。
Stripeのプラグイン使用して、銀行振り込みを受け付けるにはどこを変更、追加すればいいのでしょうか？
よろしくお願いします。