Невозможно заставить элементы Stripe работать с Vue.js - PullRequest
Новая
       21

Невозможно заставить элементы Stripe работать с Vue.js

0 голосов
/ 22 июня 2019

Я пытаюсь сделать так, чтобы компонент Vue (в настоящее время имеет только маршрут / представление), мог отображать стилизованную версию формы Stripe Elements для ввода кредитных карт.

Еще одна проблема, с которой я столкнулся, заключается в том, что я не хочу, чтобы файл stripe js загружался с каждой страницей, как это происходит в index.html. Вместо этого я ищу его, чтобы загрузить только один компонент / представление.

Моя конечная идея заключается в том, что у меня будет кнопка, которая при нажатии будет отображать модальную загрузочную полосу и отображать форму Stripe Elements, в которую они затем будут вводить информацию о своей кредитной карте, в которую, в свою очередь, будет выдан мне токен, который я затем можно отправить в мой бэкэнд вместе с заголовком auth (JWT) для обработки в моем API.

До сих пор я пробовал монтировать, создавать, примеры vue-strip-elements-plus и многое другое.

Я включил весь файл Billing.vue минус мой ключ API полосы

Я не придирчив к тому, как я это делаю, будь то из документов в полоску или из пакета, упомянутого выше. 

  <div class="container">
    <form action="/charge" method="post" id="payment-form">
      <div class="form-row">
        <label for="card-element">
          Credit or debit card
        </label>
        <div id="card-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="card-errors" role="alert"></div>
      </div>

      <button v-on:click="update">Submit Payment</button>
    </form>
  </div>
</template>

<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_<key>');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
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.
var card = elements.create('card', {
  hidePostalCode: true,
  style: style
  })

export default {
  name: 'Billing',
  data() {

  },
  mounted() {
    card.mount('#card-element');
  },
  update: function() {
    stripe.createToken(card).then(function(result) {
      // Access the token with result.token
      console.log(result.token) // I'd then send the token using axios to my backend
    });
  }
}
</script>```


I am expecting the token to currently be console.log which I can check in my browser
...