uniapp Stripe 支付

引入 Stripe  

npm install @stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';

Stripe 提供两种不同类型组件

Payment Element 和  Card Element：如果你使用的是 Payment Element，它是一个更高级别的组件，能够自动处理多种支付方式（如信用卡、Apple Pay 等），并且不需要你手动指定 payment_method 对象。而 Card Element 则是专门用于收集信用卡信息的低级别组件

 这里用的是 Payment Element Stripe 自动处理支付方式的选择，并且不要手动构造 payment_method 对象

import { loadStripe } from '@stripe/stripe-js';export default {data() {return {stripe: null,elements: null,paymentElement: null,clientSecret: ''  // 调用后端创建订单接口返回的参数};},async mounted() {uni.showLoading({title: 'loading...'});this.stripe = await loadStripe(''); // 替换为你的 Publishable Keythis.setupElements()},methods: {setupElements(){if (!this.stripe || !this.clientSecret) return;this.elements = this.stripe.elements({clientSecret: this.clientSecret,})this.paymentElement= this.elements.create('payment');this.paymentElement.mount('#payment-element');uni.hideLoading()},async handleSubmit() {if (!this.stripe || !this.paymentElement || !this.clientSecret) {//  自己封装的提示方法this.$Common.showToast('Payment setup is incomplete');return;}uni.showLoading({title: 'loading...'});const {error,paymentIntent} = await this.stripe.confirmPayment({elements: this.elements,confirmParams: {// 用户完成支付后的重定向 URLreturn_url: 'http://123:8080/#/pages/pay/orderComplete',},});if (error) {console.error('Error:', error.message);this.$Common.showToast(error.message);uni.hideLoading()} else {if (paymentIntent.status === 'succeeded') {uni.hideLoading()this.$Common.showToast('Payment succeeded!');// 这里可以根据业务逻辑跳转到成功页面或执行其他操作}}},}
};