angularjs - 使用 Angular 路线时不显示 Stripe Checkout 按钮

Question

我目前正在尝试实现标准的 Stripe Payments 结帐对话框。当我插入短路时<script>包括文档 ( https://stripe.com/docs/checkout ) 中描述的应显示的按钮未呈现。

当我将其放入顶级 index.html 文件时，按钮确实会显示。当我将其放入在点击特定路线时显示的部分时，它不会显示。我认为这是因为它没有执行 Javascript，因为当它位于路由中时，它不会在页面加载时发生。

我可以做些什么来让它在 route 工作，还是应该实现一个指向 stripe.js 库的自定义表单？谢谢。

Answer 1

问题是 js 没有按照您的建议触发。解决方案是简单地将 Stripe checkout.js 包含在您的 index.html 文件中，然后触发 Stripe 弹出窗口以使用您的 Controller (或其他地方)打开。

在您的index.html(或同等内容)中

<script src="https://checkout.stripe.com/checkout.js"></script>
<!-- Angular script(s) -->

在您的 Controller (或其他地方)

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  image: '/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // Use the token to create the charge with a server-side script.
    // You can access the token ID with `token.id`
  }
});

handler.open({
  name: 'Stripe.com',
  description: '2 widgets',
  amount: 2000
});

// handler.close();

这是根据 Stripe 文档进行的改编:https://stripe.com/docs/checkout#integration-custom