WooCommerceに標準装備されている決済方法の1つがStripeです。

クレジットカード決済をかんたんに組み込めるStripeですが、はじめてWooCommerceと連携する人にとっては、少々複雑な設定画面に困惑してしまうでしょう。

そこで本記事では、WooCommerceとStripeを連携する設定方法を解説します。参考画像をたくさん付けましたので、見様見真似で設定してみてくださいね。

プラグインのインストール

はじめにWooCommerce Stripe Payment Gatewayを、WordPressにインストールします。

WooCommerce Stripe Payment Gateway

WordPress plugin

WordPressの管理画面より「プラグイン」→「新規追加」の順で進んでください。

検索欄に「Stripe」と入力すると、WooCommerce Stripe Payment Gatewayが表示されます。「今すぐインストール」をクリックした後「有効化」しておきましょう。
 

Stripeアカウントの作成

Stripe

次にStripeのアカウントを作成します。

Stripe公式サイト

サイトが表示されたら「今すぐ始める」をクリックしてください。「Stripeアカウントの作成」が表示されるので、必要事項を入力して「アカウントを作成」をクリックしましょう。

Stripe sign in

登録したメールアドレス宛に、確認メールが届きます。メッセージ内にある「メールアドレスを確認」をクリックして認証を完了してください。

Stripe sign in

メールアドレスの確認が完了すると、自動的に下画像の画面に移行します。「支払いを有効にする」をクリックして、設定に進みましょう。

Stripe sign in

Stripeに事業者情報を入力していきます。

はじめに所在地を入力します。事業形態も忘れずに選択してください。入力が完了したら「続ける」をクリックしましょう。

Sign in Stripe

氏名や年齢を入力する項目です。
電話番号は、先頭の「0」を削除して入力します。

<例>「80-0000-0000」

Sign in Stripe

事業内容について入力します。

「事業のウェブサイト」には、WooCommerceをインストールしたサイトURLを入力してください。サービス内容はサイト運営の目的を簡潔に説明できていれば問題ありません。

雑貨を中心に小物やハンドメイド用品などを販売するECサイトです。

Sign in Stripe

改正割賦販売法に関する質問です。全て「いいえ」にチェックを入れておけば問題ありません。

※販売者によって設定が異なるケースがあるため、内容はしっかり確認しておきましょう。

Sign in Stripe

決済の利用明細で表示させる内容を決められます。「店舗名・サービス名」を入力して「続ける」をクリックしてください。

Sign in Stripe

入金用の銀行口座情報を入力します。口座の名義人はStripeアカウントに登録した個人名(または法人名)でなければならない点に注意してください。

Sign in Stripe

ログイン時に利用する2段階認証の種類を選択します。
「SMSを有効化」をクリックしましょう。

Sign in Stripe

SMS認証をする携帯電話番号を入力して「電話番号を確認」をクリックしてください。ここでも先頭の「0」を抜いた「80-0000-0000」の形式で入力します。

Sign in Stripe

SMSで送られてきた6桁のコードを入力して「確定」をクリックすると、認証が完了します。

Sign in Stripe

認証が正常に完了すると、緊急バックアップコードが表示されます。このコードは万が一、携帯電話で2段階認証できない時に利用するものです。必ずコピーして、メモ帳やパスワード管理アプリに保存しておきましょう。

Sign in Stripe

2段階認証の手続きが完了したら「続ける」をクリックしてください。

Sign in Stripe

税金関連の設定項目です。形のある商品を販売する場合は「一般・有形商品」を選んでおけばOKです。

Sign in Stripe

売上の一部を寄付するかどうか設定します。設定したくない場合は「今はやめておく」をクリックしましょう。

Stripe

最後に全ての登録情報を確認する画面が表示されます。間違いがないか確認できたら「完了」をクリックしましょう。

Sign in Stripe

これでStripeの登録が完了しました。

Stripeをテスト環境で使う際の設定方法

テスト環境用の認証キーをコピーする

Stripeの管理画面右上にある「テスト環境」のスイッチをオンにして「開発者」をクリックしてください。

「APIキー」をクリックすると、認証キーが表示されます。WooCommerce側で設定する際に使うので、以下2種類のキーをコピーしておきましょう。

  1. 公開可能キー
  2. シークレットキー

