質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

SimpleMembershipでStripe決済ボタンを設置しようとすると本番環境でエラーが出る

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 92

score 2

お世話になります。下記エラー状況の解消に向けて、アドバイスをいただければ幸いです。

【現状と解消したいエラー】
現在WordPressサイトで「SimpleMembership」プラグインを利用して有料会員サイトを運営しております。
いままでPayPal決済のみで対応していたのですが、決済方法にStripeも導入しようと、
本番WordPressサイト(現在運用している本番ドメイン。仮に「Xサーバー上のhttps://A.com」と呼びます。)
と同一サーバー上のテスト環境(仮に「Xサーバー上のhttps://B.com」と呼びます。現在は運用していない別ドメインを使っています。)で以下の状況下で動作テストをしました。
結果、「Xサーバー上のhttps://B.com」では正常に動きました。

・同一テーマ(TCD AVANT)
・同一プラグイン(設定も同じ)
・同一サーバー(Xサーバー)

ところが、いざ本番の「Xサーバー上のhttps://A.com」に実装しようと
非公開ページに同一設定で決済ボタンを設置したところ、
「購入する」ボタンを押すと、以下のエラー画面に遷移してしまいます。

Error occurred: No API key provided. (HINT: set your API key using "Stripe::setApiKey(<API-KEY>)". You can generate API keys from the Stripe web interface. See https://stripe.com/api for details, or email support@stripe.com if you have any questions.

エラーが発生しました:APIキーが提供されていません。 (ヒント:「Stripe :: setApiKey(<API-KEY>)」を使用してAPIキーを設定します。StripeWebインターフェイスからAPIキーを生成できます。詳細についてはhttps://stripe.com/apiを参照するか、support @に電子メールを送信してください。ご不明な点がございましたら、stripe.comをご覧ください。

ちなみに、Stripeのサポートセンターにも問い合わせましたが、Stripe側には問題はなく、WordPress側は調べられないため解決できませんでした。
また、今回WordPressサイトとの接続を確認したStripe環境は「テストモードのみ」です。(Live環境では試していません)

【現在確認できている状況(プラグインから出力されるはずのStripe('')の値が取得できていない)】

まず、凡ミスを疑ってAPIキーは何度もテスト環境と同一だということを確認しました。
よって、入力ミスなどAPIキー設定が間違っているということではありませんでした。
そこで、
エラーが出てしまうサイトの決済ボタン配置ページのHTMLを確認したところ、以下の部分が空欄になってしまっていることが確認できました。

コード
<div class="swpm-payment-button">
<div class="swpm-button-wrapper swpm-stripe-buy-now-wrapper">
 <form id='swpm-stripe-payment-form-12345' action='http://test.local/?swpm_process_stripe_sca_subscription=1&ref_id=swpm_7xxxxxxx' METHOD='POST'> 
<div style='display: none !important'>
<script src="https://js.stripe.com/v3/"></script>
<link rel='stylesheet' href='https://checkout.stripe.com/v3/checkout/button.css' type='text/css' media='all' /><script>
//該当部分 本来 var stripe = Stripe('pk_test_xxxxxxxx')とStripeキーが入るべき場所が空欄
        var stripe = Stripe('');
//該当部分ここまで
        jQuery('#swpm-stripe-payment-form-12345').on('submit',function(e) {
            e.preventDefault();
            var btn = jQuery(this).find('button').attr('disabled', true);

また、GoogleDeveloperToolのConsoleでは当然のように

Uncaught IntegrationError: Please call Stripe() with your publishable key. You used an empty string.

と文字列が空だとしてエラーが出ています。

変数 stripe の中身を「console.log = stripe;」とConsoleに入力して確認してみましたが

  undefined 

と返ってきてしまいます。
正常に動作しているサイトでは

e {_listenerRegistry: {…}, retrieveSource: ƒ, …}
verifyMicrodepositsForSetup: ƒ (r,a)
_apiKey: "pk_test_xxxxxxxx"

と返ってきます。

【試したこと】
(以下大幅に追記と変更をしました)
■ややこしくなるので今の検証環境の表記を整理しておきます。
1)Xサーバー上のhttps://A.com ※本番環境
2)Xサーバー上のhttps://B.com ※テスト環境
3)Local A ※ローカル環境上にhttps://A.comをコピーしたもの
4)Local B ※ローカル環境上にhttps://B.comをコピーしたもの
Xサーバー設定が原因なのか?WordPressが原因なのか?を切り分けたく、上記4種を用意しました。

■Stripe購入ボタンの状況
いずれも、SimpleMembershipのStripeボタン設定は
・Stripe管理画面で「テストモードを表示」をON
・プラグインの支払ボタン新規作成で「Stripe SCA Subscription」を選択
・Test用入力欄にTestキーを入力
・Live用入力欄は空欄
(※「Use Global API Keys Settings」のチェックははずしています。)
で設定しています。

  1. WPテスト環境「Xサーバー上のhttps://B.com」を作成してボタンを設置 :WPテスト環境ではStripeテスト環境が正常に動作することを確認
    ・同一テーマ(TCD AVANT)
    ・同一プラグイン(設定も同じ)
    ・同一サーバー(Xサーバー)
    の状態で設置してみました。

  2. ローカル環境「Local A ※https://A.comをコピーしたもの」を作成してボタンを設置 :エラーが出ることを確認

  3. ローカル環境「Local B ※https://B.comをコピーしたもの」を作成してボタンを設置 :正常に動作することを確認
    よって、Xサーバーの設定ではないと考え、意向はローカル環境でテストしました。

  4. 正常に動作するLocal Bへ、エラーがでるLocal Aのテーマとプラグインをコピー :正常に動作することを確認

All in One Migrationを使って、エラーが出るWP本番環境のデータベース以外の部分をコピーしてみましたが、正常に決済画面に進めました。
また、エラーが出ているサイトのプラグインをSimpleMembership以外すべてOFFにしましたが解決しませんでした。
よってプラグインやテーマの問題ではないと思っております。

  1. 正常に動作するLocal Bへ、エラーがでるLocal Aデータベースをコピー:テスト環境では正常に動作することを確認
    試しにデータベースもコピーしてみました。ただし、MySQL の wp_options 以外です。

上記のように、正常に動作するWPサイトとエラーが出る本番サイトの違いを比較しようと色々と検証したのですが、原因が特定できませんでした。

【お聞きしたいこと】
上記エラー内容をご覧いただいた上で、考えられる原因はわかりますでしょうか?

また、他に原因特定に役立つ検証方法などあればご教授いただけると嬉しいです。
上記の試した内容を踏まえて、使用テーマ・プラグイン・Sripeの購入ボタン設定の入力ミスが原因ではないとは思いますが、もし漏らしている検証方法などありましたらお教えいただければ幸いです。
また、Stripeサポート以外で、他に質問する適切な場があればお教えいただければ助かります。

何卒よろしくお願い致します。

【追記】
検証したサイトがわかりづらくなってしまっているようなので、表記を統一して変更しました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kawai_haruka

    2021/06/12 14:19

    tabuu様

    ご質問ありがとうございます。
    確認ですが、
    SandBoxのON/OFFというのは、Stripe管理画面で「テストモードを表示」のON/OFFのことでしょうか?
    であれば、今回検証しているすべてのボタン設定は、本番環境であれテスト環境であれ

    ・Stripe管理画面で「テストモードを表示」をON
    ・プラグインの支払ボタン新規作成で「Stripe SCA Subscription」を選択
    ・Test用入力欄にTestキーを入力
    ・Live用入力欄は空欄
    (※「Use Global API Keys Settings」のチェックははずしています。)

    で統一しております。
    また、本番環境、テスト環境がややこしくなってしまうため、本文の呼称を変更して整理しました。

    キャンセル

  • tabuu

    2021/06/12 14:55

    >SandBoxのON/OFFというのは、Stripe管理画面で「テストモードを表示」のON/OFFのことでしょうか?

    いえ、SimpleMembershipの設定です。

    本番環境がPaypal決済を稼働しているということはSimpleMembershipのSandBoxがオフに
    なっているということではないでしょうか?
    その状態でどのようにStripeのテスト環境と接続しているのか気になります。

    キャンセル

  • kawai_haruka

    2021/06/12 15:39

    tabuu様

    ありがとうございます。
    仰る通りSandBoxのEnable Sandbox Testingのチェックが

    WordPressの本番環境は
    SandBoxがOFF、
    Test用の入力欄にStripeのTestキーを入力

    WordPressの検証環境は
    SandBoxがON、
    Test用の入力欄にStripeのTestキーを入力

    の状態になっておりました。
    完全に見落としておりました。

    ためしに、検証環境でチェックをはずしたところ、同様のエラーが出ましたので、原因がこのSandBoxがOFF状態でTestキーで検証していた所為だとわかりました。

    だいぶ遠回りしてしまい、時間を無駄にしてしまったようです…
    ご助言いただき大変助かりました。
    ありがとうございました。

    キャンセル

回答 1

check解決した方法

+1

▼SimpleMembershipの決済ボタンがStripeのテスト用キーを使用しているにもかかわらず、
▼SimpleMembershipのSandboxがOFFの状態(Enable Sandbox Testingのチェックが外れている)だったことが原因

でした。

私の設定項目に対する理解不足でした。

WAFの可能性をご指摘いただいたyuki84web様、
的確に見直しポイントをご指南いたいたtabuu様、ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る