Help us understand the problem. What is going on with this article?

WordPress + WooCommerce + Stripe ワークショップでオンライン決済を体験する

はじめに

これは、2019/06/01(土)に開催されるOkayama WordPress Meetup #3 で行われる「WordPress + WooCommerce + Stripe ワークショップでオンライン決済を体験する」の資料になります。
【追記】2019/10/13(日)に開催されるShimane WordPress Meetup #7 で行われる「WordPress + WooCommerce + Stripe ワークショップでオンライン決済を体験する」用に一部キャプチャ画像などを更新しました。

対象

WordPressを使ってECサイトを作ってみようと思っている方。
※本ワークショップはノンコーディングです。プログラミング知識は必要ございません。

SPECIAL THANKS

こちらのワークショップは、JP_Stripes京都vol2と、JP_Stripes Connect 2019にて行われたワークショップ「WordPress + WooCommerce with Stripeで作るノンプログラミングECサイト」を参考にしています。JP_Stripes岡本さん、JP_Stripes安藤さんに感謝。ありがとうございます。

ワークショップの流れ

  • Stripeアカウントを作成する。
  • StripeのAPIキーを取得
  • WordPressにWooCommerceをインストール
  • WooCommerceの準備
  • 商品を登録する
  • Stripe決済の設定をする
  • テストモードで商品を購入する
  • Webhookを設定する

Stripeアカウントを作成する

https://dashboard.stripe.com/register にアクセスし、必要事項を入力します。
スクリーンショット 2019-05-27 9.21.48.png
登録後の画面については、右上の「×」をクリックします。
image_2019_10_12 (3).png

入力したメール宛に認証メールが届きます。Confirm email addressをクリックします。※クリック後、メールアドレスとパスワードの入力が必要です。入力して認証を済ませておいてください。
スクリーンショット 2019-05-27 9.30.24.png
以下のようなログイン画面が表示されたら、最初に入力したメールアドレスとパスワードを入力します。
image_2019_10_12 (4).png

以下の画面が表示されたら、Stripeへのアカウント登録は完了です。
スクリーンショット 2019-05-27 9.26.28.png
この状態は、まだテストモードでのみの動作が可能な状態です。実運用を行う場合は、本番環境利用の申請が必要になります。

StripeのAPIキーを取得

WordPress+WooCommerceにてStripeを利用した決済をするために、StripeのAPIキーをWordPress側に設定する必要があります。
ここではAPIキーを取得し、メモしておきます。
左メニューより開発者APIキーをクリックします。
スクリーンショット 2019-05-27 9.38.06.png
画面上部がテストデータになっていることを確認してください。
こちらの公開可能キーシークレットキーをメモしておきます。
シークレットキーはテスト用キーを表示をクリックすると表示されます。
「シークレット」というくらいなので、公開しないように注意してください。

補足

Stripeでは本番環境とテスト環境でAPIキーが異なります。
テスト環境では、
公開可能キー → pk_testxxxxxxxxxxxxxxxxxxx
シークレットキー → sk
test_xxxxxxxxxxxxxxxxxxx
と、「test」となっていますが、
本番環境では、
公開可能キー → pk
livexxxxxxxxxxxxxxxxxxx
シークレットキー → sk
_live_xxxxxxxxxxxxxxxxxxx
と、「live」となります。

WordPressにWooCommerceをインストール・設定

WordPressにログインします。ワークショップ専用に、インストール済みのWordPressを各自1つずつ用意しています。当日の指示に従い、WordPressにログインをしてください。
ログイン後、プラグインの設定を行います。プラグインをクリックします。
スクリーンショット 2019-05-27 12.59.01.png
左メニューのプラグインの下にある新規追加をクリックします。
表示された画面の右上プラグインを検索..に、「WooCommerce」と入力します。
検索結果に、WooCommerceが表示されますので、今すぐインストールをクリックします。
スクリーンショット 2019-05-27 13.02.31.png
同様に、以下のプラグインをインストールします。
「Japanized For WooCommerce」
「WooCommerce Stripe Payment Gateway」

インストールしたプラグインを有効化します。
左メニューからプラグインインストール済みプラグインを選択し、「WooCommerce」、「Japanized For WooCommerce」、「WooCommerce Stripe Payment Gateway」をチェック、画面上の操作から有効化を選び、適用をクリックします。
image_2019_10_13.png

WooCommerceの準備

