Передача переменных из HTML в файл Javascript, использующий addEventListener

Я использую Stripe для приема платежей Apple pay (здесь это не очень важно). Я использую Django. Код отлично работает для обработки платежей, но у меня проблемы с передачей переменной в отдельный .js файл. (сумма для оплаты) из моего HTML файла в Javascript файл, который фактически обрабатывает платежи.

home.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    import more scripts here
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{% static 'interface/utils.js' %}" defer></script>
    <script src="{% static 'interface/apple-pay.js' %}" defer></script>
</head>
<body>
    <header class="text-center">
        <div id="rectangle"></div>
    </header>
    <section>
        <div class="text-center">
            <div class="container container--narrow">
                <script>amount=parseInt("{{event.price}}")</script>
                <div id="payment-request-button">
                    <!-- A Stripe Element will be inserted here if the browser supports this type of payment method. -->
                </div>
            </div>            
        </div>
    </section>
</body>
</html>

Файл Javascript, который вызывается для обработки платежа: apple-pay.js

document.addEventListener('DOMContentLoaded', async () => {
    const stripe = Stripe('pk_test_testkey');

    const paymentRequest = stripe.paymentRequest() ({
        currency: 'usd',
        country: 'US',
        requestPayerName: true,
        requestPayerEmail: true,
        total: {
            label: 'Test payment',
            amount: amount, //trying to pass the variable in here
        }
    });

  // Other functions that get called go here
});

Ошибка, которую я вижу в консоли, заключается в том, что 'total' в вызове API больше не является объектом. Console.log(typeof amount) возвращает число, а console.log(amount) возвращает число, которое я ожидаю. Но как мне передать это в файл Javascript?

Используйте атрибуты data. То, как вы сейчас это делаете, теоретически может работать, если вы все правильно настроите, но это определенно не лучшая практика. Простым решением является:

Вместо этого кода, 

<script>amount=parseInt("{{event.price}}")</script>

просто прикрепите атрибут data-amount к элементу рядом с деревом. Возможно, вам даже удастся обойтись без того, чтобы поместить его на payment-request-button следующим образом:

<div id="payment-request-button" data-amount="{{event.price}}">

Затем в вашем javascript:

//...
    amount: document.querySelector("#payment-request-button").dataset.amount
//...

Если вы не можете редактировать файл javascript, тогда все намного сложнее, поэтому я надеюсь, что вы сможете!

Вернуться на верх