Estoy tratando de hacer un método de pago de Stripe en mi formulario en la aplicación Laravel, pero de alguna manera el card-element no se procesa con Stripe.elements() is not a function en la consola del navegador.
Aquí está mi código (cortando código irrelevante):
<head> <script src="https://js.stripe.com/v3/"></script> </head> <body> <form> <div class="mb-6 mx-2"> <div id="card-element"></div> </div> <div class="mb-2 mx-2"> @csrf <input type="hidden" id="payment_method_id" name="payment_method_id" value=""> <button type="submit" id="form_submit"> Continue to payment</button> </div> </form> <script> const stripe = Stripe("{{ env('STRIPE_KEY') }}"); const elements = Stripe.elements(); const cardElement = elements.create('card', { }); cardElement.mount('#card-element'); </script> </body>He intentado la solución de esto
Intenté hacerlo agregando un detector de eventos de load como:
<script> window.addEventListener('load', function (){ const stripe = Stripe("{{ env('STRIPE_KEY') }}"); const elements = Stripe.elements(); const cardElement = elements.create('card', { }); cardElement.mount('#card-element'); }); </script> pero sigue siendo el mismo error Stripe.elements() is not a function . Aquí están los documentos oficiales de Stripe que estoy siguiendo. ¿Alguien puede decirme qué estoy haciendo mal?
Según la muestra de la documentación:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx' ); var elements = stripe.elements(); elements() es una función en una instancia de Stripe . Tienes Stripe.elements() en tu código en mayúsculas, probablemente por accidente. Debería estar en minúsculas.