更新记录

1.0.0（2025-08-28）

v1.0.0

• ✨ 初始版本发布
• ✅ 支持 Stripe Connect 集成
• ✅ 支持银行卡支付
• ✅ 提供原生银行卡输入组件
• ✅ 支持 Android 和 iOS 平台
• ✅ 完善的错误处理机制
• ✅ 支持多种卡片类型（Visa、MasterCard、American Express等）

平台兼容性

uni-app(4.07)

uni-app x(4.07)

bsf-stripe-card

此项目是基于 Stripe Connect API 专为 uniapp/uniappx 的 App 项目定制的 UTS 插件，支持银行卡支付集成和银行卡输入组件。

平台支持

• ✅ Android
• ✅ iOS
• ✅ Vue2/Vue3
• ✅ uniapp-x

功能特性

• 🔐 Stripe Connect 账户集成
• 💳 银行卡支付支持
• 🎨 原生银行卡输入组件
• 🔧 简单易用的 API 接口
• 📱 跨平台兼容（Android & iOS）
• 🛡️ 完善的错误处理机制
• ✨ 支持多种卡片类型（Visa、MasterCard、American Express等）

使用说明

使用前的准备

1. 需要在 Stripe 平台 注册账户并获取相关参数：
   • Publishable Key（可发布密钥）
   • Connect Account ID（连接账户ID）
2. 配置银行卡支付相关参数
3. 确保应用已配置相应的 URL Scheme（iOS 必需）

引入插件

import * as StripeCardWidget from "@/uni_modules/bsf-stripe-card";

引入组件

<template>
  <view class="container">
    <!-- Android 银行卡输入组件 -->
    <bsf-stripe-card 
      v-if="isAndroid"
      ref="cardInput"
      @ready="onCardInputReady"
      style="height: 200px;"
    />

    <!-- iOS 银行卡输入组件 -->
    <bsf-stripe-card-ios 
      v-if="isIOS"
      ref="cardInputIOS"
      @ready="onCardInputReady"
      style="height: 200px;"
    />
  </view>
</template>

API 接口

initPaymentConfiguration (初始化支付配置)

在使用支付功能前，需要先初始化 Stripe 配置。

StripeCardWidget.initPaymentConfiguration(
  "pk_test_your_publishable_key", // Stripe 可发布密钥
  "acct_your_connect_account_id"   // Stripe Connect 账户ID
);

参数说明：

• publicKey (String): Stripe 可发布密钥
• connectAccountId (String): Stripe Connect 账户ID

confirmCardPayment (确认银行卡支付)

发起银行卡支付流程。

StripeCardWidget.confirmCardPayment({
  secretKey: "pi_xxx_secret_xxx",           // PaymentIntent 客户端密钥
  cardInputWidget: this.$refs.cardInput,    // 银行卡输入组件实例
  stripeAccountId: "acct_xxx",              // Stripe 账户ID（可选）
  returnUrl: "your-app://stripe-redirect",  // 支付完成后的返回URL（iOS必需）

  // 支付成功回调
  onSuccess: () => {
    console.log("支付成功！");
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });
  },

  // 支付失败回调
  onFailure: (error) => {
    console.error("支付失败：", error.errMsg);
    uni.showToast({
      title: error.errMsg,
      icon: 'none'
    });
  },

  // 支付取消回调
  onCancel: () => {
    console.log("用户取消支付");
    uni.showToast({
      title: '支付已取消',
      icon: 'none'
    });
  }
});

参数说明：

• secretKey (String): PaymentIntent 的客户端密钥
• cardInputWidget (Object): 银行卡输入组件的引用
• stripeAccountId (String, 可选): Stripe 账户ID
• returnUrl (String, 可选): iOS 支付完成后的返回URL
• onSuccess (Function, 可选): 支付成功回调
• onFailure (Function, 可选): 支付失败回调，参数为错误对象
• onCancel (Function, 可选): 支付取消回调

组件使用说明

Android 组件 (bsf-stripe-card)

基于 Stripe Android SDK 的 CardMultilineWidget 实现。

组件属性：

• style: 组件样式，建议设置固定高度（如 200px）

组件事件：

• @ready: 组件准备就绪时触发

iOS 组件 (bsf-stripe-card-ios)

基于 Stripe iOS SDK 的 STPCardFormView 实现。

组件属性：

• style: 组件样式，建议设置固定高度（如 200px）

组件事件：

• @ready: 组件准备就绪时触发

完整使用示例

<template>
  <view class="container">
    <view class="header">
      <text class="title">银行卡支付</text>
    </view>

    <view class="payment-section">
      <button @click="initStripe" class="btn" :disabled="isInitialized">
        {{ isInitialized ? '已初始化' : '初始化 Stripe' }}
      </button>

      <!-- 银行卡输入组件 -->
      <view class="card-input-container">
        <text class="label">请输入银行卡信息：</text>

        <!-- Android 组件 -->
        <bsf-stripe-card 
          v-if="isAndroid"
          ref="cardInput"
          @ready="onCardInputReady"
          class="card-input"
        />

        <!-- iOS 组件 -->
        <bsf-stripe-card-ios 
          v-if="isIOS"
          ref="cardInputIOS"
          @ready="onCardInputReady"
          class="card-input"
        />
      </view>

      <button 
        @click="payWithCard" 
        class="btn pay-btn" 
        :disabled="!isInitialized || !cardInputReady"
      >
        确认支付
      </button>
    </view>
  </view>
