javascript - 第二个 Stripe 结账按钮不起作用

Question

我想为我的 landing page 的移动网站添加第二个 Stripe Checkout 按钮，但是尽管我的放置方式与第一个按钮的放置方式相同(请参阅主站点顶部的“Suscríbete”)，但当您单击它时它不会执行任何操作。新按钮位于您在移动 View 中加载我的网站时出现的导航菜单上。

HTML 代码:

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

我已经加载了:

<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>

还有

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

Answer 1

您对两个按钮使用相同的 ID，并且似乎存在冲突，请尝试更改第二个按钮的 ID 并相应地定位它。

这一行:

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


现在，您正在定位第一个按钮，因此未附加第二个按钮的 onClick 事件。您需要复制与第一个按钮相同的过程，但确保每个按钮的标识符不同，从而指向不同的脚本。