fylzero
10 months ago
3841
10
JavaScript

addEventListener not working? Using exact example from Cashier.

Posted 10 months ago by fylzero

I am using the direct example for setting up Laravel Cashier using Laravel v6.8.0 and Cashier v10.5.1

For some reason addEventListener on the Update Payment Method button refuses to fire. I tried using the ES6 function example, I changed it to ES5 just to see if that was the problem... still nothing.

Any help is much appreciated. I'm pretty stuck on this one.

Blade File:

<input id="card-holder-name" type="text" placeholder="Cardholder Name">

<!-- Stripe Elements Placeholder -->
<div id="card-element"></div>

<button id="card-button" data-secret="{{ $intent->client_secret }}">
    Update Payment Method
</button>

JS File:

const stripe = Stripe(process.env.MIX_STRIPE_KEY);

const elements = stripe.elements();
const cardElement = elements.create('card');

cardElement.mount('#card-element');

const cardHolderName = document.getElementById('card-holder-name');
const cardButton = document.getElementById('card-button');
const clientSecret = cardButton.dataset.secret;

// THIS IS SHOWING THE BUTTON, SO IT IS NOT A LOAD READY ISSUE.
console.log('Card Button: ', cardButton);

// WHEN I CLICK THE BUTTON, NOTHING HAPPENS IN CONSOLE?!
cardButton.addEventListener('click', function() {
    console.log('Meep');
});

Please sign in or create an account to participate in this conversation.