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サイト](https://connect2019.jpstripes.com/session/tbd-workshop/)」を参考にしています。JP_Stripes岡本さん、JP_Stripes[安藤さん](https://twitter.com/m_ando_japan)に感謝。ありがとうございます。

#ワークショップの流れ

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

# Stripeアカウントを作成する

https://dashboard.stripe.com/register にアクセスし、必要事項を入力します。
<img width="797" alt="スクリーンショット 2019-05-27 9.21.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/6f67ee06-3673-7a92-cba0-6957c5779a33.png">
登録後の画面については、右上の「×」をクリックします。
![image_2019_10_12 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/791fd867-863e-3ea0-28df-3c055fcde642.png)


入力したメール宛に認証メールが届きます。Confirm email addressをクリックします。※クリック後、メールアドレスとパスワードの入力が必要です。入力して認証を済ませておいてください。
<img width="612" alt="スクリーンショット 2019-05-27 9.30.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/e8bd04e5-22b4-2faa-9ef6-024c20e618e9.png">
以下のようなログイン画面が表示されたら、最初に入力したメールアドレスとパスワードを入力します。
![image_2019_10_12 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/87f15691-7f65-6d7d-0569-ec55b7deaaf9.png)

以下の画面が表示されたら、Stripeへのアカウント登録は完了です。
<img width="1082" alt="スクリーンショット 2019-05-27 9.26.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/f0384e20-cbf4-8464-2f9f-f304581722e2.png">
**この状態は、まだテストモードでのみの動作が可能な状態です。実運用を行う場合は、本番環境利用の申請が必要になります。**

# StripeのAPIキーを取得  
WordPress+WooCommerceにてStripeを利用した決済をするために、StripeのAPIキーをWordPress側に設定する必要があります。
ここではAPIキーを取得し、メモしておきます。
左メニューより**開発者**→**APIキー**をクリックします。
<img width="1082" alt="スクリーンショット 2019-05-27 9.38.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/19171e1d-aaf9-9c90-ab02-47ad3ba5972c.png">
画面上部が**テストデータ**になっていることを確認してください。
こちらの**公開可能キー**と**シークレットキー**をメモしておきます。
シークレットキーは**テスト用キーを表示**をクリックすると表示されます。
「シークレット」というくらいなので、公開しないように注意してください。
### 補足
Stripeでは本番環境とテスト環境でAPIキーが異なります。
テスト環境では、
公開可能キー　→　pk_**test**_xxxxxxxxxxxxxxxxxxx
シークレットキー　→　sk__**test**_xxxxxxxxxxxxxxxxxxx
と、「test」となっていますが、
本番環境では、
公開可能キー　→　pk_**live**_xxxxxxxxxxxxxxxxxxx
シークレットキー　→　sk__**live**_xxxxxxxxxxxxxxxxxxx
と、「live」となります。

# WordPressにWooCommerceをインストール・設定
WordPressにログインします。ワークショップ専用に、インストール済みのWordPressを各自１つずつ用意しています。当日の指示に従い、WordPressにログインをしてください。
ログイン後、プラグインの設定を行います。**プラグイン**をクリックします。
<img width="1052" alt="スクリーンショット 2019-05-27 12.59.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/cf2bbd1c-6605-1e95-be07-61b759b27329.png">
左メニューの**プラグイン**の下にある**新規追加**をクリックします。
表示された画面の右上**プラグインを検索..**に、「WooCommerce」と入力します。
検索結果に、WooCommerceが表示されますので、**今すぐインストール**をクリックします。
<img width="1057" alt="スクリーンショット 2019-05-27 13.02.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/f537d42d-b68b-a409-192a-bfa2dd21f743.png">
同様に、以下のプラグインをインストールします。
「Japanized For WooCommerce」
「WooCommerce Stripe Payment Gateway」

インストールしたプラグインを有効化します。
左メニューから**プラグイン**→**インストール済みプラグイン**を選択し、「WooCommerce」、「Japanized For WooCommerce」、「WooCommerce Stripe Payment Gateway」をチェック、画面上の操作から**有効化**を選び、**適用**をクリックします。
![image_2019_10_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/50a585a6-7180-42ab-e9e7-d2bded6fc78f.png)


#WooCommerceの準備
プラグインが有効化されると、以下の画面のように、画面上部に**設定ウィザードを開始**とありますので、そちらをクリックします。
<img width="1053" alt="スクリーンショット 2019-05-27 13.16.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/096e40b9-e965-4a68-bd65-7f2fa4cc82ae.png">
表示された画面に必要事項を入力します。
**店舗地域(国)**は「日本」としてください。それ以外はご自由に入力してください。適当で良いのですべて入力をしてください。
<img width="742" alt="スクリーンショット 2019-05-27 13.19.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/798a7eb0-4434-9465-ce74-fa0e9c64a917.png">
支払い方法画面は、Stripeを選択し、**このメールを使ってStripeを設定**のチェックは外してください。
<img width="733" alt="スクリーンショット 2019-05-27 13.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/4f59b237-3a75-fa28-7c57-381b14128e7a.png">
送料設定は、ご自由に設定してください。
<img width="716" alt="スクリーンショット 2019-05-27 13.24.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/a9c7ee1e-02a0-6a47-b1ef-7d38c821ed10.png">
すべてのWooCommerceストアに推奨画面では、StoreFrontテーマを選択し、他はチェックを外してください。※全部インストールしても良いです。ご自由に。
![image_2019_10_13 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/c5accf19-bb0e-28a8-5679-ada0c90f8c99.png)

JetPackは今回利用しませんので、**このステップをスキップ**を選択してください。
<img width="708" alt="スクリーンショット 2019-05-27 13.27.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/8812ff8e-3df5-8043-152d-28f402516884.png">
商品を登録してください。
<img width="708" alt="スクリーンショット 2019-05-27 13.28.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/6b266713-f1ab-aa9c-296a-9821fda17245.png">

# 商品を登録する
自由に商品を登録してみてください。
<img width="1057" alt="スクリーンショット 2019-05-27 13.29.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/8827397c-7e08-f385-9787-3b65efccc269.png">
また、

# テーマ設定を行う。
左メニューから**外観**→**テーマ**を選択。
<img width="1170" alt="スクリーンショット 2019-05-27 19.20.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/8994104a-1571-2fbc-4184-49440a9c5d04.png">
もし、StroeFrontテーマがインストールされてなければ、インストールしてください。
左メニューから**外観**→**テーマ**→**新規作成**を選択
「StoreFront」でテーマを検索し、インストール、有効化してください。
<img width="1167" alt="スクリーンショット 2019-05-27 19.17.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/34af6cb1-029e-2a98-a818-765743ad4a08.png">
左メニューから**外観**→**テーマ**を選択し、**さあ、出発！**をクリック
<img width="1168" alt="スクリーンショット 2019-05-27 19.26.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/44f9a1e0-331b-8c33-4fb8-6324477c3b88.png">
ウィザードがスタートします。ご自由に。
<img width="1168" alt="スクリーンショット 2019-05-27 19.27.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/1d6465eb-0e3c-9a93-385c-837fe1dc5594.png">

# Stripe決済の設定をする
左メニューから**WooCommerce**→**設定**をクリック、画面上部の**決済**タブをクリック。**Stripe**の**管理**をクリックします。
<img width="1022" alt="スクリーンショット 2019-05-28 10.04.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/1859476b-2a66-0875-8347-dde55c32b620.png">
**Stripeを有効化**にチェックが入っていることを確認。
**テストモードを有効化**にチェックが入っていることを確認。
**テスト用公開鍵**、**テスト用秘密キー**にStripeの画面からメモしていた内容を設定。
最後に画面下部の**変更を保存**をクリックします。
<img width="1021" alt="スクリーンショット 2019-05-28 10.12.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/b364f165-41ba-28c3-5dd4-ddcb6dd38e17.png">

# テストモードで商品を購入する
画面上部から、**店舗に移動**を選択
<img width="335" alt="スクリーンショット 2019-05-28 10.49.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/48e9e847-d662-4d6a-9068-73d55e5c2b47.png">

適当に商品を購入してみてください。
<img width="1020" alt="スクリーンショット 2019-05-28 10.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/ff4e803b-7c8f-4447-56b0-f55ff48fc135.png">
クレジットカード番号は、[テスト番号](https://stripe.com/docs/testing)「4242 4242 4242 4242」を入力。有効期限は未来の年月、セキュリティコードは適当な3桁の数字を入力。
<img width="1021" alt="スクリーンショット 2019-05-28 10.51.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/c91ab905-36f4-b2ea-679c-7ef77a953f61.png">
決済が完了しました。
<img width="754" alt="スクリーンショット 2019-05-28 10.39.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/b4749121-f02e-df2b-dfa0-5af37e8b9912.png">
管理画面から**WooCommerce**→**受注**を選択
商品が購入されていることがわかります。
<img width="1023" alt="スクリーンショット 2019-05-28 10.41.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/fa88aeea-0140-6f06-fc1d-d955a70e55fd.png">
また、Stripeの管理画面からも確認ができます。
左メニューの**支払い**をクリックします。
<img width="1022" alt="スクリーンショット 2019-05-28 10.42.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/240c5271-70b4-ac3e-37b8-743fafc1ee7d.png">

# Webhookを設定する
WooCommerceが用意しているWebhookをStripeに設定すると、Stripe側でキャンセル、返金などを行った情報が、WooCommerceに反映されます。
左メニューから**WooCommerce**→**設定**をクリック、画面上部の**決済**タブをクリック。**Stripe**の**管理**をクリックします。表示された画面中央の**Webhookエンドポイント**のURLをコピーします。
<img width="1020" alt="スクリーンショット 2019-05-28 10.56.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/27d530ad-8f77-d22e-b9cc-2194a4c707d6.png">
このURLをStripeのWebhookの設定に登録します。以下にアクセスします。
https://dashboard.stripe.com/account/webhooks
新規登録をクリックし、Webhookを設定します。**エンドポイントURL**に、先程のURLを記入します。画面中央の**すべてのイベントを受信**をクリックし、**エンドポイントを追加**をクリックします。
<img width="668" alt="スクリーンショット 2019-05-28 10.57.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/41e7eb77-1890-5480-7832-c48d71de7ab6.png">
実際に返金をしてみます。
WordPressの管理画面で、**WooCommerce**→**受注**の一覧で「処理中」になっていることを確認します。
<img width="1022" alt="スクリーンショット 2019-05-28 13.45.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/3538629f-5a50-9e8b-46f6-8ea1c355d6df.png">
Stripeの画面で、該当の支払いをクリック、表示される画面で、**返金**をクリックします。
<img width="1022" alt="スクリーンショット 2019-05-28 13.47.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/6e7138e9-b7d5-679f-0825-54f6635ac492.png">
適当な理由を記載して、返金します。
<img width="506" alt="スクリーンショット 2019-05-28 13.48.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/39f9654b-2637-af02-786f-8716b3938350.png">
Webhookが設定されていれば、Stripe側の変更がWordPress側に伝わり、ステータスが更新されます。
WordPressの画面に戻り、画面を更新すると、ステータスが「払い戻し」になっていることを確認します。
<img width="1022" alt="スクリーンショット 2019-05-28 13.50.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110436/8a8a383b-3ac0-1d51-830c-888035500fb4.png">

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