Passing variables from HTML to Javascript file that uses addEventListener-CodePudding

I'm using Stripe to accept Apple pay payments (not super important here). I'm using Django. The code works fine for processing the payments, but I'm having trouble passing in a variable to my separate .js file. (amount to charge) from my HTML file to the Javascript file that actually processes the payments.

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 >
        <div id="rectangle"></div>
    </header>
    <section>
        <div >
            <div >
                <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>

The Javascript file that gets called to process the payment: 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
});

The error I see in the console is that 'total' in the API call is no longer an object. Console.log(typeof amount) returns a number and console.log(amount) returns the number I expect. But how do I pass that to the Javascript file?

CodePudding user response：

Use data attributes. The way you're currently doing it could theoretically work if you rigged it up just right, but it's definitely not the best practice. An easy solution is:

Instead of this code,

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

just attach a data-amount attribute to an element near the tree. You might even be able to get away with putting it on the payment-request-button like this:

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

Then in your javascript:

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

If you can't edit the javascript file then things are a lot more complicated, so I hope you can!