</template>

<script>
import * as StripeCardWidget from "@/uni_modules/bsf-stripe-card";

export default {
  data() {
    return {
      isInitialized: false,
      cardInputReady: false,
      isAndroid: false,
      isIOS: false
    }
  },

  mounted() {
    // 检测平台
    // #ifdef APP-ANDROID
    this.isAndroid = true;
    // #endif

    // #ifdef APP-IOS
    this.isIOS = true;
    // #endif
  },

  methods: {
    // 初始化 Stripe 配置
    initStripe() {
      try {
        StripeCardWidget.initPaymentConfiguration(
          "pk_test_your_publishable_key",
          "acct_your_connect_account_id"
        );
        this.isInitialized = true;
        uni.showToast({
          title: 'Stripe 初始化成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('初始化失败:', error);
        uni.showToast({
          title: '初始化失败',
          icon: 'none'
        });
      }
    },

    // 银行卡输入组件准备就绪
    onCardInputReady() {
      this.cardInputReady = true;
      console.log('银行卡输入组件已准备就绪');
    },

    // 发起银行卡支付
    async payWithCard() {
      // 首先从服务器获取 PaymentIntent
      const paymentIntent = await this.createPaymentIntent();

      if (!paymentIntent) {
        uni.showToast({
          title: '获取支付信息失败',
          icon: 'none'
        });
        return;
      }

      // 获取银行卡输入组件引用
      const cardInputWidget = this.isAndroid ? 
        this.$refs.cardInput : 
        this.$refs.cardInputIOS;

      if (!cardInputWidget) {
        uni.showToast({
          title: '银行卡组件未准备就绪',
          icon: 'none'
        });
        return;
      }

      // 发起支付
      StripeCardWidget.confirmCardPayment({
        secretKey: paymentIntent.client_secret,
        cardInputWidget: cardInputWidget,
        returnUrl: "your-app://stripe-redirect", // iOS 必需

        onSuccess: () => {
          console.log("支付成功！");
          uni.showModal({
            title: '支付结果',
            content: '银行卡支付成功！',
            showCancel: false
          });
        },

        onFailure: (error) => {
          console.error("支付失败：", error);
          uni.showModal({
            title: '支付失败',
            content: error.errMsg || '支付过程中出现错误',
            showCancel: false
          });
        },

        onCancel: () => {
          console.log("用户取消支付");
          uni.showToast({
            title: '支付已取消',
            icon: 'none'
          });
        }
      });
    },

    // 从服务器创建 PaymentIntent
    async createPaymentIntent() {
      try {
        const response = await uni.request({
          url: 'https://your-server.com/api/create-payment-intent',
          method: 'POST',
          data: {
            amount: 2000, // 金额（分）
            currency: 'usd', // 银行卡支付通常使用美元
            payment_method_types: ['card']
          }
        });
        return response.data;
      } catch (error) {
        console.error('创建 PaymentIntent 失败:', error);
        return null;
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.payment-section {
  max-width: 400px;
  margin: 0 auto;
}

.btn {
  width: 100%;
  padding: 15px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
}

.btn:disabled {
  background-color: #ccc;
}

.card-input-container {
  margin: 20px 0;
}

.label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.card-input {
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 20px;
}

.pay-btn {
  background-color: #28a745;
}

.pay-btn:disabled {
  background-color: #ccc;
}
</style>

错误码说明

注意事项

iOS 配置

1. URL Scheme 配置：在 manifest.json 中配置 URL Scheme

   {
   "app-plus": {
   "distribute": {
     "ios": {
       "urlschemewhitelist": ["your-app"]
     }
   }
   }
   }

2. Info.plist 配置：需要在原生工程中配置 URL Types

Android 配置

1. 确保已添加网络权限
2. Stripe Android SDK 已自动集成

银行卡安全

1. PCI DSS 合规：此插件使用 Stripe 的原生组件，符合 PCI DSS 安全标准
2. 卡片信息不存储：所有敏感的银行卡信息都由 Stripe 处理，不会在您的应用中存储
3. 安全传输：所有数据传输都使用 HTTPS 加密

支持的卡片类型

• Visa
• MasterCard
• American Express
• Discover
• Diners Club
• JCB
• UnionPay（部分地区）

服务器端集成

需要在服务器端集成 Stripe API 来创建 PaymentIntent，参考 Stripe 官方文档

开发文档

• UTS 语法
• UTS API插件
• UTS 组件
• Stripe Connect 文档
• Stripe 银行卡支付
• Stripe Android SDK
• Stripe iOS SDK