決済の本番環境設定とGoogleマイビジネスの最適化
決済導入前の準備はできていますか？
今回は、
インターネット上で商品を販売する際の決済について解説と作業をしていきます。
DAY9でWordpressを導入し、
WordPressテーマにAstra,
プラグインは、
Starter Template
Elementor Website Builder
WooCommerce
WooCommerce Stripe Payment Gateway
WooCommerce Direct Checkout
Japanized for WooCommerce
Loco Translate
までのインストールと有効化を終えておられるはずです。
その後、
DAY11で解説した
・特定商取引法に基づく表示
・プライバシーポリシー
・個人情報保護規約ページ
・業界別規約ページ
・自社(者)概要ページ
を固定ページで作成し、
ページのフッターにリンクがある状態になっていますでしょうか？
また、
DAY12でお話した決済プラットフォームのStripeのアカウント(利用)申請はされましたか？
Googleマイビジネスも申請もお済みでしょうか？
そして、
DAY20で商品構成を検討し、
いくつか商品登録をしておられますか？
ここまでの作業を終えていることを前提に本日は解説と作業を案内していきます。
まだ、終えていない作業があれば、
上記作業を終えてから、本日DAY23に取り組むようにしてください。
WebサイトとStripeの連携作業
ハブサイト用のWebサイトのページ上からカート機能や決済機能を実際に使えるようにしていきます。
この作業が完了すると、実際の商品販売ができるようになります。
Webサイトにログインし、
左側メニューの「WooCommerce」「設定」から「決済」タブを開きます。
いくつもの決済方法が並んでいますが、
そのうち「Stripe-クレジットカードで支払う」のすぐ横のボタンで「有効」にします。
そして同じ行の右側の「管理」もしくは「設定を完了」をクリックします。
Stripeページの「設定」タブを開き、
「Stripeを有効化」に☑を入れ、
「名前」欄は「クレジットカードで支払う」と入力し、
「Enable test mode」に☑を入れます。
Stripeには、テストモードと本番モードが用意されており、
テストモードは動作確認などに使用します。
間違っても本番モードで自分のクレジットカードを使って決済しないようにします。
自己決済は規約違反なので、忘れた頃にいきなり利用停止措置がとられますので、くれぐれもご注意ください。
まずは、テストモードで各種セッティングを完了し、
その後本番モードに移行します。
なお、
本番モードは利用申請が承認されていない場合は、
まだ使用できませんが、
作業内容はテストモードと同じですので、
利用承認されてから、ご自分で作業を完了までなさってください。
次に
「Edit account keys」ボタンを押します。
ここに、
あなたのStripeのAPI情報を入力して設定を完了することで、
WooCommerceとStripeを連携させることができます。
開いた画面には、
「本番」と「試験（テスト）」があります。
今は「試験（テスト）」タブを開きます。
入力ヶ所はStripeのAPI情報を入力する欄ですので空欄になっています。
入力ヶ所の２行目と３行目の間に「Webhookエンドポイント」の横にURLがあります。
これをコピーしておいてください。
このままページは開いたままで、
コントは別のタブなどでStripeにサインインしてください。
ダッシュボードが開いたら、
右上の「テスト環境」がオンになっていることを確認し、
その横「開発者」をクリックします。
開いたページから、
「Webhook」タブを開き、
右側の「+エンドポイントを追加」をクリックします。
表示された開発者ページで、
「エンドポイント URL」欄に先ほどコピーしたURLを貼り付けます。
「説明」欄はサイト名などを任意でいれましょう。
次に、「+イベントを選択」をクリックし、
「全イベントを選択」し「イベントを追加」ボタンを押します。
そうして表示されたページを一番下までスクロールして「イベントを追加」をクリックします。
開発者ページに戻ると「オンラインエンドポイント」に
コピーしてきたURLが追加されていることを確認し、
そのURLをクリックします。
開いた画面の上部「署名シークレット」下の「表示」をクリックし、
表示された文字列をコピーします。
この文字列を、
Webサイト側の３行目「TEST WEBHOOK SECRET」に貼り付けます。
次にStripeの開発者ページに戻って、
今度はAPIタブを開きます。
右側の「+シークレットキーを作成」ボタンを押し、
「キーの名前」を何か入力し、表示された文字列をクリックし「クリップボードにコピー」機能を使ってコピーします。
このコピーした文字列をWebサイトサイトの２行目「TEST SECRET KEY」に貼り付けます。
また、Stripeに戻って、
追加された「キーの名前」と同じ行の「トークン」の文字列をコピーし、
Webサイトの１行目「TEST PUBLISHABLE KEY」に貼り付けます。
ここまで３行ともにゅうりょくできれば、
「接続テスト「」を押して問題なければ、
「Save test keys」を押します。
これで連携完了です。
そのままWebサイトの
「Enable payments via saved cards」と「Enable separate credit card form」にも☑を入れて、
「save changes」で保存します。
お気付きだと思いますが、
本番モードも基本的に同じ流れで、
APIキー発行などを本番タブで行うだけです。
本番モードでStripeを使う場合、
Stripe側のダッシュボード右上」の「テスト環境」をオフにするのを忘れないようにしましょう。
さて、
テストモード（環境）で設定を完了したら、
登録している商品のどれかで決済を試してみましょう。
テストモード決済の場合は、
カード番号は「424242424242」で、
有効期限は未来年月で、CVCは任意の3桁数字で大丈夫です。
ここまでの流れに問題ないかを確認してください。
問題なければ、テスト環境ではなく、本番モードで設定完了なさってください。
ここまでできれば、
あなたの商品はクレジットカード決済でのみ購入可能となりました。
他の支払方法も活用する
他にも「銀行振込」を支払い方法として用意する場合は、
左側メニューの「WooCommerce」「設定」から「決済」タブから、
「銀行振込（日本国内向け）」を有効にして「管理」から振込先口座などを設定してください。
こうすると、
お客さんが「銀行振込」で「注文する」と、
購入確認の自動返信メールに振込先が記載されるようになります。
こちらも設定完了したら、
自分で購入プロセスを実践してメール表記内容などを確認しておきましょう。
その他のお支払方法も利用したい場合は、
必要な方法を有効にして各種設定などをなさってください。
EC仕様の購入プロセスをシンプルにする
WooCommerceはEC仕様ですので、
カート機能があります。
販売商品がひとつであったり、
複数商品の購入を前提としない場合は、
カート（お買い物カゴ）ページを経由せず直接購入ページに遷移させることができます。
左側メニューの「WooCommerce」「設定」から「Direct Checkout」タブを開いて、
「General」画面で以下のように設定し、
「Products」タブを開いて以下のように設定すれば、
商品の購入ボタンからカートを経由せず決済ページが開くようにできます。
また、
この「Direct Checkout」の「checkout」タブの
「Remove checkout fields」欄で、
商品購入時に取得する必要がない項目を入れると、
購入画面での入力項目を減らせます。
これは全ての商品に適用されるので、
ダウンロード商品やバーチャル（デジタル）商品と物販が混在する場合は不向きです。
少しコードを使いますが、
混在する場合の対処法を以下の記事で解説していますので、
必要であれば参考になさってください。
WooCommerceの決済ページで、メールアドレス以外の項目を消す方法
https://life-timers.jp/remove-checkout-fields/
Googleマイビジネスの最適化
Googleマイビジネスの設定が完了すると、
Chromeで申請に使用したGoogleアカウントでログインした状態で、
「Googleアプリ」から「ビジネスプロフィールマネージャー」を開くと
あなたのGoogleマイビジネスが開けます。
営業時間や定休日など、
適宜メンテナンスしましょう。
入力できる箇所はなるべく豊富に入力しておきましょう。
自宅事務所にしている人は、
きちんと屋号などで郵便物が届くように表札追加するなどしておきましょう。
本日は以上となります。
明日DAY24は、
最初の特別講義です。
もうご予約はお済みですか？
ご希望されない場合は、
DAY24のページをご確認のうえ、
DAY25へと進んでください。
