如何在vuejs中使用stripecheckout？

Question

我是 vue js 的新手。我正在尝试添加带有条纹的支付系统。我制作了一个 Stripecheckout 组件并将其添加到我的结帐组件中。 @vue-stripe/vue-stripe 已安装并启用了仅客户端集成。这是我的源代码：

StripeCheckout.vue

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Pay now!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      loading: false,
      lineItems: [
        {
          price: localStorage.getItem('total'),
        },
      ],
      successURL: 'www.facebook.com',
      cancelURL: 'www.youtube.com',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      //this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

在Checkout.vue中：

<template>
                    <div class="row mt-5">
                        <span>Cash payment</span>
                        <img src="assets/images/payment.png" style='width:300px;margin-top:10px;' alt="">
                         
                           <StripeCheckout></StripeCheckout>
                    </div>

<script>
import StripeCheckout from './StripeCheckout.vue';
export default {
    
    name:'Checkout',

    components:{
        StripeCheckout
    }, 
  ....}
</script>

但是按钮选项显示在结帐组件中但不起作用。通过点击支付按钮，这是一种安慰。

Vue Stripe 无法在不安全的主机上运行。确保您的网站使用 TCP/SSL

Answer 1

第 1 步： 在您的 public/index.html

中添加 stripe 引用

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

步骤 2： 创建和 Checkout 组件

<template>
  <div class="container">
    <section class="row payment-form">
      <h5 class="#e0e0e0 grey lighten-4">
        Payment Method
        <span class="right"></span>
      </h5>
      <div class="row">
        <div class="col-md-6 col-lg-4 s12 card-element">
          <label>Card Number</label>
          <div id="card-number-element" class="input-value form-control form-control-border"></div>
        </div>
        <div class="col-md-6 col-lg-4 s6 card-element">
          <label>Expiry Date</label>
          <div id="card-expiry-element"></div>
        </div>
        <div class="col-md-6 col-lg-4 s6 card-element">
          <label>CVC</label>
          <div id="card-cvc-element"></div>
        </div>
      </div>
      <div class="error red text-center white-text">{{stripeValidationError}}</div>
      <div class="row mt-3">
        <div class="col s12 place-order-button-block text-center">
          <button class="btn btn-primary mt-2"  type="button" @click.prevent="placeOrder">Place Order</button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>

export default {
  name: 'checkout',
  data () {
    return {
      stripe:null,
      cardNumberElement:null,
      cardExpiryElement:null,
      cardCVCElement:null,
      stripeValidationError: ''
    }
  },
  mounted() {
    console.log(this.drinkDetails)
    this.stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxx') // add your stripe key
    this.createAndMountFormElements()
  },
  methods: {
    createAndMountFormElements() {
      var elements = this.stripe.elements()
      this.cardNumberElement = elements.create('cardNumber')
      this.cardNumberElement.mount('#card-number-element')
      this.cardExpiryElement=elements.create('cardExpiry')
      this.cardExpiryElement.mount('#card-expiry-element')
      this.cardCvcElement=elements.create('cardCvc')
      this.cardCvcElement.mount('#card-cvc-element')
      this.cardNumberElement.on('change', this.setValidationError)
      this.cardExpiryElement.on('change', this.setValidationError)
      this.cardCvcElement.on('change', this.setValidationError)
    },
    setValidationError(event) {
      console.log('setValidationError', event)
      this.stripeValidationError = event.error ? event.error.message : ''
    },
    placeOrder () {
      this.stripe.createToken(this.cardNumberElement).then(result => {
        console.log('result', result)
        if (result.error) {
          this.stripeValidationError = result.error.message
        } else if (result.token) {
          console.log('token', result.token)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .payment-form {
    max-width: 100%;
    margin: 20px auto;
    border: 1px solid #ececec;
  }
  .payment-form h5 {
    margin: 0;
    padding: 10px;
    font-size: 1.2rem;
  }
  .card-element {
    margin-top: 5px;
  }
  #card-number-element,
  #card-expiry-element,
  #card-cvc-element {
    background: white;
    padding: 5px;
    border: 1px solid #ececec;
  }
  .place-order-button-block {
    margin: 10px 0;
  }
  button {
    background-color: $app-bgm;
  }
</style>

第 3 步： 点击 Place Order 按钮，您将获得 stripe token .使用条纹令牌，您必须将令牌传递给 backend rest api 调用，您必须借记钱。

为 npm 包安装后端条带安装

npm install stripe --save

您可以使用以下方法从 debit/credit card 中扣款，

const stripe = require('stripe')('sk_test_xxxxxxxxxxxxxxxxxxxxx');
let user = await stripe.customers.create({ email: 'xxxx@gmail.com', payment_method: token });
await stripe.paymentIntents.create({
  amount: 25 * 100, // 
  currency: 'usd',
  customer: user
})

如何在vuejs中使用stripecheckout？

How to use stripecheckout in vuejs?

stripe-payments

vue.js