我是 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 >
<span>Cash payment</span>
<img src="assets/images/payment.png" style='width:300px;margin-top:10px;' alt="如何在 vuejs 中使用 stripecheckout？">
<StripeCheckout></StripeCheckout>
</div>
<script>
import StripeCheckout from './StripeCheckout.vue';
export default {
name:'Checkout',
components:{
StripeCheckout
},
....}
</script>
但是按鈕選項顯示在結帳組件中但不起作用。通過點擊支付按鈕，這是一種安慰。
Vue Stripe 不能在不安全的主機上作業。確保您的站點使用 TCP/SSL
uj5u.com熱心網友回復：
第1步：添加stripe在您參考public/index.html
<script src="https://js.stripe.com/v3/"></script>
第 2 步：創建和Checkout組件
<template>
<div >
<section >
<h5 >
Payment Method
<span >$25</span>
</h5>
<div >
<div >
<label>Card Number</label>
<div id="card-number-element" ></div>
</div>
<div >
<label>Expiry Date</label>
<div id="card-expiry-element"></div>
</div>
<div >
<label>CVC</label>
<div id="card-cvc-element"></div>
</div>
</div>
<div >{{stripeValidationError}}</div>
<div >
<div >
<button 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: '[email protected]', payment_method: token });
await stripe.paymentIntents.create({
amount: 25 * 100, // $25
currency: 'usd',
customer: user
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/340261.html