Edited at

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


はじめに

これは、2019/06/01(土)に開催されるOkayama WordPress Meetup #3 で行われる「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

登録後の画面については、「今はスキップ」をクリックします。

スクリーンショット 2019-05-27 9.24.35.png

入力したメール宛に認証メールが届きます。Confirm email addressをクリックします。※クリック後、メールアドレスとパスワードの入力が必要です。入力して認証を済ませておいてください。

スクリーンショット 2019-05-27 9.30.24.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

同様に、以下のプラグインをインストールします。

「WooCommerce For Japan」

「WooCommerce Stripe Payment Gateway」

インストールしたプラグインを有効化します。

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

スクリーンショット 2019-05-27 13.13.23.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テーマを選択し、他はチェックを外してください。※全部インストールしても良いです。ご自由に。

スクリーンショット 2019-05-27 13.25.38.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

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