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

Posted 2023-02-16

【中文标题】第二条条纹结帐按钮不起作用

【英文标题】：Second Stripe Checkout button not working

【发布时间】：2019-07-13 19:02:45

【问题描述】：

我想为我的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>

【问题讨论】：

您的意思是发布您的 API 密钥吗？

点击按钮会发生什么？

这个密钥是公开的，所以不用担心。

【参考方案1】：

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

这一行：

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

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

【讨论】：

它不工作。我已经更改了脚本中的 ID 和引用，但它什么也没做。

我刚刚检查了您的网站，看起来已经为您修复了？