javascript - 第二条条纹结帐按钮不起作用
问题描述
我想为我的登录页面的移动网站添加第二个 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>
解决方案
您对两个按钮使用相同的 id 并且那里似乎存在冲突,请尝试更改第二个按钮的 id 并相应地定位它。
这一行:
var checkoutButton = document.getElementById('checkout-button-sku_FQdLfDQeVmuBwR');
现在,您的目标是第一个按钮,因此未附加第二个按钮的 onClick 事件。您需要复制对第一个按钮执行的相同过程,但确保每个按钮的标识符不同,从而指向不同的脚本。
推荐阅读
- sql - 如何连接来自不同数据库的表?
- python - 带有 Docker 错误的 GeoDjango:“DatabaseOperations”对象没有属性“geo_db_type”
- reactjs - 在 reactjs 中使用 jest 编写单元测试时,对 MsalAuthenticationTemplate 的更新运行效果、错误
- spring-boot - 嵌入式tomcat自定义setBackgroundProcessorDelay不起作用
- spring-boot - 在 java springboot 中覆盖 CORS 策略
- python - 使用 Python 和 Tkinter 显示国际字符
- java - 无法为 org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler 类型的对象获取未知属性“nav_version”
- python - 'AnonymousUser' 对象没有属性 '_meta' | Django 身份验证
- c# - 有什么方法可以拦截 GraphQL Query 模式验证错误?
- python - 为什么在这里调用函数时需要 print()?