プラグインが有効化されると、以下の画面のように、画面上部に設定ウィザードを開始とありますので、そちらをクリックします。
スクリーンショット 2019-05-27 13.16.57.png
表示された画面に必要事項を入力します。
店舗地域(国)は「日本」としてください。それ以外はご自由に入力してください。適当で良いのですべて入力をしてください。
スクリーンショット 2019-05-27 13.19.21.png
支払い方法画面は、Stripeを選択し、このメールを使ってStripeを設定のチェックは外してください。
スクリーンショット 2019-05-27 13.22.58.png
送料設定は、ご自由に設定してください。
スクリーンショット 2019-05-27 13.24.34.png
すべてのWooCommerceストアに推奨画面では、StoreFrontテーマを選択し、他はチェックを外してください。※全部インストールしても良いです。ご自由に。
image_2019_10_13 (1).png

JetPackは今回利用しませんので、このステップをスキップを選択してください。
スクリーンショット 2019-05-27 13.27.36.png
商品を登録してください。
スクリーンショット 2019-05-27 13.28.35.png

商品を登録する

自由に商品を登録してみてください。
スクリーンショット 2019-05-27 13.29.50.png
また、

テーマ設定を行う。

左メニューから外観テーマを選択。
スクリーンショット 2019-05-27 19.20.32.png
もし、StroeFrontテーマがインストールされてなければ、インストールしてください。
左メニューから外観テーマ新規作成を選択
「StoreFront」でテーマを検索し、インストール、有効化してください。
スクリーンショット 2019-05-27 19.17.30.png
左メニューから外観テーマを選択し、さあ、出発!をクリック
スクリーンショット 2019-05-27 19.26.04.png
ウィザードがスタートします。ご自由に。
スクリーンショット 2019-05-27 19.27.48.png

Stripe決済の設定をする

左メニューからWooCommerce設定をクリック、画面上部の決済タブをクリック。Stripe管理をクリックします。
スクリーンショット 2019-05-28 10.04.28.png
Stripeを有効化にチェックが入っていることを確認。
テストモードを有効化にチェックが入っていることを確認。
テスト用公開鍵テスト用秘密キーにStripeの画面からメモしていた内容を設定。
最後に画面下部の変更を保存をクリックします。
スクリーンショット 2019-05-28 10.12.53.png

テストモードで商品を購入する

画面上部から、店舗に移動を選択
スクリーンショット 2019-05-28 10.49.51.png

適当に商品を購入してみてください。
スクリーンショット 2019-05-28 10.34.16.png
クレジットカード番号は、テスト番号「4242 4242 4242 4242」を入力。有効期限は未来の年月、セキュリティコードは適当な3桁の数字を入力。
スクリーンショット 2019-05-28 10.51.26.png
決済が完了しました。
スクリーンショット 2019-05-28 10.39.35.png
管理画面からWooCommerce受注を選択
商品が購入されていることがわかります。
スクリーンショット 2019-05-28 10.41.08.png
また、Stripeの管理画面からも確認ができます。
左メニューの支払いをクリックします。
スクリーンショット 2019-05-28 10.42.45.png

Webhookを設定する

WooCommerceが用意しているWebhookをStripeに設定すると、Stripe側でキャンセル、返金などを行った情報が、WooCommerceに反映されます。
左メニューからWooCommerce設定をクリック、画面上部の決済タブをクリック。Stripe管理をクリックします。表示された画面中央のWebhookエンドポイントのURLをコピーします。
スクリーンショット 2019-05-28 10.56.21.png
このURLをStripeのWebhookの設定に登録します。以下にアクセスします。
https://dashboard.stripe.com/account/webhooks
新規登録をクリックし、Webhookを設定します。エンドポイントURLに、先程のURLを記入します。画面中央のすべてのイベントを受信をクリックし、エンドポイントを追加をクリックします。
スクリーンショット 2019-05-28 10.57.45.png
実際に返金をしてみます。
WordPressの管理画面で、WooCommerce受注の一覧で「処理中」になっていることを確認します。
スクリーンショット 2019-05-28 13.45.22.png
Stripeの画面で、該当の支払いをクリック、表示される画面で、返金をクリックします。
スクリーンショット 2019-05-28 13.47.21.png
適当な理由を記載して、返金します。
スクリーンショット 2019-05-28 13.48.50.png
Webhookが設定されていれば、Stripe側の変更がWordPress側に伝わり、ステータスが更新されます。
WordPressの画面に戻り、画面を更新すると、ステータスが「払い戻し」になっていることを確認します。
スクリーンショット 2019-05-28 13.50.03.png

以上。時間が余った方は、その他、いろいろ試してみてください。

takeshifurusato
TwilioJP-UG Okayama(Twilio Champions) / JAWS-UG Okayama / JP_Stripes Okayama / Okayama WordPress Meetup / SORACOM UG Okayama
https://takeshi.furusato.blog
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした