質問

railsアプリにStripeの要素を実装しようとしているのですが、stripe.jsを正しくインクルードできないようです。以下は私のapplication.htmlです。

<%= tag :meta, name: "stripe-key", content: Figaro.env.stripe_publishable_key %>
<script type="text/javascript" src="https://js.stripe.com/v3/"</script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

JS

var stripe = Stripe($("meta[name='stripe-key']").attr("content"))
var elements = stripe.elements();

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#999',
      color: '#505652',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica Neue',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
// Add an instance of the card UI component into the `card-element` <div>
card.mount('#card-element');

フォーム

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
    </div>
    <div id="card-errors"></div>
  </div>

  <button>Submit Payment</button>
</form>

ページを読み込むたびに、コンソールに次のようなエラーが表示されます。 Uncaught ReferenceError: Stripe is not defined - STRIPE ERROR . stripe.jsの読み込み方と関係があると思うのですが、よくわかりません？

解決方法は？

Stripe.jsがあなたのjavascriptよりも後にロードされていることが原因だと思われます。Stripe.jsをヘッダーのあなたのjavascriptの上に移動させてみてください。