今回サイトリニューアルにあたりWoocommerceを導入しています。Woocommerceを選んだ理由の1つはStripeを使ってオンライン決済を導入できるからです。ということでWoocommerceにStripe決済を導入する手順をまとめておきたいと思います。
ちなみに今回はStripeでのアカウント作成、事業情報や銀行口座情報等の登録は省きます。本番環境利用の申請は完了し、あとはWoocomemrceとStripeの連携を終わらせるだけ、という状態です。
APIキーを取得する
テスト環境用
Stripe管理画面右上の「開発者」→「APIキー」と進みます。公開可能キーとシークレットキーが表示されるので控えておきます。
本番環境用
右上の「テスト環境」というボタンをクリックすると本番環境用の公開可能キーとシークレットキーが表示されるので、こちらも控えておきます。
WordPress側でAPIキーを入力する
Stripe側で入手したAPIキーをWordpress側で設定します。「Woocommerce」→「Stripe」→「決済」と進みます。ちなみに僕の管理画面では、表示言語を英語と日本語によく切り替えたからか、「決済」タブ内のみ英語になっています。
「設定」タブ内「Edit account key」から公開可能キーとシークレットキーを入力します。
Stripe側でエンドポイントを設定する
再びStripe側に戻り、Webhookエンドポイントを設定します。「エンドポイントURL」にWoocommerceの設定画面で表示されていたURLを入力し、「エンドポイントを追加」をクリック。
送信するイベントの選択を選ぶところで「全イベントを選択」をクリックし、「イベントを追加」へと進みます。
Woocommerce側でシークレットキーを設定する
エンドポイントを設定すると「署名シークレット」が設定されるので、再びWoocommerce側に戻って、このシークレットキーを入力します。
ここまで進んで気づきましたが、Stripe側で先にエンドポイントを設定しておけば、APIキーとWebhookエンドポイントの入力が一度で済んだかも。
テスト注文
Woocommerce側でAPIキーとWebhookエンドポイントの入力が終わったら、テスト注文をしてみます。Stripeが用意してくれているクレジットカード番号があるので、テスト注文では自分のクレジットカードを用意する必要がありません。
注文情報の確認
決済が完了しているかStripeの管理画面から確認します。「支払いが成功しました」という表示がありますね。100円の売上に対して4円の手数料がかかり、96円の純売上になっていることが確認できます。
「残高」タブに移ると、入金予定金額が96円となっていることが分かります。なお当然ですが、今回の注文はテスト注文なので、実際に入金されることはありません。テスト環境でここまでシュミレート出来るのは素晴らしいですね。
本番環境への変更と実際に注文
決済の設定がうまく出来ていることが確認できたら、いよいよ本番環境に切り替えます。Woocommerceの管理画面から設定へ進み、「Live」を選んで公開可能キー、シークレットキー、Webhookエンドポイント用キーを入力します。
本番環境で実際に注文してみます。テスト環境で表示されていたStripeが用意してくれていたダミークレジット番号に関する表記が、注文確認画面から消えていることが分かります。注文が完了し、Stripeの管理画面上でも売上が確認出来たので、実装は完了とします。数日以内に入金があるはず。
お疲れさまでした！
