Second Stripe Checkout button not working

Question

I want to put a second Stripe Checkout button for the mobile site of my landing page, but although I have put it the same way I put the first button (see 'Suscríbete' on the top of the main site), it does nothing when you click on it. The new button is located on the navigation menu that appears when you load my website in mobile view.

HTML code:

<button class="btn btn--secondary" id="checkout-button-sku_FQdLfDQeVmuBwR" role="link">Suscríbete</button>

I have already loaded:

<script>
var stripe = Stripe('pk_live_3ASoXZAFAaRMXuoCshu9gGSO00Jvx2IR2u');

var checkoutButton = document.getElementById('checkout-button-sku_FQdLfDQeVmuBwR');
checkoutButton.addEventListener('click', function() {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
            items: [{
                sku: 'sku_FQdLfDQeVmuBwR',
                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://liderplay.es/success',
            cancelUrl: 'http://liderplay.es/canceled',
        })
        .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>

And

<script src="https://js.stripe.com/v3"></script>

JohnSnow JohnSnow · Accepted Answer · 2019-07-13T19:11:49

You are using the same id for both buttons and there seems to be a conflict there, try changing the id for the second button and targeting it accordingly.

this line:

var checkoutButton = document.getElementById('checkout-button-sku_FQdLfDQeVmuBwR');

Right now, you are targeting the first button,so the onClick event for the second button is not attached. You need to replicate the same process you did for the first button, but ensuring your identifier for each button is different, and thus pointing to a different script.

Second Stripe Checkout button not working

1 Answers