プラグイン

WooCommerceとStripeを結び付ける設定方法を解説!ワードプレスでカード決済可能に!

WooCommerceを使ってワードプレスでクレジットカード決済システムを作ろう!と思っても、いざやってみると結構難しいですよね。

そこでここではWooCommerceとStripeを結び付けて、ワードプレスでクレジットカード決済システムを作成する設定方法について説明していきます!

カツオのメルマガ

WooCommerceとStripeを結び付ける設定方法を解説!

では、さっそくWooCommerceとStripeを結び付ける設定方法について説明していきます!

ワードプレスでクレジットカード決済システムを動かしてく為には乗り越えないといけない部分なので頑張りましょう。

※前提条件として「WooCommerce Stripe ゲートウェイ」というプラグインが有効化されている必要があります。

設定画面に行く。

「WooCommerce」→「設定」→「決済」→stripeの「管理」をクリック。

WooCommerceの設定画面

stripeと結び付ける為の設定画面に遷移します。

有効化/無効化~Webhookエンドポイント

上から順に解説していきます。

WooCommerceの設定画面

まず、「有効化/無効化」では「Stripeを有効化」にチェックを入れます。

ここにチェックが入ってないとWooCommerceとStripeが繋がりません。

 

「タイトル」は商品を買ったお客さんに表示される画面のタイトル。

「説明」は商品を買ったお客さんに表示される画面の説明文。

分かりやすいものがいいですね。

 

「Webhookエンドポイント」が一番分かりにくいと思うのですが、これは簡単に言うと「自分のStripeアカウントに何か発生したら通知してくれる機能」です。

上記画像で表示した画面で赤い四角で囲ってある部分が「エンドポイント」と呼ばれるURLでこれをコピーして、Stripeのページに行き、指定の箇所に貼り付けていきます。

Stripeのアカウントにログインして「開発者」→「Webhook」と進むと下記画像のような画面に遷移するので「エンドポイントを追加」をクリック。

Stripeの設定画面

すると「Webhook エンドポイントの追加」というポップアップが表示されるので、「エンドポイントURL」に先ほどコピーしたURLを貼り付けます。

そして「エンドポイントを追加」をクリックして完了です。

Stripeの設定画面

「送信イベント」というのは、Stripeでどんな事が起こったら通知してくれるのかを指定できる部分なのですが、凄く沢山種類があり、正直迷うと思います。

どのイベントが発生したら通知を受け取るかは後から変更可能なので、一旦全てのイベントを受信する事にして、様子を見て取捨選択していくのもアリ。

僕は面倒に感じたので、とりあえず何もイベントは指定しませんでした。(その代わりStripeアカウントは頻繁にチェックした方が良い)

テストモード~Payment Request ボタン

先ほどの続きを解説していきます。

WooCommerceの設定画面

「テストモード」は「テストモードを有効化」にチェックを入れるとテストモード状態になります。

このテストモードは文字通りテストであって、実際に貴方のサイトでWooCommerceとStripeが上手く動いているかを確認する為のもの。

とりあえず自分で商品を買ってみて、決済、売上の管理など一通りの流れをチェックしたい時はチェックを入れておきましょう。

カツオ
カツオ
テストモードでは424242424242という架空のクレジットカード番号を使うので、実際にお金がかかる事はありません。

「テスト用公開鍵」「テスト用秘密キー」についてはStripeのアカウントにログインして「開発者」→「APIキー」で公開鍵とキーが手に入りますので、それをコピーしてそれぞれの場所に貼り付けておきます。

Stripeの設定画面

で、「テストモードを有効化」からチェックを外すと

「テスト用公開鍵」→「ライブ公開可能な鍵」

「テスト用秘密キー」→「ライブ秘密鍵」

という風に表示が変わり、実際にお金のやり取りが発生する本番モードに切り替わります。

WooCommerceの設定画面

「ライブ公開可能な鍵」も「ライブ秘密鍵」も、Stripeのアカウントにログインして「開発者」→「APIキー」から手に入れる事が出来ます。

※Stripeの管理画面で「テストデータを表示」と「テストデータの表示中」と切り替える場所があるので、そこで本番のキーとテスト用のキーを切り替えます。

 

「明細書表記 (英文字)」はお客さんのクレジットカード明細に表示されるものなので、何を買ったのかが分かりやすいものにした方が良いでしょうね。

 

「Payment Request ボタン」についてはチェックを入れておきましょう。

これが有効になっているとお客さんがApple Payなどを利用する事が可能になります。

Payment Request ボタンタイプ~ログ取得中

WooCommerceの設定画面

「Payment Request ボタンタイプ」「Payment Request ボタンテーマ」「Payment Request ボタンの高さ」は「Payment Request ボタン」のデザインを変える事が出来る部分ですので、お好みで調整。

 

「登録済みカード」はチェックしておくと、お客さんは便利ですね。

 

「ログ取得中」はデバッグメッセージを保存するかどうかを決める部分ですが、どっちでもいいと思います。

僕はサイトが重くなりそうなので、今はチェックを外してます。

 

最後に「変更を保存」を押すのを忘れずに!

WooCommerceとStripeを結び付ける設定方法 まとめ

ざっとポイントを拾う感じではありましたが、WooCommerceとStripeを結び付ける設定方法について解説してきました。

ここまでちゃんと出来ればWooCommerceとStripeはしっかり関連付けられて、クレジットカード決済システムが動くはずです。

基本的にはテストモードがONになっている状態なら、お金のやり取りの発生はしないので、色々自分で試しながらやってみるしかないですね。

カッパ君
カッパ君
やってみないと分からない部分も多いよね。

ただ、WooCommerceとStripeの設定は難しそうで、一つ一つ落ち着いて順番に見ていくと実は大して難しくはないので、恐れる必要はありません。

慣れるまではちょっとだけ大変ですが、頑張って設定してみましょう!

会社だけの人生を送りたい人は絶対読まないで下さい↓

カツオ
カツオ
参加無料のオンライン講座やってます。

副業で収入UPしたい!会社に依存したくない!スキルを身に付けたい!

そんな貴方は参加しなきゃ損!

カッパ君
カッパ君
参加者限定特典初心者でも月5万円稼げるブログノウハウをプレゼント!

参加者しか見れない秘密のコンテンツも盛りだくさん!

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
大学卒業後に就職した会社では会社人間となることを余儀なくされるが、「会社に魂を売っても仕方ないな」と気が付いて退社。 ネットで検索していたらブログから始めて初心者でも個人ビジネスが出来る事を知り、実践してみたところ、月収10万→30万→100万とどんどんステップアップ。 今はやりたくない事はやらない、魂に正直なライフスタイルを送っている。本業は坊主です。