时间戳

首页 > 解决方案 > 有没有一种特定的方法可以在 vue js 中从条带中实现卡片元素？

javascript - 有没有一种特定的方法可以在 vue js 中从条带中实现卡片元素？

问题描述

我正在尝试在我的 vue js 项目中实现条带，但我不知道为什么我的脚本不起作用。

我创建了一个 payement.vue 页面，因此我可以放置条纹元素表单，并在我的资产/js 上放置他们给我们的 js 表单（https://stripe.com/docs/stripe-js/elements/quickstart） . 我试图将 js 文件链接到我的 payment.vue 并链接 stride 给我们的脚本，但这给了我诸如“stripe is not deffined”之类的错误。我还尝试将这两个脚本放在我的 index.html 上，但这给了我错误“未捕获的 ReferenceError：h 未定义”。而且我还尝试将 stipe 给我们的脚本放在我的 assets/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.

标签： javascriptvue.jsstripe-payments

解决方案

我通常这样做的方式是在 vue app 元素之外的站点或应用程序模板的页脚或页眉中加载条带。

<!--- 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#include-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>

推荐阅读