vue集成stripe结算界面

前言

本文章是集成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>

显示结果