Photo by
mitsuki_haruta
Stripe.jsが表示されないときは広告ブロックが原因かも
初めましてblueです。
現在、ITベンチャー企業でWEBキャンペーンシステムの運用並びに要件定義、ECサイトの開発を行っています。
ECサイトの開発では、クレジットカード決済があります。
その決済方法についてStripeを使用しました。
そもそも
Stripeとは？
オンライン決済サービスを提供するプラットフォームです。
クレジットカード決済やサブスクなどで使われています。
APIも充実しているし、公式のリファレンスも充実しているので実装しやすいと感じました。
決済フローにおいてStripe.jsを使うと楽なので使用しました。
Stripe.js
実装自体は簡単です。
JSを読み込む
<script src="https://js.stripe.com/v3/"></script>Stripeを定義
var stripe = Stripe('stripeの公開可能なキー');elementsを使用して、cardタイプを作成
var cardElement = elements.create('card');表示させたいタグにmountする
cardElement.mount('#card-element');上記の場合、下記のタグの中にinputが出来ます。
<div id="card-element">
この中にinputが表示されます
</div>ここまでで決済のフロント画面は完成。
でも、表示されない！
調べまくるとこいつが原因みたいでした
詳細はハッキリ分かっていないのですが、広告ブロックが原因でinputタグか表示されなかったみたいです。
もし同じようにinputタグが表示されないなら広告ブロックが原因かもしれません。
同じように悩んでいる人の参考になれば幸いです。
いいなと思ったら応援しよう！
