WooCommerce向けWordPressテーマ「Japacart(ジャパカート)」

Japacartアフィリエイトプログラムを開始しました

WooCommerceとStripeを連携させるには、下記作業が必要になります。

  • WordPress側にStripe決済の専用プラグイン「WooCommerce Stripe ゲートウェイ(WooCommerce Stripe Payment Gateway)」をインストールする
  • StripeでAPIキーを発行してWordPress管理画面の「WooCommerceの設定画面」で入力をする。

事前準備
WooCommerce Stripe Payment Gatewayのインストール

WordPress管理画面 プラグイン > 新規追加 > プラグインの検索窓で「woocommerce stripe」で検索をすると「WooCommerce Stripe Payment Gateway」プラグインが表示されます。「今すぐインストール」を押して「有効化」してください。

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

https://stripe.com/jpへアクセスし、「今すぐ始める」ボタンを押します。


メールアドレス、名前、パスワードを入力して「アカウント作成」ボタンを押します。


もしここで「どのように開始しますか?」というポップアップが表示された場合は「今はスキップ」のボタンを押してください。


ダッシュボードが表示されます。一旦ウィンドウを閉じても大丈夫です。

💡 もしダッシュボードが日本語になっていない場合は、ダッシュボード右上の人のマーク > Profile(プロフィール) > Language(言語)プルダウンで「日本語 – Japanese」を選択して「Save」ボタンを押してください。


先ほど入力したメールアドレスにStripeからメールが届きます。メール本文の「メールアドレスを確認」ボタンを押して下さい。
ボタンを押すと再びStripeのダッシュボードが開きます。

Stripeから届くメールの本文

Step2 Stripe本番環境利用の申請

テストモードでの利用はこちら

Stripeのダッシュボードで、メニューから「本番環境利用の申請」をクリックします。


必要事項を記入の上、同じページの一番下で2段階認証の設定を行います。

2段階認証は、今後、Stripeサイトにログインや設定変更を行う際に必要な認証となります。
ここでは「SMSを使用する」を選択して設定をしていきます。

「SMS認証」は、登録した電話番号に6桁の数字が記載されたショートメッセージが届き、それを入力してStripeサイトにログインするというものになります。
認証は毎回必要となる訳ではありませんが、重要な設定の変更時や、前回のログインから時間が経過している場合などに必要となるようです。

SMS認証の流れ

必要事項に記入の上、2段階認証で「SMSを使用する」を選択してください。

💡 電話番号は最初の「0」を取り除いて記入してください。例) 090 1234 5678 → 90 1234 5678
💡 登録した内容は登録完了後、左メニュー設定 > ビジネス設定 で変更可能です。

記入例 : 個人でイラストをダウンロード販売する場合


ポップアップが表示されますので、最初の「0」を取り除いた携帯電話番号を入力して「電話番号を確認」ボタンを押してください。


携帯電話にショートメッセージで6桁の数字が送られてきますので、下記画面に入力し、「確定」ボタンを押します。


「有効になりました」のメッセージが表示されたら完了です。

緊急バックアップコードを控えて、大切に保管してください。(携帯の電話番号へアクセスできなくなった場合などに使用するものです)

💡 もし「緊急バックアップコード」を控えるのを忘れてしまった場合は、ダッシュボードの右上の人のマーク > プロフィール > 二段階認証バックアップコードを生成」をクリックして、新規にコードを生成してください。

これで本番環境の申請が完了しました。

※Discover / JCB / Dinersに関しては数日後に「審査OK」の連絡が電子メールで送られてきます。

💡 Discover / JCB / Diners カードアイコンはデフォルトでは支払い画面に表示されません。
[外観] > [カスタマイズ] > [Woocommerce] > [カードアイコン] で表示設定をしてください。(※Japacartテーマの機能です)

Step3 StripeとWooCommerceを連携させる

WordPress管理画面 WooCommerce > 設定 > 決済タブStripe – クレジットカード (Stripe)」 をオンにして「管理」ボタンをクリックします。


  1. 「テストモードを有効化」のチェックを外します。
  2. 「Webhook エンドポイント」のURLをコピーします。
  3. その隣にある「Stripe アカウントの設定」リンクをクリックしてStripeの「エンドポイント」ページに移動します。

  1. 「+エンドポイント」を追加ボタン(画面右上)を押して、「エンドポイントURL」欄に先ほどコピーしたURLを貼り付けます。
  2. 「バージョン」と「送信イベント」プルダウンはそのままで、その下の「すべてのイベントを受信」リンクをクリックして、送信イベントを追加します。
  3. 「エンドポイントを追加」ボタンを押します。

