前言

本文章为Vue项目引入Stripe依赖教程。React、HTML版本请转移至：传送门

安装

引入依赖:

npm install vue-stripe-checkout

使用

方法一：

<template>
  <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Shut up and take my money!</button>
    </template>
  </stripe-checkout>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
  components: {
    StripeCheckout
  },
  data: () => ({
    loading: false,
    publishableKey: "Stripe key值",
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ', 
        quantity: 1
      }
    ],
    successUrl: '成功回调地址',
    cancelUrl: '错误回调地址',
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    }
  }
}
</script>

方法二：（需要后端配合）

  <stripe-checkout
    ref="sessionRef"
    :pk="publishableKey"
    :session-id="sessionId"
  >
    <template slot="checkout-button">
      <v-btn 
        @click="$refs.sessionRef.redirectToCheckout()"
        color="#42b883"
        large
        dark
      >Subscribe</v-btn>
    </template>
  </stripe-checkout>

sessionId 是后端给前端的参数，当按钮被点击则自动跳转到Stripe支付页面