こんにちは、プロクラスの中山です。
最近オンラインショップ関連のご依頼が多く、今回はその中で困ったことを解決した時のお話です。
自分のオンラインショップを自分で作りたいという人よりは、Webデザイナーやプログラマー向けの内容です 😛
目次
Stripeのクレジットカード入力欄が出てこない
セキュリティの向上などのために、WordPressのオンラインショッププラグインであるWooCommerceなどをアップデートした時に今回の問題が発覚いたしました。
諸々プラグインを更新した後に購入のテストを行おうと思ったら…
あれ？Stripeのクレジットカード決済情報を入れる入力欄がぺっちゃんこになって表示されていない！？
▼正常な状態の入力欄
▼Stripeの入力欄がなくなっている状態（ぺっちゃんこで入力ができない）
Stripe（ストライプ）とは
Stripeとは、オンラインショップで決済を行う際にクレジットカードを使えるようにしてくれる決済代行サービスです。
これらの決済代行サービスがない場合は、WooCommerceでは銀行振込や代金引換（代引き）しか使えないので、現在のECサイトでは契約必須と言えます。
カードの処理が完了したらWordPressの管理画面では自動的に支払い済みステータス（処理中）の状態にしてくれるなど、WooCommerceと連携するプラグインが用意されています。
原因はテーマファイル？
WordPressで困ったことが起こった時は、まずは原因を切り分けましょう。
「テーマのせい」「プラグインのせい」のどちらかの場合が多いです。
※その他にも「WordPress本体をバージョンアップしたせい」「一時的なサーバー障害のせい」や「ネット環境のせい」「PHPプログラムのバージョンのせい」などもありますが、今回は除外します。
プラグインは結構たくさん入れているので、まずは手っ取り早くテーマを変えてみました。
WordPressが発行しているデフォルトテーマに一時的に切り替えてみるのが良いでしょう。動作確認を行なっているのはテスト環境なので、見た目が変わってしまっても問題ありません。
するとあっさりと入力欄は本来あるべき姿に戻りましたので、原因は「テーマファイル」の中にあるようです。
ブラウザの検証ツールで状況を確認
とはいえ、どこがどうおかしいのかわからないので、Google Chromeの「検証ツール（デベロッパーツール）」でチェックをしてみましょう。
おや？本来は<div>というタグの中の入力欄である<input>タグが表示されているはずのところが空っぽですね。
その代わりコメント（メモのようなもの）が表示されているようです。
表示されている文字で検索してみよう
a Stripe Element will be inserted here.
どうやら、「ここにストライプの入力欄が入る予定ですよ〜」というメモですね。
しかし何らかの理由で出てくるべきパーツが出てこなくなってしまっている。つまり何かしら動き出すはずのプログラムがストップされてしまっているような感じでしょうか。
困った時は、絶対に同じことで困っている人が世界のどこかにいるはず。
この文字列をそのまま検索してしまいましょう！
すると、ありました。まさしくこの文字を見つけて困っている人がたてたサポート記事です。タイトルそのままですね…
ヒントとなる記事の内容
英語ではちょっと読みにくいかなということで、下記はGoogle翻訳した記事です。
エリーアンジェリカさんも同じ現象にあってしまったようですね。
サポートしてくれる人たちに状況を話しながらヒントを得て、エリーアンジェリカさんはついに修正方法を見つけました。
どうやらエリーアンジェリカさんがテーマを作ったんじゃなかったみたいですね。
私と同じ状況です。今回アップデートしているオンラインショップサイトは私ではなく、別のスタッフが作ってくれたサイトでした。
（しかも以前いた子なので間違ったところがあっても聞いたり直してもらったりできない…）
jQueryのファイル、怪しいですね。
jQuery本体の重複読み込みが原因！
まさかのエリーアンジェリカさんとほぼ同じ原因でした。
jQueryの本体が複数設置されており、ヘッダーにもフッターにも設置されていました。これらのプログラムがコンフリクト（ぶつかり合って喧嘩してしまう）を起こしていた模様です。
WordPressのテーマ制作の際、初心者だとWordPress本体がjQueryのファイルをもともと読み込んでくれていることを知らないパターンって多いんですよね。
さらに、javascriptにあまり詳しくない人は参考サイトを見ながらコピー＆ペーストで動かしたりするので、すでに設置済みなのに不要なjQueryの読み込みを追加してしまったり…
ヘッダーにWordPressが自動で読み込んでくれるjQueryと、CDNで呼び出しているjQuery、さらにfooterにももう一つ別のバージョンのjQueryファイルが読み込まれていました。
1つでいいものが3つも…今まで動いていたのが奇跡ですね。
喧嘩していた不要なものは削除させていただき、コンフリクトは解決しました。
Stripeの入力欄って、javascript（jQuery）のプログラムで表示されてたんですね。
終わりに
WordPressと有名なプラグインは世界中に使っている人がいるので、同じようなことで悩んでいる人の情報がたくさんネット上に転がっています。
その点、一つの答えだけを教えてくれるChat GPTよりも色々なパターンを見れるGoogle検索の方が解決までのルートが近かったりヒントを得られたりすることがあります。
なので、英語での記事も複雑な内容になってくると実は結構参考になります！プログラムは世界共通の言語だから通じるのがありがたい。
英語を読みながら、もしくはGoogle翻訳を駆使しながらだとできることがさらに広がりますよ。
もちろん、日本国内の方のブログなどにも有益な情報がたくさんあるので、まずは日本語で検索してみてからでいいと思いますけどね 🙄
日本での情報がなくても、諦めないでください。
これから勉強したい人や、現在勉強中またはプロとして活躍中の人はどんどん検索し、頑張って問題解決していきましょう〜！