Stripe側で何かアクションが起きたときにWooCommerceへ通知を送り連携させる仕組みです。


公開可能キー、シークレットキー、署名シークレットの取得

引き続き、Stripeの画面で開発者 > APIキー 標準キーの「公開可能キー」と、その下の「シークレットキー」を「本番環境のキーを表示」ボタンをクリックして表示した上でコピーして控えておきます。

開発者 -> Webhookに移動して下記を行います。

  1. エンドポイントURLをクリック
  2. 署名シークレット」を「クリックして表示」ボタンを押して表示した上で、コピーをして控えておきます。

WordPressの管理画面で、WooCommerce > 設定 > 決済タブ でコピーをしておいた下記の3つのコードを入力します。

  • ライブ公開可能な鍵公開可能キーを入力
  • ライブ秘密鍵シークレットキーを入力
  • Webhook Secret署名シークレットを入力

入力後、画面一番下の「変更を保存」ボタンを押して保存します。


これでStripe決済で商品の購入が可能になりました。

初回の決済発生時に本人確認の手続きが必要になります。Stripeからメールが送られてきますので、そちらに従ってください。

Step4 Stripe決済画面の各項目設定

APIキー以外の部分も設定していきましょう。

設定例

有効化 / 無効化

チェックをして「Stripe を有効化」しておきましょう。

タイトル、説明

購入画面のStripeに表示されます。基本的にデフォルトのテキストのままで良いでしょう。

インラインクレジットカードフォーム

チェックを入れると購入画面の「カード番号」、「有効期限」、「CVC」の入力欄が1つのフィールドに合体します。
お好みで設定してください。

1つのフィールドに合体

明細書表記 (英文字)

ご購入者の銀行の明細書などに表示されることがあります。ただし、金融機関によります。
(単に「オンライン決済」と表示されることもあるようです)

屋号や氏名を大文字で入力してください。

即時売上

「すぐに料金を回収」にチェックを入れると、商品の注文と決済が同時に完了します。売上の回収漏れを防ぐためにも、通常はこの設定で良いでしょう。

何らかの理由で決済確定を遅らせたい場合はチェックを外します。

遅らせたいケースについて

購入者へ返金処理を行った場合、店が売上時にStripeへ支払った決済手数料(2020年8月現在 3.6%)は戻ってきません。
そのため、例えば返品対応をする場合は店側が手数料を負担することになります。
購入者が誤って複数注文してしまった等の事故を防ぐために「与信」設定にすることも可能です。
参考 : Stripe はオーソリ (与信) とキャプチャ (売上請求) に対応していますか?

またダウンロード商品など、1度に複数注文されることが無いであろう商品については、1回の決済で1つしか注文できないように商品登録ページで設定をして、注文数の事故を未然に防ぎましょう。

WooCommerce「商品の登録」基本的な商品:個別販売

Payment Request ボタン

「Payment Request ボタンを有効にする」にチェックを入れると利用者が「Apple Pay」と「Chrome Payment Request API」を利用することができます。

ただ、Apple Payで対応し切れていなかったり、Chrome APIボタンが表示されることにより、カートページのボタンがややこしくなるような気がしますので、チェックを外しておくことをおすすめします。

オンにするとChromeで表示されるボタン

登録済みカード

「登録済みカードでの支払いを有効化」にチェックを入れると使用したことのあるカードの候補が次の購入時に表示されます。

ログ取得中

ログを保存する場合は、チェックを入れてください。

ログはWooCommerce > ステータス > ログタブで確認できます。

テストモードでの利用

本番の前にテストモードで動作確認をする方法です。
テストモードにすると、テスト用Visaカード番号「4242 4242 4242 4242」を使用して、疑似的に支払いができるようになります。

Visa以外のカードについても検証することが可能です。

Stripeサイトでの作業

左サイドバーの「テストデータの表示」ボタンをオンにし、「公開可能キー」、「シークレットキー」、「署名シークレット」を取得します。

取得の方法は本番設定と同じです。Step3の「公開可能キー、シークレットキー、署名シークレットの取得」でご確認ください。

WooCommerce Stripe決済画面での作業

WordPress側では [WooCommerce] > [設定] > [決済]タブ Stripe「管理」ボタン押して、Stripeの設定画面に移動し、テストモードの有効化のチェックボックスをオンにしてください。

その上で、Stripe画面 で取得した「テスト用公開鍵」、「テスト用秘密キー」、「テスト Webhook シークレット」を入力します。

  • テスト公開鍵公開可能キーを入力
  • テスト用秘密キーシークレットキーを入力
  • テストWebhook シークレット署名シークレットを入力

ネットショップ向けWooCommcerce対応WordPressテーマ Japacart(ジャパカート)