Sign in Stripe

Stripe側での設定はひとまず完了です。
WooCommerce側の設定手順
WordPressの管理画面から「WooCommerce」→「設定」と進み「決済」の中にある「Stripe – クレジットカード」の「有効」スイッチをオンにします。

WordPress Stripe

Stripeの連携画面が表示されるので「Create or connect an account」をクリックしてください。

Stripe

連携するアカウントが表示されますので「連結する」をクリックしましょう。

Stripe

連携が完了すると、Stripeの設定画面が表示されます。

  • 「Stripeを有効化」にチェック
  • 「Enable test mode」にチェック

上記2つにチェックを入れて「Edit account keys」をクリックしてください。

Stripe

認証キーを設定する画面が表示されます。Stripeで事前にコピーしておいた、2種類のキーを入力してください。

  • 公開可能なキーをテストする:公開可能キー
  • 秘密鍵をテストする:シークレットキー

上記2つを入力したら、次にWebhookを設定します。

Webhookとは
異なるアプリケーションを連携して、リアルタイムにデータを提供する仕組み。WooCommerceとStripeの連携に必要。

下画像の赤枠で囲んだコードをコピーして「Stripeアカウントの設定に追加します」をクリックしてください。

Stripe

設定画面に移るので「エンドポイントを追加」をクリックします。

Stripe

「エンドポイントURL」に先ほどコピーしたコードをペーストしてください。次に「イベントを選択」をクリックします。

Stripe

「全イベントを選択」にチェックを入れて「イベントを追加」をクリックしましょう。

Stripe

最後にもう一度画面下にある「イベントを追加」をクリックすれば登録完了です。

Stripe

Stripeの管理画面で「開発者」→「Webhook」の順に進みます。「署名シークレット」の「表示」をクリックするとコードが表示されるので、こちらをコピーしてください。

Stripe

WooCommerceの設定画面に戻って「Webhookの秘密をテストする」にコピーしたコードをペーストします。

全て入力できたら「テストキーを保存します」をクリックしましょう。

Stripe

これでテスト環境での利用が可能になりました。

正常に支払いテストができるかチェックしてみましょう。ちなみに各クレジットカードのテスト番号は、以下で確認できます。

>> テスト用の番号はこちら

Stripeを本番環境で利用する方法

はじめにWordPress管理画面から「WooCommerce」→「設定」→「決済」と進みます。「Stripe – クレジットカード」の右側にある「管理」をクリックしてください。

Stripe

「設定」の項目ないにある「Enable test mode」のチェックを外して「Edit account keys」をクリックしましょう。

Stripe

自動で本番環境のキーが設定されます。Webhookの認証キーのみ、Stripeからコピペして「Save live Keys」をクリックしてください。

Webhookの認証キーは、Stripeの管理画面から「開発者」→「Webhook」と進み「署名シークレット」の「表示」をクリックすると確認できます。テスト環境で設定したものと同じコードです。

Stripe

ちなみに本番環境の認証コードが自動表示されなかった場合は、Stripeの管理画面から「開発者」→「APIキー」の順に進むと確認できます。

Stripe

コードの入力が全て完了したら、最後に「Save changes」をクリックしましょう。

Stripe

これで本番環境でもクレジットカード決済が利用できるようになりました。商品ページにカートボタンを追加して、実際に決済画面が表示されるかチェックしてみましょう。

Stripe

これにてWooCommerceにStripeを連携する作業は完了です。

まとめ

StripeをWooCommerceに連携させることで、決済のバリエーションを飛躍的に増やすことができます。

まずはテスト環境で、正常に決済できるかチェックしてみてください。問題なく処理が完了したことを確認したら、本番環境で運用を始めましょう。決済手続きの不具合は、利用者のストレスになるので注意が必要です。

Stripeは決済手数料のみで手軽に利用できます。WooCommerceとStripeを連携して、ECサイトの販売機会を増やしていきましょう。

合わせて読みたいWooCommerceの関連記事

第1回 :WooCommerceとは?
第2回 :インストール
第3回 :基本設定
第4回 :商品登録
第5回 :クーポンの設定
第6回 :おすすめの決済サービス
第7回 :Stripeの導入(当記事)
第8回 :PayPalの導入