WooCommerceで作るStripe決済のECサイト

WooCommerce、Stripe決済

以前からクレジットカード決済ができるECサイトのようなものを作ってみたいと思っていました。

考える人
自分

自分も作ってみたいなぁ・・・なんとかならないかなぁ?

と思って調べてみたら、WordPressでプラグインの「WooCommerce」と、決済サービスの「Stripe」を使えば、なにやら簡単にネットショップを作れそうだったので、試しに作ってみました。

この記事では、WordPressでプラグインの「WooCommerce」と決済サービスに「Stripe」を使用する方法を記載していますが、「Stripe」のアカウント登録方法に関しては省略してますので、ご自身にて事前にアカウント登録を行っておいてください。

それでは早速やっていきましょう!

プラグイン「WooCommerce」をインストール

プラグイン新規追加

管理画面より [プラグイン] → [新規追加] をクリックします。

WooCommerceプラグイン

[WooCommerce] を検索しインストールします。

WooCommerce Stripe Payment Gateway プラグイン

同様に[WooCommerce Stripe Payment Gateway]もインストールします。

Japanized For WooCommerceプラグイン

[Japanized For WooCommerce]もインストールします。

プラグイン有効化

インストールが完了したら、サイドメニュー [プラグイン] → [インストール済みプラグイン] より、先程インストールした3つのプラグインを選択し、[有効化]させます。

WooCommerceの設定

設定ウィザードを開始

プラグインを有効化するとWooCommerceの [設定の設定ウィザードを開始] ボタンが表示されるのでクリックします。

お願いしますボタン

[はい、お願いします] をクリックします。

この先、表示される必要事項に入力していきましょう。

ここでは割愛させていただきます。m(_ _)m

テーマ選択

最後にテーマを決めたら、必要事項の入力は終了になります。

結構ですボタン

JetPackは利用しないので [結構です] をクリックします。

商品の追加

Add your first product クリック

WooCommerceダッシュボードより、[Add your first product] で商品を追加していきましょう。

Add manualy クリック

[Add manually] をクリックします。

商品追加ページ

販売する商品名、画像、価格、説明などを入力します。

WooCommerce×Stripe13

画面右の [公開] をクリックします。
以上で商品ページの制作は完了しました。

Stripe決済の設定

[WooCommerce] → [設定] より [決済]タブを選択して、Stripeの[セットアップ]をクリックします。

WooCommerce×Stripe15

「Stripeを有効化」と「テストモードを有効化」にチェックが入っているのを確認します。
次にStripeのAPIキーを入力します。Stripeのダッシュボードより[テスト用公開鍵]と[テスト用秘密キー]をコピペしましょう

WooCommerce×Stripe16

入力が終わったら[変更を保存]をクリックします。

実際に購入してみる

WooCommerce×Stripe17

[WooCommerce] → [商品] より、商品編集ページにいきます。

WooCommerce×Stripe18

[パーマリンク] をクリックして商品ページにとびます。

WooCommerce×Stripe19

[カートに入れる] をクリックします。

WooCommerce×Stripe20

「〜〜〜をカートに追加しました。」と表示されたので、[カートを表示] をクリックします。

WooCommerce×Stripe21

[お支払へ進む]をクリック。

WooCommerce×Stripe22
請求先情報を入力します。適当でOKです。

WooCommerce×Stripe23

テストモードではカード番号を「4242 4242 4242 4242」と入力。有効期限とセキュリティコードは適当でOKです。

入力が終わったら、[注文する] をクリックします。

WooCommerce×Stripe24

注文が完了しました。

WooCommerce×Stripe25

注文の詳細を見るため、[WooCommerce] → [注文] → [注文番号]をクリックします。

注文詳細

ここで詳細を見ることができます。

Stripe側の決済も確認してみます

stripe決済後

支払が成功しました!

以上でWooCommerceの設定は終わりです。

今回はテストモードだったので簡単にできましたが、本番ではもっと細かい設定が必要になります。

ですがECサイトの構築は、Web制作において花形であり、需要は高いと思います。案件にすぐに対応できるようにするためにも、勉強しておいたほうがいいかと思います。

それではお疲れさまでした(^O^)/

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。