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>