html - 使用自定义表单创建令牌

Question

    **HTML**

 <div ref="addCardForm"  id="card-element">

                <div class="card_digit_text">Card Number
       <input type="text" id="cardDigit" name="email" placeholder="0000 0000 0000 0000">
                </div>




           <div class="card_year_text">Expiry Date
                <input type="text" id="cardYear" name="email" placeholder="MM/YY"> </div>

                 <div class="card_cvc_text">CVC
                <input type="text" id="cardCVC" name="email" placeholder="CVC"></div> 
            </div>

**JS**
    export default {
      data() {

     return {
        elements:null,
        elementArray: [],
     }
      },
      methods: {
        saveCard: function() {
          let stripe = Stripe("pk...");




          stripe.createToken(this.elementArray[0]).then(function(result) {



          });
        },

        mounted: function() {
          this.elements = stripe.elements();
          var cardNumber = this.elements.create("cardNumber");
          this.elementArray.push(cardNumber);
          cardNumber.mount("#cardDigit");
          var cardExpiry = this.elements.create("cardExpiry");
          this.elementArray.push(cardExpiry);
          cardExpiry.mount("#cardYear");
          var cardCvc = this.elements.create("cardCvc");
          this.elementArray.push(cardCvc);
          cardCvc.mount("#cardCVC");
        }
      }
    };
    </script>

我正在尝试通过我在创建的表单中输入的数据来实现使用条带的“添加卡”功能。然而，这是我得到的错误：未捕获（承诺）错误：您必须提供条纹元素或有效的令牌类型才能创建令牌。

标签： htmlvue.jsstripe-paymentsstripe.js

Answer 1

    <template>

        <form class="cardInputForm" id="cardInputForm" @submit.prevent="addCard">
          <div class="cardnum">
            <p class="cardText">Card number</p>
            <div id="stripeCardNumber" class="ca" ref="stripeCardNumber"></div>
          </div>

          <div class="expiry">
          <p class="expiryText">Expiry date</p>
          <div name="cardExpiry" class="ex" id="stripeCardExpire" ref="stripeCardExpire"></div>
          </div>

          <div class="cvc">
          <p class="cvcText">CVC</p>
          <div name="cardCvc" class="cv" id="stripeCardCvc" ref="stripeCardCvc"></div>


        </form>
        <buttons-vue type="buttonGreenBackground buttonForInsetShadow buttonForInsetShadow:hover" form="cardInputForm" class="addCardButton" text="add card"></buttons-vue>

      </div>  
    </template>


    <script>

    data() {

      return: {
          stripeElements: {},
          stripe: null,
          elements: null,
       },

    methods: { 
      addCard: function(){
      this.stripe.createToken(this.stripeElements.cardNumber).then(result => {

      do something here...
}

   }
}

       mounted: function(){
          this.stripe = Stripe(process.env.stripe_key);
        this.elements = this.stripe.elements();
        this.stripeElements.cardNumber = this.elements.create('cardNumber', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });
        this.stripeElements.cardExpiry = this.elements.create('cardExpiry', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });
        this.stripeElements.cardCvc = this.elements.create('cardCvc', {
          style: {
            base: {
              'fontSize': '16px',
              'lineHeight': '28px',
              '::placeholder': {
                color: '#CCC',
              },
            }
          }
        });

        this.$nextTick(() => {
          this.stripeElements.cardNumber.mount('#stripeCardNumber');
          this.stripeElements.cardExpiry.mount('#stripeCardExpire');
          this.stripeElements.cardCvc.mount('#stripeCardCvc');
        });

       }
    }
    </script>