当サイトのショップはWoocommerceを利用しています。それに伴って、決済システムをStripeにすることにしました。
当サイトのテーマはCoccon、Woocoomerceとの相互性があるテーマとして特に推奨はされてはいませんが、Cocconを基本的には使っていきたいので、工夫しながらWoocommerceを使っています。
Stripeの最大の魅力は、利用料金が決済手数料の3.6％のみというシンプルさ。アカウント取得後すぐに導入できる上、システムコードの知識のない人でも簡単に設定できるのが良いですね。
今回は、WoocommerceにStripe決済をテスト環境で実行、支払い確認する方法について解説します。
Stripeのアカウントを取得する
登録は無料ですので、まずはアカウントを取得しましょう。
ご自分の会社（事業）情報を入力しますので、予め手元に用意しておくとスムーズに登録ができます。
今回は、アカウント取得方法の説明は省きます。
WoocommerceとStripeを繋げる
Woocommerce → 設定 → 決済 → Stripeをインストール。
インストールが終わったら、設定を行います。
Stripeを有効化に✅を入れる
名前・・・決済画面で表示される支払名
説明・・・決済画面で表示される説明文
Enable test mode(テストモードを有効化）に✅を入れる
Edit account keys（アカウントキーを編集）をクリック
するとこのような、項目が出てきます。
テスト用公開キー、テスト秘密キー、テストWebhook secretをそれぞれ設定していきます。これらは、Stripeのアカウントで取得します。
Stripeアカウント → テストモードに切り替え → 開発者（ Developpers）をクリック
（Stripeサイトが英語表記である点は、ご了承くださいね。）
開発者ページ → API keys
すると、公開キーと、秘密キーが表示されます。秘密キーは隠されていますので、表示するをクリックすると表示されます。
次にWebhook secretを取得します。
Webhookとは、この場合はStripeに関する出来事、例えば、支払い完了、登録内容の変更が行われた場合に、指定したメールアドレスに自動的に通知するよう指定することができるシステムです。
エンドポイントのURLは、先程のWoocommerce、Stripe決済設定のアカウントキー編集のページに載っています。
Developpers → Webhook → エンドポイントを追加する
エンドポイントのURLを入力したら、次にイベント(出来事)の設定をします。イベントは選択するようになっていますが、何を選んで良いのか分からない場合は、今後ショップに色んなことが追加されることを予想して、全てを選択しておけば間違い無いと思います。
追加すると、このような画面に移ります。
Webhook secretは、この署名シークレットのことです。
これでWebhook secretが取得できました。
先ほどの、Woocommerce、Spripe決済設定でアカウント編集でテスト公開キー、秘密キー、Test Webhook secret をそれぞれ入力して登録を完了させます。
これで、WoocommerceとStripe決済システムが繋がりました。
その他の設定
支払いと取引の項目
ユーザーが登録済みのカードで支払いができるようにするに✅を入れる
クレジットカード入力項目を個別にフォームに表示できるようにするに✅を入れる
お会計時に承認を発行し、後で料金を受け取るに✅を入れる
後は、銀行の取引詳細に表示される、ビジネスネームの表記設定、カスタマーオーダーナンバーを入れるかどうかを設定します。
全てを入力し終わったら、変更を保存をクリック。
これで設定は、完了しました。
支払いテスト
では、支払いが本当に行われているのかをテストします。
テスト環境で、カード情報を入力します。カード情報は、Stripeで用意されている番号を入力します。カード有効期限とセキュリティー番号は、任意の番号でO.Kです。
支払いが終わったら、Stripeのアカウントで確認します。
ちゃんと支払いがされていることが、確認できました。
まとめ
一見、決済システムの導入なんて難しそうですが、難しいコードを設定したりする必要は無いですし、設定に必要なコードは、全てStripeで簡単に取得できます。
Stripe本番導入は、また同じ手順を今度は本番環境ですれば良いだけです。
検索してもCocoonでWoocommerceを導入している例がほとんど見やたらなくて、試行錯誤しながら運営している当ショップですが、Stripe本番導入もスムーズに出来ました。
今回の内容が、少しでもお役に立てれば嬉しいです。
コメント