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

第二个条纹检出按钮不起作用

1 个答案: