以前からクレジットカード決済ができるECサイトのようなものを作ってみたいと思っていました。
![](https://keimarublog.com/wp-content/uploads/2020/07/Group-1.jpg)
ECサイト作ってみたいなぁ・・・
と思って調べてみたら、WordPressでプラグインの「WooCommerce」と、決済サービスの「Stripe」を使えば、なにやら簡単にネットショップを作れそうだったので、試しに作ってみました。
それでは早速やっていきましょう!
プラグイン「WooCommerce」をインストール
![プラグイン新規追加](https://keimarublog.com/wp-content/uploads/2020/07/Add-new-plugin-750-1024x596.jpeg)
![プラグイン新規追加](https://keimarublog.com/wp-content/uploads/2020/07/Add-new-plugin-750-1024x596.jpeg)
管理画面より [プラグイン] → [新規追加] をクリックします。
![WooCommerceプラグイン](https://keimarublog.com/wp-content/uploads/2020/07/WooCommerce-plugin-750-1024x596.jpeg)
![WooCommerceプラグイン](https://keimarublog.com/wp-content/uploads/2020/07/WooCommerce-plugin-750-1024x596.jpeg)
[WooCommerce] を検索しインストールします。
![WooCommerce Stripe Payment Gateway プラグイン](https://keimarublog.com/wp-content/uploads/2020/07/WooCommerce-Stripe-Payment-Gateway-plugin-750-1024x596.jpeg)
![WooCommerce Stripe Payment Gateway プラグイン](https://keimarublog.com/wp-content/uploads/2020/07/WooCommerce-Stripe-Payment-Gateway-plugin-750-1024x596.jpeg)
同様に[WooCommerce Stripe Payment Gateway]もインストールします。
![Japanized For WooCommerceプラグイン](https://keimarublog.com/wp-content/uploads/2020/07/Japanized-For-WooCommerce-Plugin-750-1024x596.jpeg)
![Japanized For WooCommerceプラグイン](https://keimarublog.com/wp-content/uploads/2020/07/Japanized-For-WooCommerce-Plugin-750-1024x596.jpeg)
[Japanized For WooCommerce]もインストールします。
![プラグイン有効化](https://keimarublog.com/wp-content/uploads/2020/07/Enable-plugin-750-1024x596.jpeg)
![プラグイン有効化](https://keimarublog.com/wp-content/uploads/2020/07/Enable-plugin-750-1024x596.jpeg)
インストールが完了したら、サイドメニュー [プラグイン] → [インストール済みプラグイン] より、先程インストールした3つのプラグインを選択し、[有効化]させます。
WooCommerceの設定
![設定ウィザードを開始](https://keimarublog.com/wp-content/uploads/2020/07/Start-the-configuration-wizard-750-1024x596.jpeg)
![設定ウィザードを開始](https://keimarublog.com/wp-content/uploads/2020/07/Start-the-configuration-wizard-750-1024x596.jpeg)
プラグインを有効化するとWooCommerceの [設定の設定ウィザードを開始] ボタンが表示されるのでクリックします。
![お願いしますボタン](https://keimarublog.com/wp-content/uploads/2020/07/Please-button-750-1024x596.jpeg)
![お願いしますボタン](https://keimarublog.com/wp-content/uploads/2020/07/Please-button-750-1024x596.jpeg)
[はい、お願いします] をクリックします。
この先、表示される必要事項に入力していきましょう。
ここでは割愛させていただきます。m(_ _)m
![テーマ選択](https://keimarublog.com/wp-content/uploads/2020/07/Theme-selection-750-1024x596.jpeg)
![テーマ選択](https://keimarublog.com/wp-content/uploads/2020/07/Theme-selection-750-1024x596.jpeg)
最後にテーマを決めたら、必要事項の入力は終了になります。
![結構ですボタン](https://keimarublog.com/wp-content/uploads/2020/07/Fine-button-750-1024x596.jpeg)
![結構ですボタン](https://keimarublog.com/wp-content/uploads/2020/07/Fine-button-750-1024x596.jpeg)
JetPackは利用しないので [結構です] をクリックします。
商品の追加
![Add your first product クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-your-first-product-click-750-1024x596.jpeg)
![Add your first product クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-your-first-product-click-750-1024x596.jpeg)
WooCommerceダッシュボードより、[Add your first product] で商品を追加していきましょう。
![Add manualy クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-manually-click-750-1024x596.jpeg)
![Add manualy クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-manually-click-750-1024x596.jpeg)
![Add manualy クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-manually-click-750-1024x596.jpeg)
![Add manualy クリック](https://keimarublog.com/wp-content/uploads/2020/07/Add-manually-click-750-1024x596.jpeg)
[Add manually] をクリックします。
![商品追加ページ](https://keimarublog.com/wp-content/uploads/2020/07/Product-addition-page-750-1024x596.jpeg)
![商品追加ページ](https://keimarublog.com/wp-content/uploads/2020/07/Product-addition-page-750-1024x596.jpeg)
販売する商品名、画像、価格、説明などを入力します。
![WooCommerce×Stripe13](https://keimarublog.com/wp-content/uploads/2020/07/Product-release-button-750-1024x596.jpeg)
![WooCommerce×Stripe13](https://keimarublog.com/wp-content/uploads/2020/07/Product-release-button-750-1024x596.jpeg)
画面右の [公開] をクリックします。
以上で商品ページの制作は完了しました。
Stripe決済の設定
[WooCommerce] → [設定] より [決済]タブを選択して、Stripeの[セットアップ]をクリックします。
![WooCommerce×Stripe15](https://keimarublog.com/wp-content/uploads/2020/07/Settlement-details-750-1024x596.jpeg)
![WooCommerce×Stripe15](https://keimarublog.com/wp-content/uploads/2020/07/Settlement-details-750-1024x596.jpeg)
「Stripeを有効化」と「テストモードを有効化」にチェックが入っているのを確認します。
次にStripeのAPIキーを入力します。Stripeのダッシュボードより[テスト用公開鍵]と[テスト用秘密キー]をコピペしましょう
![WooCommerce×Stripe16](https://keimarublog.com/wp-content/uploads/2020/07/Save-payment-changes-750-1024x596.jpeg)
![WooCommerce×Stripe16](https://keimarublog.com/wp-content/uploads/2020/07/Save-payment-changes-750-1024x596.jpeg)
入力が終わったら[変更を保存]をクリックします。
実際に購入してみる
![WooCommerce×Stripe17](https://keimarublog.com/wp-content/uploads/2020/07/Product-name-750-1024x596.jpeg)
![WooCommerce×Stripe17](https://keimarublog.com/wp-content/uploads/2020/07/Product-name-750-1024x596.jpeg)
[WooCommerce] → [商品] より、商品編集ページにいきます。
![WooCommerce×Stripe18](https://keimarublog.com/wp-content/uploads/2020/07/Product-permalink-750-1024x596.jpeg)
![WooCommerce×Stripe18](https://keimarublog.com/wp-content/uploads/2020/07/Product-permalink-750-1024x596.jpeg)
[パーマリンク] をクリックして商品ページにとびます。
![WooCommerce×Stripe19](https://keimarublog.com/wp-content/uploads/2020/07/Add-to-cart-750-1024x596.jpeg)
![WooCommerce×Stripe19](https://keimarublog.com/wp-content/uploads/2020/07/Add-to-cart-750-1024x596.jpeg)
[カートに入れる] をクリックします。
![WooCommerce×Stripe20](https://keimarublog.com/wp-content/uploads/2020/07/Show-cart-750-1024x596.jpeg)
![WooCommerce×Stripe20](https://keimarublog.com/wp-content/uploads/2020/07/Show-cart-750-1024x596.jpeg)
「〜〜〜をカートに追加しました。」と表示されたので、[カートを表示] をクリックします。
![WooCommerce×Stripe21](https://keimarublog.com/wp-content/uploads/2020/07/Proceed-to-payment-750-1024x596.jpeg)
![WooCommerce×Stripe21](https://keimarublog.com/wp-content/uploads/2020/07/Proceed-to-payment-750-1024x596.jpeg)
[お支払へ進む]をクリック。
請求先情報を入力します。適当でOKです。
![WooCommerce×Stripe23](https://keimarublog.com/wp-content/uploads/2020/07/Credit-card-number-input-750-1024x596.jpeg)
![WooCommerce×Stripe23](https://keimarublog.com/wp-content/uploads/2020/07/Credit-card-number-input-750-1024x596.jpeg)
テストモードではカード番号を「4242 4242 4242 4242」と入力。有効期限とセキュリティコードは適当でOKです。
入力が終わったら、[注文する] をクリックします。
![WooCommerce×Stripe24](https://keimarublog.com/wp-content/uploads/2020/07/Order-accepted-750-1024x596.jpeg)
![WooCommerce×Stripe24](https://keimarublog.com/wp-content/uploads/2020/07/Order-accepted-750-1024x596.jpeg)
注文が完了しました。
![WooCommerce×Stripe25](https://keimarublog.com/wp-content/uploads/2020/07/After-ordering-750-1024x596.jpeg)
![WooCommerce×Stripe25](https://keimarublog.com/wp-content/uploads/2020/07/After-ordering-750-1024x596.jpeg)
注文の詳細を見るため、[WooCommerce] → [注文] → [注文番号]をクリックします。
![注文詳細](https://keimarublog.com/wp-content/uploads/2020/07/Order-details-750-1024x592.jpeg)
![注文詳細](https://keimarublog.com/wp-content/uploads/2020/07/Order-details-750-1024x592.jpeg)
ここで詳細を見ることができます。
Stripe側の決済も確認してみます
![stripe決済後](https://keimarublog.com/wp-content/uploads/2020/07/After-stripe-payment-750-1024x615.jpeg)
![stripe決済後](https://keimarublog.com/wp-content/uploads/2020/07/After-stripe-payment-750-1024x615.jpeg)
支払が成功しました!
以上でWooCommerceの設定は終わりです。
今回はテストモードだったので簡単にできましたが、本番ではもっと細かい設定が必要になります。
ですがECサイトの構築は、Web制作において花形であり、需要は高いと思います。案件にすぐに対応できるようにするためにも、勉強しておいたほうがいいかと思います。
それではお疲れさまでした(^O^)/