第二条条纹结帐按钮不起作用

Question

我想为我的landing page 的移动网站添加第二个 Stripe Checkout 按钮，但尽管我的放置方式与我放置第一个按钮的方式相同（请参阅主站点顶部的“Suscríbete”），当你点击它时它什么也不做。新按钮位于您在移动视图中加载我的网站时出现的导航菜单上。

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 事件。您需要复制对第一个按钮执行的相同过程，但确保每个按钮的标识符不同，从而指向不同的脚本。