Есть ли конкретный способ реализовать элементы карты из полосы в VUE JS? - PullRequest
Новая
       15

Есть ли конкретный способ реализовать элементы карты из полосы в VUE JS?

1 голос
/ 03 июля 2019

Я пытаюсь реализовать stripe в моем проекте vue js, и я не знаю, почему мой скрипт не работает.

Я создал страницу payement.vue, чтобы я мог поместить форму элемента stripe, и в мои активы / js я поместил js, которые они дали нам с этой формой (https://stripe.com/docs/stripe-js/elements/quickstart). Я попытался связать файл js с моим payment.vue и связать сценарий, который дал нам stire, но это дало мне ошибку типа «нашивка не определена». Я также стараюсь поместить два сценария в мой index.html, но это дало мне ошибку «Uncaught ReferenceError: h не определено ". А также я попытался поставить скрипт, который дал нам stipe, на мои активы / 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.

1 Ответ

0 голосов
/ 03 июля 2019

Обычно я загружаю чередование в нижний колонтитул или заголовок сайта или шаблон приложения вне элемента приложения 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>
...