通过cdn在vue应用程序中支付条款

Question

我正在使用vue作为CDN，因为app非常简单。 此时我添加代码

<div id="app">
<!-- some code here -->
    <form action="/charge" method="POST">
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<%= stripePublishableKey %>"
          data-amount="2500"
          data-name="ec-system payment"
          data-description="You will pay this money for something!"
          data-locale="auto">
    </script>
    </form>
</div>

此代码给出了类似下面的错误。

  

模板应该只负责将状态映射到UI。   避免在模板中放置带副作用的标签，例如   ，因为它们不会被解析

我找到了一些像“vue-stripe”这样的npm库，但是当我使用vun而不是vue-cli时，我不知道如何使用这个库。

Answer 1

在vue中，您不能在模板中使用脚本标记。 在您的情况下，您可以使用名为“vue-stripe-checkout”的库。 该库以两种方式支持

  

  
1. NPM或Yarn
        

npm install vue-stripe-checkout --save

     

yarn add vue-stripe-checkout

     
  
1. CDN
        

https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js

您可以通过在应用中加入cdn来使用第二种方法。 有关详细信息，请参阅此vue-stripe-checkout。