vue 运用stripe支付

安装npm install stripe --save；

文档

组件中

<template>

 <el-col tag="div" :xs="24" :lg="11" :md="11" :sm="11">

                          <label for="card-element">Expiry Date</label>

                          <div id="cardExp"></div>

                          <div class="card-error" v-show="cardError1">{{errorText}}</div>

                        </el-col>

                        <el-col tag="div" :xs="24" :lg="11" :md="11" :sm="11">

                          <label for="card-element">Card Number</label>

                          <div id="cardNumber"></div>

                          <div class="card-error" v-show="cardError2">{{errorText}}</div>

                        </el-col>

                        <el-col :xs="0" :sm="2" :lg="2" :md="2">&nbsp;</el-col>

                        <el-col tag="div" :xs="24" :lg="11" :md="11" :sm="11">

                          <label for="card-element">CVC</label>

                          <div id="cardCvc"></div>

                          <div class="card-error" v-show="cardError3">{{errorText}}</div>

                        </el-col>

 <el-button

                      type="primary"

                      class="register-btn"

                      :disabled="submitDisabled"

                      @click="**submitForm**('ruleForm')"

                    >点击支付</el-button>

</template>

**//vue组件按需引入**：

import { loadStripe } from "@stripe/stripe-js";

 mounted() {

    this.init();

}

 methods: {

    selectChangeMeal(){//选择套餐

      var that = this;

      for (var i in that.mealList) {

        if (that.mealList[i].id == that.ruleForm.discount) {

          this.mealPrice = that.mealList[i].price;

        }

      }

    },

    stripeHandle() {//stripe

      var elements = this.stripe.elements();

      var style = {

        base: {

          fontSize: "14px",

          fontFamily: "'SourceHanSansCN-Regular', 'SourceHanSansCN'",

          color: "rgba(47,49,56,1)",

          fontWeight: 400,

          lineHeight: "21px",

          "::placeholder": {

            fontSize: "12px",

            color: "rgba(134,134,134,1)",

            lineHeight: "17px"

          }

        },

        invalid: {

          color: "black",

          ":focus": {

            color: "black"

          }

        }

      };

      var classes1 = {

        base: "card-number"

      };

      var classes2 = {

        base: "card-cvc"

      };

      var classes3 = {

        base: "card-expiry"

      };

      this.cardNumber = elements.create("cardNumber", {

        style: style,

        classes: classes1

      });

      this.cardNumber.mount("#cardNumber");

      this.cardCvc = elements.create("cardCvc", {

        style: style,

        classes: classes2

      });

      this.cardCvc.mount("#cardCvc");

      this.cardExpiry = elements.create("cardExpiry", {

        placeholder: "mm/yy",

        style: style,

        classes: classes3

      });

      this.cardExpiry.mount("#cardExp");

      this.loading = false;

    },

    async init() {

      this.stripe = await loadStripe(

        ""//key(到stripe)

      );

    },

 // 新增一个stripe绑定银行卡

    async addStripePay(){

      const { paymentMethod, error } = await this.stripe.createPaymentMethod(

        "card",

        this.cardNumber,

        {

          billing_details: { name: "hhhh" }

        }

      );

      if (error) {//stripe校验银行信息

        console.log(error);

        this.errorText = error.message;

        console.log(this.errorText);

        switch (this.errorText) {

          case "您的银行卡号不完整。":

            break;

          case "您银行卡的安全码不完整。":

            break;

          case "您银行卡的到期日期不完整。":

            break;

          default:

            break;

        }

        this.submitDisabled = false;

        this.loading = false;

      } else {//

        console.log(paymentMethod);

}

----

 submitForm(formName) {

      this.addStripePay();

    },