前言
本文章是集成stripe结账页面的文章
官方地址:
名称 | 地址 |
---|---|
收款 | https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements |
自定义支付流程 | https://stripe.com/docs/payments/quickstart |
元素外观API | https://stripe.com/docs/elements/appearance-api |
支付场景 | https://stripe.com/docs/payments/more-payment-scenarios |
一、引入库
文档:https://www.npmjs.com/package/@stripe/stripe-js
npm install @stripe/stripe-js
二、使用
html
<form @submit.prevent="handleSubmit">
<div id="payment-element"/>
<el-button native-type="submit" type="primary" round >Complete</el-button>
</form>
js
<script>
import {toRaw} from '@vue/reactivity'
import {loadStripe} from "@stripe/stripe-js";
export default {
data(){
return{
stripe: undefined,
elements:undefined,
}
},
method:{
async initStripe() {
this.stripe = await loadStripe('xxxxxxxxx');
this.elements = this.stripe.elements({
theme: 'stripe',
clientSecret: 'xxxxxx',
locale:'auto'
})
const paymentElement = this.elements.create("payment");
paymentElement.mount("#payment-element");
},
},
async handleSubmit(e) {
e.preventDefault();
let elements=toRaw(this.elements)
let stripe=toRaw(this.stripe)
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:4242/checkout.html",
},
//redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
});
console.log(error)
},
created() {
this.initStripe()
},
}
</script>