使用角度路线时，不显示“条纹签出"按钮 [英] Stripe Checkout Button Does Not Display When Using Angular Routes

问题描述

我目前正在尝试实施标准的条纹付款"结帐对话框.当我放入简短的<script>包括文档中所述的内容( https://stripe.com/docs/checkout )未显示应显示的按钮.

I'm currently trying to implement the standard Stripe Payments checkout dialogue. When I drop in the short <script> include described in the docs (https://stripe.com/docs/checkout) the button that should display is not being rendered.

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

When I put it in my top-level index.html file the button DOES display. When I put it into a partial that gets displayed when hitting a particular route it does not. I assume this is because it is not executing the Javascript because it's not happening at page load when it's in a route.

我可以做些什么使它在路由中工作吗?还是应该只实现一个指向stripe.js库的自定义表单?谢谢.

Is there anything I can do to get this to work in a route or should I just implement a custom form that points to the stripe.js library? Thanks.

推荐答案

问题是您所建议的js不会触发.一种解决方案是简单地将Stripe checkout.js包含在index.html文件中，然后触发Stripe弹出窗口以使用您的控制器(或其他位置)打开.

The issue is that the js does not fire, as you suggested. A solution is to simply include the Stripe checkout.js in your index.html file, and then trigger the Stripe popup to open with your controller (or elsewhere).

在您的index.html(或等效文件)中

In your index.html (or equivalent)

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

在您的控制器中(或其他位置)

In your controller (or elsewhere)

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

This is an adaptation per the Stripe docs at: https://stripe.com/docs/checkout#integration-custom

这篇关于使用角度路线时，不显示“条纹签出"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！