Estoy usando Stripe para aceptar pagos de Apple Pay (no muy importante aquí). Estoy usando Django. El código funciona bien para procesar los pagos, pero tengo problemas para pasar una variable a mi archivo .js separado. (cantidad a cobrar) de mi archivo HTML al archivo Javascript que realmente procesa los pagos.
inicio.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>El archivo Javascript que se llama para procesar el pago: 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 });El error que veo en la consola es que 'total' en la llamada a la API ya no es un objeto. Console.log (tipo de cantidad) devuelve un número y console.log (cantidad) devuelve el número que espero. Pero, ¿cómo paso eso al archivo Javascript?
Usar atributos data . Teóricamente, la forma en que lo está haciendo actualmente podría funcionar si lo arreglara correctamente, pero definitivamente no es la mejor práctica. Una solución fácil es:
En lugar de este código,
<script>amount=parseInt("{{event.price}}")</script> simplemente adjunte un atributo data-amount a un elemento cerca del árbol. Incluso podría salirse con la suya poniéndolo en el payment-request-button esta manera:
<div id="payment-request-button" data-amount="{{event.price}}">Luego en tu javascript:
//... amount: parseInt(document.querySelector("#payment-request-button").dataset.amount) //...Si no puede editar el archivo javascript, entonces las cosas son mucho más complicadas, ¡así que espero que pueda!