Question

我正在尝试在vue js项目中实现条纹，但我不知道为什么我的脚本无法正常工作。

我创建了一个payement.vue页面，因此我可以放置stripe元素表单，并在我的资产/ js上放置他们使用该表单给我们的js（https://stripe.com/docs/stripe-js/elements/quickstart）。我试图将js文件链接到我的payment.vue，并链接了脚本stire给了我们，但这给了我类似“条带未定义”的错误。我还尝试将这两个脚本放到index.html上，但这给了我错误“未捕获的ReferenceError：h未定义”。而且我也尝试将stipe提供给我们的脚本放在我的asset / js / stipe上，但是没有用，有人可以在这里帮我吗？

first attempt on my payement.vue

<script src="https://js.stripe.com/v3/"></script>
<script>
import Stripe from '@/assets/js/stripe'

export default {

}
</script>

<------------------------------------------------------------------>
second attempt on my assets/js/stripe

 <script src="https://js.stripe.com/v3/"></script>
const stripe = Stripe('pk_test_6AGwTFQ4NxLa3P3VmPnT8ZJ8');
const elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
var style = {
    base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  // Create an instance of the card Element.
  const card = elements.create('card', {style});

  // Add an instance of the card Element into the `card-element` <div>.
  card.mount('#card-element');

  card.addEventListener('change', ({error}) => {
    const displayError = document.getElementById('card-errors');
    if (error) {
      displayError.textContent = error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

const stripeTokenHandler = (token) => {
    // Insert the token ID into the form so it gets submitted to the server
    const form = document.getElementById('payment-form');
    const hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
  }; ```

i'm just trying to find the best way to implement the form strip element and where to put the js and the (<script src="https://js.stripe.com/v3/"></script>
) they gave us , ty for your answer.

Answer 1

通常的方法是在vue应用程序元素之外的网站或应用程序模板的页脚或页眉中加载条带。

<!--- beginning of vue app container -->
<div id="app"> 
   <v-content>
      //...
   </v-content> 
</div>
<!--- end app container -->

<script src="{{url('/js/app.js')}}"></script>
<script src="https://js.stripe.com/v3/"></script>

这是Stripe的建议，以提高安全性。

为了最大程度地利用Stripe的高级欺诈功能，请在网站的每个页面（而不是结帐页面）中都包含此脚本。这样，Stripe可以检测到异常行为，这些异常行为可能表明客户浏览您的网站时存在欺诈行为。

https://stripe.com/docs/stripe-js/reference#including-stripejs

如果您仍然希望或需要将脚本直接包含在组件中，则应该能够在组件mounted()函数中执行以下操作。

<script>
  export default {
    data: () {
       return {
          //...
       }
    },
    mounted() {
       let stripeJs = document.createElement('script');
       stripeJs.setAttribute('src', 'https://js.stripe.com/v3/');
       document.head.appendChild(stripeJs);
    },
  }
</script>

有没有一种特定的方法来实现Vue js中来自条带的卡片元素？

1 个答案: