Nuxt 框架项目中使用 Stripe 支付

1.引入nuxt-stripe-module依赖

yarn add nuxt-stripe-module 

or

 npm install nuxt-stripe-module

2.nuxt.config.js文件中配置stripe

modules: [
    'nuxt-stripe-module'
  ],
stripe: {
    publishableKey: 'pk_test_51INQofBKCB01qhkr2TRRSnt2da9sVt7LCXdtYxRWOYNHMfIU7QHLBT5jOzEIcyAxgoI9tYAovXdpRaA83mctMFtS008u8jwEnF' // 你的密钥
},

3. 支付收银台页面中使用

视图层（样式自己写）：

 <div class="form-group">
    <div id="card-number" class="card" />
  </div>
  <div class="form-group mt">
    <div id="card-expiry" class="card" />
  </div>
  <div class="form-group mt">
    <div id="card-cvc" class="card" />
  </div>
  <button @click="pay">支付</button>

Script,创建实例化Elements（接口地址：stripe.com/docs/js/ele…）:

initStripeCard () {
    const elements = this.$stripe.elements({
      fonts: [
        {
          cssSrc: 'https://fonts.googleapis.com/css?family=Source+Code+Pro'
        }
      ],
      locale: 'zh'
    })

    const elementStyles = {
      base: {
        color: 'rgba(0, 0, 0, 0.8)',
        fontWeight: 'bold',
        fontSize: '15px',
        fontSmoothing: 'antialiased',
        '::placeholder': {
          color: 'rgba(0, 0, 0, 0.3)',
          fontWeight: 400
        },
        ':-webkit-autofill': {
          color: 'rgba(0, 0, 0, 0.8)',
          fontWeight: 400
        }
      },
      invalid: {
        color: '#FF6633',
        fontWeight: 400,
        '::placeholder': {
          color: '#FF6633',
          fontWeight: 400
        }
      }
    }

    const elementClasses = {
      invalid: 'invalid'
    }

    const cardNumber = elements.create('cardNumber', {
      style: elementStyles,
      classes: elementClasses
    })
    cardNumber.mount('#card-number')
    cardNumber.on('change', event => {
      console.log(event)
      if (event.complete) {
        // enable payment button
        this.cardNumberErrText = ''
      } else if (event.error) {
        this.cardNumberErrText = event.error.message // data () 中定义,number错误信息字段
      }
    })

    const cardExpiry = elements.create('cardExpiry', {
      style: elementStyles,
      classes: elementClasses
    })
    cardExpiry.mount('#card-expiry')
    cardExpiry.on('change', event => {
      console.log(event)
      if (event.complete) {
        // enable payment button
        this.cardExpiryErrText = ''
      } else if (event.error) {
        this.cardExpiryErrText = event.error.message // data () 中定义,expiry错误信息字段
      }
    })

    const cardCvc = elements.create('cardCvc', {
      style: elementStyles,
      classes: elementClasses
    })
    cardCvc.mount('#card-cvc')
    cardCvc.on('change', event => {
      console.log(event)
      if (event.complete) {
        // enable payment button
        this.cardCvcErrText = ''
      } else if (event.error) {
        this.cardCvcErrText = event.error.message // data () 中定义,cvc错误信息字段
      }
    })

    this.cardNumber = cardNumber // data () 中定义
    this.cardExpiry = cardExpiry // data () 中定义
    this.cardCvc = cardCvc // data () 中定义
}

支付-前端部分（接口地址： stripe.com/docs/js/pay…）：

createPaymentMethod () {
  this.$stripe.createPaymentMethod({
    type: 'card',
    card: this.cardNumber
  }).then(result => {
    console.log(result)
    if (result.paymentMethod) {
      this.$axios.post('后端接口', {
        ...params, // 接口需要得参数
        paymentMethodId: result.paymentMethod.id // createPaymentMethod成功返回的paymentMethodId
      }).then(res => {

      }).catch(() => {
        this.isEnd = true
      })
    } else if (result.error) {
      console.log(err)
    }
  }).catch(err => {
    console.log(err)
  })
}

支付-后端部分（接口地址：stripe.com/docs/api/pa…）：