Stripeの支払いのフォームが表示されない

Question

Stripe ＋DjangoでECサイトを作成しようとしていたのですがクレジットカード決済フォームを反映できずJavascriptコンソールでエラーが出力されます。

Javascriptコンソールのえらーは下記です。

(インデックス):1 
        
       Uncaught IntegrationError: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
    at n.<anonymous> ((インデックス):1:175380)
    at n.mount ((インデックス):1:73382)
    at stripe.js:17:6

コードは下記です。

{% extends 'app/base.html' %}{% load static %}
{% block content %}
<div class="my-5">
    <h3>注文内容を確認する</h3>
</div>
<form method="POST" id="payment-form">
    <div class="row order">
        <div class="col-md-9">
            <div class="card px-4">
                <div class="card-body px-2 py3">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="font-weight-bold">お届け先住所</p>
                            <p>名前：{{ user_data.first_name }}{{ user_data.last_name }}</p>
                            <p>住所：{{ user_data.adderss }}</p>
                            <p>電話番号：{{ user_data.tel }}</p>
                        </div>
                        <div class="col-md-6">
                            <p class="font-weight-bold">お支払い方法</p>
                            {% csrf_token %}
                            <div class="form-row">
                                <label for="card-element">
                                  クレジット・デビットカード番号
                                </label>
                                <div class="card-element"><!-- Stripe Element がここに入ります。 --></div>
                                <div class="card-errors" role="alert"><!-- Element のエラーを入れます。 --></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center px-2 py-3">
                    <div class="mb-3">
                        <button class="btn btn-warning" type="submit">注文を確定する</button>
                    </div>
                    <p class="font-weight-bold">注文内容</p>
                    <p>商品の小計：{{ order.get_total }}</p>
                    <p>配送料：後で記載する円</p>
                    <hr>
                    <p class="font-weight-bold text-danger">ご請求金額：{{ order.get_total }}円</p>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}
{% block extra_js %}
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="{% static 'js/stripe.js' %}"></script>
{% endblock %}

var stripe = Stripe('pk_test_51KM6HaFNqBsvkEpxtbb0vaRAIfpvLS3qfBKdLCL5uhk53lbB6W7mD4NLHCvlikaPfaHxpSyEJLm94T99OfHQzD5800r0beCYQB');
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
var style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');


//トークン作成もしくはエラー表示
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // エラー表示.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // トークンをサーバに送信
      stripeTokenHandler(result.token);
    }
  });
});

function stripeTokenHandler(token) {
  // tokenをフォームへ包含し送信
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit します
  form.submit();
}

Stripe の手順
https://stripe.com/docs/payments/accept-a-payment-charges

参考動画
https://www.youtube.com/watch?v=lBUMlebS1-I

類似していると思われる記事
https://stackoverflow-com.translate.goog/questions/43024883/stripe-payment-example-is-not-displaying?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

Answer 1

https://stripe.com/docs/payments/accept-a-payment-charges?platform=web#web-create-payment-form
ドキュメントにも記載がありますが、 card-element はidにする必要がありそうです。

<div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
</div>

Comments

[sabotenn52388]

すいません回答ありがとうございます。
ドキュメントの確認とソースコードの見直しが足りないことが分かりました。