WordPress + WooCommerce + Stripeでのオンラインショップ実装メモ

オンラインショップを作ることになった。

EC-Cube で本格的に作るか、

WordPress(以下wp) + BASEでサクッと作るか、

はたまた wp + 決済プラグインか・・・。

費用や要件から wp + WooCommerce(以下wc) にした。

決済プラグインは日本製の Welcart も迷った。

wc は確認画面が無いという欠点はあるが、

カスタマイズを知るグーグル先生の多さで決めた。

開発環境は Docker

しばらく VCCW で作ってたけど、

とにかく遅かった(設定のせいならごめんなさい)。

ここのリポジトリを使わせて貰いました。

で、普通にwpが動くとこまで準備する。

それでは改めて、まずはプラグインのインストール。

検索し、wcをインストール。

インストール後、有効化すると設定画面になる。

それぞれの環境に合わせ設定し、次へ進む。

※使用状況の追跡はどちらでも。

次は支払いについて。

アカウント登録無しでもクレジットカードが使え、

JCBも扱えるという点から、Stripe のみで次へ。

おすすめは、テーマとAdminだけにした。

続いてJetpack。

必要ではないけど、今回は連携する。

いらない時は下の方にある skipをクリック。

Jetpackのアカウント作成画面ぽくなるが、

これは wordpress.com のアカウントを作るってこと。

wordpress.com のアカウントを持ってる人は、

下の方の、すでにアカウントをお持ちですか?のとこ。

設定が完了すると、勝手にwcの設定に戻る。

戻ったら、商品を登録を押す。

wp管理になるので、テスト商品を登録する。

WooCommerce の設定を表示する。

一般、商品、税・・と相応しい設定にしていく。

続いて、決済のStripeの管理を押す。

まずは、Stripeのアカウントを登録する。

Stripeの登録画面になるので、

メアドとパスワードを設定して登録する。

認証メールが飛ぶので、本文内のボタンを押す。

設定した内容でログインすると認証され、

Stripeの管理画面になる。

wpの管理画面に戻り、Click here を押す。

Stripe と wc の連携画面になるので、

コンプライアンス関連の質問に答え提出ボタンを押す。

次に本番環境利用の申請を行い、

最後にアクセスを許可するボタンを押す。

うまくいけば wpの管理画面に戻り、

赤枠部分が自動で入力される。

Webhookエンドポイントを設定するため、

青枠をコピーし、赤枠のリンクを押す。

Stripeの管理画面になるので、

まずは、Stripeをテストモードにしておく。

押すとこうなる。

エンドポイントを追加ボタンを押す。

さきほどコピーしたURLをペーストし、

とりあえず、すべてのイベントを受信するを押してから、

エンドポイントを追加ボタンを押す。

署名シークレットをコピーし、wpの管理画面へ。

wpの管理画面でもテストモードにし、

Webhook Secretにペースト。

Stripeに戻り、メニューのWebhookの上にあるAPIキーを選択。

公開可能キーとシークレットキーをそれぞれ、

wp管理のテスト用公開鍵、テスト用秘密キーにコピペする。

一旦保存する。

これで、テストでのクレジットカード決済が可能になった。

公開画面の商品ページを開き、カートに入れる。

カートへ、そして支払いへと進む。

下へ進むと、クレジットカード(Stripe)の表示があった。

カード番号4242…と、任意のセキュリティコードと有効期限で、

テスト決済ができると書かれてある。

早速、個人情報とカード番号などを入力し、

注文ボタンを押すと、無事注文できた。

※確認画面は存在しないので、カスタマイズで追加しよう。

wcメニューの注文に表示された。

Stripeの管理画面でのメニュー『支払い』でも確認できた。

ちなみに返金する場合は、wpの管理から行う。

該当の注文の詳細ページを開き、

金額の下にある「払戻額」ボタンを押す。

払い戻す数量を入力しフォーカスを移動すると、

払い戻す金額が表示されるので確認し、

Stripeによって〜を返金しますをクリックする。

wp上で返金処理された。

Stripe管理上でも返金済みになった。

これで基本的なカート機能は完成。

wcの決済には銀行振込があるがこれは使えない。

日本用の銀行振込については下記で対応する。

WORDPRESS + WOOCOMMERCE に銀行振込を追加する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です