如何在使用Stripe Checkout时修复"未找到数据键"？

Question

我正在使用条带检查的自定义代码并尊重所有内容,但我收到此错误:

StripeCheckout.configure: 'data-key' is a required option, but was not found

这不是我第一次使用代码,我之前使用它,一切都很好.

这是完整的代码:

var handler = StripeCheckout.configure({
  key: 'pk_test_aaaaaaaaaaaaaaaaaaaa',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.querySelector('.stripe-button').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Title',
    description: 'description',
    currency: 'eur',
    amount: 9700
  });
  e.preventDefault();
});


// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});

• 我复制了正确的密钥(你看到的是一个占位符)
• 页面中存在带有类条带按钮的元素
• 我之前使用相同的代码并且工作正常
• 该网站没有特殊问题
• https://checkout.stripe.com/checkout.js包含在代码之前
• 我尝试了测试和实时密钥,两者都有错误
• 我还尝试了其他网站上的其他密钥.

这是错误的屏幕截图和条带代码

以前有人面对同样的问题吗？我很确定这是一个隐藏的小东西!

Answer 1

经过几个小时的测试并转过所有文档,我发现了问题,它与CSS有关!

我在创建的html元素上使用了类条带按钮,以便触发条带操作.似乎Stripe也使用了同一个类,它在JS代码中造成了混乱.

因此,在尝试将Stripe集成到您的站点时,请不要使用此类:stripe-button