Streaming live at 10am (PST)

Addeventlistener(click) not working for mobile

Hey,

I’ve got some javascript that needs to trigger for stripe. Right now the code works as expected on desktop, and in the inspector set to mobile mode, however, when used on a mobile browser, my click event doesn’t appear to be triggering. I’m relatively new to JS as a whole, so please let me know if I didn’t set these events up right for mobile.

No errors in the console that I can see.

Site/page link: https://ava-website-e9b608.webflow.io/hire-ava
Read Only Link: https://preview.webflow.com/preview/ava-website-e9b608?utm_medium=preview_link&utm_source=dashboard&utm_content=ava-website-e9b608&preview=9f4ce4936605ba496490525e6eab4fad&mode=preview
Here is the code:

(It’s basically the same code repeated three times for three separate buttons. They will eventually take a customer to different stripe checkout pages once I get the trigger working properly)

<script>
(function() {
  var stripe = Stripe('pk_live_nNavp1JON8yszz0qsvPUfDG0');
  var checkoutButton = document.getElementById('ava-first-location');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_GB9OIzdF7lc8sx', quantity: 1}],
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'http://dentma.com/checkout-onboarding-form/?form=order-confirmed',
      cancelUrl: 'https://dentma.com/?form=abandoned-cart',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
(function() {
  var stripe = Stripe('pk_live_nNavp1JON8yszz0qsvPUfDG0');
  var checkoutButton = document.getElementById('ava-additional-locations');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_GB9OIzdF7lc8sx', quantity: 1}],
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'http://dentma.com/checkout-onboarding-form/?form=order-confirmed',
      cancelUrl: 'https://dentma.com/?form=abandoned-cart',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
(function() {
  var stripe = Stripe('pk_live_nNavp1JON8yszz0qsvPUfDG0');
  var checkoutButton = document.getElementById('ava-trial');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_GB9OIzdF7lc8sx', quantity: 1}],
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'http://dentma.com/checkout-onboarding-form/?form=order-confirmed',
      cancelUrl: 'https://dentma.com/?form=abandoned-cart',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>

Never mind, I figured it out. When I renamed my project a few days ago I hadn’t whitelisted the new projects staging name https://ava-website-e9b608.webflow.io in stripe.

I was running a cached version of the site which is why it was working. Though I’m not 100 percent sure why.