vue中使用Stripe

Vue 中使用 Stripe 来验证信用卡

安装

npm i vue-stripe-elements-plus --save

第二部在开始的 index.html 引入 v3

<script src="https://js.stripe.com/v3/"></script>

重点两个参数

stripe 必须要你自己设定 options 必须要有参数可以参照下面的链接

https://stripe.com/docs/stripe.js#element-options

验证信用卡号，CVC，过期日期

验证 Number,cvc,过期时间

完整版

<template>
  <div class="credit-card-inputs" :class="{ complete }">
    <card-number
      class="stripe-element card-number"
      ref="cardNumber"
      :stripe="stripe"
      :options="options"
      @change="number = $event.complete"
    />
    <card-expiry
      class="stripe-element card-expiry"
      ref="cardExpiry"
      :stripe="stripe"
      :options="options"
      @change="expiry = $event.complete"
    />
    <card-cvc
      class="stripe-element card-cvc"
      ref="cardCvc"
      :stripe="stripe"
      :options="options"
      @change="cvc = $event.complete"
    />
  </div>
</template>

<script>
  import { CardNumber, CardExpiry, CardCvc } from 'vue-stripe-elements-plus'

  export default {
    props: ['stripe', 'options'],
    data() {
      return {
        complete: false,
        number: false,
        expiry: false,
        cvc: false
      }
    },
    components: { CardNumber, CardExpiry, CardCvc },
    methods: {
      update() {
        this.complete = this.number && this.expiry && this.cvc

        // field completed, find field to focus next
        if (this.number) {
          if (!this.expiry) {
            this.$refs.cardExpiry.focus()
          } else if (!this.cvc) {
            this.$refs.cardCvc.focus()
          }
        } else if (this.expiry) {
          if (!this.cvc) {
            this.$refs.cardCvc.focus()
          } else if (!this.number) {
            this.$refs.cardNumber.focus()
          }
        }
        // no focus magic for the CVC field as it gets complete with three
        // numbers, but can also have four
      }
    },
    watch: {
      number() {
        this.update()
      },
      expiry() {
        this.update()
      },
      cvc() {
        this.update()
      }
    }
  }
</script>

<style>
  .credit-card-inputs.complete {
    border: 2px solid green;
  }
</style>

支持的方法

• createToken()

https://stripe.com/docs/stripe-js/reference#stripe-create-token

• createSource()

https://stripe.com/docs/stripe-js/reference#stripe-create-source

• retrieveSource()

https://stripe.com/docs/stripe-js/reference#stripe-retrieve-source

• paymentRequest()

https://stripe.com/docs/stripe-js/reference#stripe-payment-request

• redirectToCheckout()

https://stripe.com/docs/stripe-js/reference#stripe-redirect-to-checkout

• retrievePaymentIntent()

https://stripe.com/docs/stripe-js/reference#stripe-retrieve-payment-intent

• handleCardPayment()

https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment

• handleCardSetup()

https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup

• handleCardAction()

https://stripe.com/docs/stripe-js/reference#stripe-handle-card-action

• confirmPaymentIntent()

https://stripe.com/docs/stripe-js/reference#stripe-confirm-payment-intent

• createPaymentMethod()

https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method