デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

Woo Commerceの決済設定方法【Stripe編】【Woo Commerce導入奮闘記 第3回】

    
アイキャッチWoo-Commerce2
\ この記事を共有 /
Woo Commerceの決済設定方法【Stripe編】【Woo Com...

どうも!デジタルマーケッターのジュンイチです。

WordPressで簡単にECサイトが作れるWoo Commerce導入奮闘記です。

今日は、決済設定の内、StripeとWoo Commerceを連携する作業をやっていきたいと思います。

今日進める作業は「Stripe決済の設定」

事前にStripeのアカウントを取得しておく必要があります。

↓ WordPressの左の管理メニューの「Woo Commerce」⇒「ホーム」と行くと以下のような画面になります。今日はこの「支払いを設定する」をやっていきます。

Woo Commerce支払い設定

↓ こんな画面になります。今日は「Stripe」の設定をするのでStripeの「セットアップ」をクリック。

Woo Commerce支払い設定

↓ すると、Woo Commerce Stripe(WooCommerce Stripe ゲートウェイ」というプラグイン)を勝手にインストールしてくれます。

Woo Commerce支払い設定

↓ 画面が以下のように切り替わるので、Stripeアカウントを連携していきます。「連携」ボタンをポチ。

Woo Commerce支払い設定

↓ StripeとWoo Commerceのサイトを連携する画面になります。連携させたいStripeアカウントを選んで「連携する」ボタンをポチ。

Woo Commerce支払い設定

↓ Stripeのアカウントにログインさせられます。メールアドレスとPWを入れてログインしましょう。

Woo Commerce支払い設定

↓ もう一回連携するアカウントを聞かれます。(さっきも聞かれたけど・・・)

Woo Commerce支払い設定

↓ ちょっと待ちます。

Woo Commerce支払い設定

↓ これで、基本的な連携はできたんですが、まだちょっと詳しい設定が必要みたいです。「管理」を押します。

Woo Commerce支払い設定

↓ こんな感じで、Stripeの決済設定の基本的な部分は埋まっています。

Woo Commerce支払い設定

Webhookの設定をする

設定画面を下に進めていくと、どうやら「Webhookエンドポイント」という部分の設定が必要そうです。

You must add the following webhook endpoint  https://hogehoge.com/?wc-api=wc_stripe  to your Stripe account settings (if there isn’t one already enabled). This will enable you to receive notifications on the charge statuses.

Stripeの設定より

翻訳をすると、以下のような感じです。

次のWebhookエンドポイントhttps://hogehoge.com/?wc-api=wc_stripeをStripeアカウント設定に追加する必要があります(まだ有効になっていない場合)。これにより、充電ステータスに関する通知を受け取ることができます。

Woo Commerce支払い設定

英文中のStripe account settingsに飛ぶことにしましょう。

↓するとStripeの管理画面の以下のような画面に飛びます。「+エンドポイントを追加」ボタンを押しましょう。

Woo Commerce支払い設定

↓「Webhookエンドポイントの追加」という画面に飛びます。このエンドポイントURLの部分に、先程WordPressのWoo Commerce設定画面に出ていたWebhookエンドポイントのURLを貼ります。(人によってURLは違うと思います) 説明は任意ですが、なんのWebhookかわかるように適当にメモを書きました。また、送信イベントは「すべてのイベントを受信」をクリックして、すべてのイベントを受信できるようにしましょう。

それができたら「エンドポイントの追加」をクリック。

Woo Commerce支払い設定

↓ そうすると以下の画面に変わります。この「署名シークレット」という部分の「クリックして表示」を押すとシークレットコードが表示されます。このコードをコピーしましょう。

Woo Commerce支払い設定

↓今度は、WordPressの設定画面に戻って、「Webhook Secret」という部分に貼り付けましょう。

Woo Commerce支払い設定

↓ ここまでできたら、「変更を保存」を押しておきましょう。

Woo Commerce支払い設定

テストモードにしておく

まだ本番の決済があると困るのと、テストをしたいので、Stripe決済はテストモードにしたいと思います。Stripeの管理画面の方にいきます。そこで、左の方の「テストデータを表示」をクリックして「テストデータを表示中」に切り替えておきましょう。

Woo Commerce支払い設定

↓ ここで出てくる「公開可能キー」と「シークレットキー」をコピーします。

Woo Commerce支払い設定

↓ WordPressのWoo CommerceのStripeの設定のところにある

  • 「テストモードを有効化」にチェック
  • テスト用公開鍵にコピーした公開可能キーを貼り付け
  • テスト用秘密キーにシークレットキーを貼り付け
Woo Commerce支払い設定

↓ 忘れずに「変更を保存」しておきましょう。

Woo Commerce支払い設定

Apple PayとGoogle Payを使えるようにする

Stripeの設定の中に、Payment Requestボタンという部分があります。ここをちゃんと設定しておくと、Google PayやApple Payのボタンも追加されるのですごくユーザー的にはありがたいですよね。

↓ Google Pay

Google Pay

↓ Apple Pay

Apple Pay

こういうボタンを出すためにはStripeボタンを設置するサイトのドメインを、Stripeと連携させておく必要があります。では以下からやり方を。

↓ WordPressのStripe決済の設定の中の「Payment Requestボタン」の中に「Stripe dashboard」というリンクがあります。そこをクリック。

Woo Commerce支払い設定

↓ 以下のようなStripeの画面に飛ぶので「新しいドメインを追加」をクリック。

Woo Commerce支払い設定

↓ この新しいドメインを追加、という画面にWoo Commerceで作っているサイトのドメインを追加していきます。

Woo Commerce支払い設定

手順としては、

  1. ドメインを入力
  2. 確認ファイルをダウンロード
  3. FTPソフトなどで、ドメイン/public_html/.well-known/の中に2でダウンロードしたファイルをアップロード
  4. 「追加」ボタンをクリック

これで確認ができるはずです。

テストモードで支払いをしてみた

ここまで設定できたら、テストモードでクレジットカード決済をやってみた。

テストカード番号は、以下のように

  • カード番号:4242 4242 4242 4242
  • カードの期限:(今より先の期限を入力すれば何でもOK)例:01/30 (2030年1月)
  • CVC:(何でもOK)例:123

これでテスト決済ができます。

テストカード

無事テスト決済が完了して、商品の案内メールも届きました。良かったよかった。

まとめ

今回は、Woo Commerceの決済設定の内、Stripeの設定をやってみました。Stripeのアカウントさえあれば結構簡単にできるのでおすすめです。

 

今までの僕のブログ集客のノウハウを全部つぎ込んで しかも無料で配布することにしました。

【今すぐ読める無料Ebook】 広告費を一切使わずブログだけで 19,000人以上を集客した全手法!

総ページ100ページ以上の 大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

Ebook