插件
import { loadStripe } from '@stripe/stripe-js'
import { redirect, charge } from '@/api/pay' // 后端提供的接口
stripe 初始化
async initStripe () { // 初始化stripe const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx') // dev 环境 this.stripe = stripe // Create an instance of Elements. const elements = this.stripe.elements({ locale: 'zh', // 设置默认显示语种 }) // Custom styling can be passed to options when creating an Element. // (Note that this demo uses a wider set of styles than the guide below.) const style = { base: { color: '#32325d', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4', }, }, invalid: { color: '#fa755a', iconColor: '#fa755a', }, } // Create an instance of the card Element. const card = elements.create('card', { style: style }) // Add an instance of the card Element into the `card-element` <div>. card.mount('#card-element') // Handle real-time validation errors from the card Element. card.addEventListener('change', function (event) { const displayError = document.getElementById('card-errors') if (event.error) { console.log('event.error', event.error) displayError.textContent = event.error.message } else { displayError.textContent = '' } }) // Handle form submission. const form = document.getElementById('payment-form') const _this = this form.addEventListener('submit', function (event) { event.preventDefault() _this.stripe.createSource(card).then(function (result) { console.log('stripe.createSource result', result) if (result.error) { // Inform the user if there was an error. const errorElement = document.getElementById('card-errors') errorElement.textContent = result.error.message console.log('createSource error') } else { // Send the token to your server. console.log('createSource success') _this.stripeTokenHandler(result.source) } }).catch(() => {}) }) },
点击提交支付按钮
// Submit the form with the token ID. stripeTokenHandler (token) { console.log('stripe token', token) redirect({ transAccessToken: this.transAccessToken, receipteEmail: this.receipteEmail, tokenType: token.card.brand, token: token.id, }).then(res => { console.log('redirect 3d 验证', res) if (res.code === '200' || res.code === '1') { const result = res.data window.location.href = result.toString() } }).catch(() => { this.isRequestFalse = true }) }
查询是否支付成功
payForMoney () { const { transAccessToken, receipteEmail, source } = this.stripeParames charge({ transAccessToken, receipteEmail, sourceId: source, }).then((res) => { console.log('charge 扣款', res) if (res.code === '200' || res.code === '1') { this.$message.success('payment successful') const { transAccessToken } = this.stripeParames const newUrl = window.location.origin + '/#/payment?transAccessToken=' + transAccessToken + '&chargeStatus=success' window.location.href = newUrl } }).catch(() => { this.isRequestFalse = true })},
支付失败，点击重新支付
rePayment () { // 付款失败，点击重新付款， 跳转到初始url页面 this.isRequestFalse = true const { transAccessToken } = this.stripeParames const newUrl = window.location.origin + '/#/payment?transAccessToken=' + transAccessToken window.location.href = newUrl},
