使用 Angular 路线时不显示条纹结帐按钮

Question

我目前正在尝试实施标准的 Stripe 支付结账对话。当我放入文档中描述的简短 <script> 包含 (https://stripe.com/docs/checkout) 时，应显示的按钮未呈现。

当我将其放入我的顶级 index.html 文件时，按钮会显示。当我将它放入一个部分时，它会在到达特定路线时显示出来，但它不会。我认为这是因为它没有执行 Javascript，因为它在路由中时不会在页面加载时发生。

我能做些什么来让它在路由中工作，还是我应该只实现一个指向 stripe.js 库的自定义表单？谢谢

Answer 1

问题是 js 没有像您建议的那样触发。一种解决方案是简单地将 Stripe checkout.js 包含在您的 index.html 文件中，然后触发 Stripe 弹出窗口以使用您的控制器（或其他地方）打开。

在您的index.html（或同等学历）

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

在您的控制器中（或其他地方）

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

使用 Angular 路线时不显示条纹结帐按钮

Stripe Checkout Button Does Not Display When Using Angular Routes

angularjs

stripe-payments