uni-app Stripe支付封装

在封装uni-app中的Stripe支付功能时，我们需要处理几个关键步骤：初始化Stripe客户端、创建支付意图（Payment Intent）、处理客户端支付流程以及处理支付结果。以下是一个简化的代码示例，展示了如何在uni-app中实现Stripe支付的封装。

首先，确保你已经安装了@stripe/stripe-js库，并且在你的uni-app项目中引入了Stripe的JS库。

1. 安装Stripe库

在你的项目根目录下运行：

npm install @stripe/stripe-js

2. 创建Stripe支付封装

stripe-payment.js

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

const publishableKey = 'your_stripe_publishable_key'; // 替换为你的Stripe公钥
const stripe = createStripe(publishableKey);

export default {
  async createPaymentIntent(amount) {
    const response = await fetch('YOUR_BACKEND_API_ENDPOINT', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ amount }),
    });
    const data = await response.json();
    return data.clientSecret; // 从后端获取支付意图的clientSecret
  },
  async handlePayment(clientSecret, elements) {
    const { error, paymentMethod } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
      },
    });

    if (error) {
      console.error('Payment failed', error);
    } else if (paymentMethod) {
      console.log('Payment succeeded', paymentMethod);
    }
  },
};

3. 在uni-app页面中使用Stripe支付

pages/payment/payment.vue

<template>
  <view>
    <div id="card-element"></div>
    <button @click="handlePaymentClick">Pay</button>
  </view>
</template>

<script>
import { loadStripe } from '@stripe/stripe-js';
import stripePayment from '@/utils/stripe-payment'; // 引入封装好的Stripe支付模块
import { CardElement, Elements } from '@stripe/react-stripe-js';

export default {
  data() {
    return {
      stripe: null,
      elements: null,
    };
  },
  async mounted() {
    this.stripe = await loadStripe(process.env.VUE_APP_STRIPE_PUBLISHABLE_KEY);
    this.elements = this.$refs.elements;
  },
  methods: {
    async handlePaymentClick() {
      const clientSecret = await stripePayment.createPaymentIntent(1000); // 金额单位：分
      stripePayment.handlePayment(clientSecret, this.elements);
    },
  },
  render() {
    return (
      <Elements stripe={this.stripe}>
        <CardElement ref="cardElement" />
        {/* 其他模板内容 */}
      </Elements>
    );
  },
};
</script>

注意：这里的代码示例假设你有一个后端API来处理创建Stripe支付意图的逻辑，并且你需要将YOUR_BACKEND_API_ENDPOINT替换为你自己的后端API端点。此外，确保你的环境变量中已经设置了VUE_APP_STRIPE_PUBLISHABLE_KEY。