From 441d39af0ade5071966d4912ffe7d1728fc02631 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Fri, 9 Jan 2026 22:51:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E9=A1=B5=E9=9D=A2=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E6=96=B9=E5=BC=8F=E5=A2=9E=E5=8A=A0stripe=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/BuyPrepaidCreditsForm.vue  | 39 +++++++++++++++++--
 dashboard/src/components/StripeLogo.vue       |  4 +-
 dashboard/vite.config.ts                      |  2 +-
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/BuyPrepaidCreditsForm.vue b/dashboard/src/components/BuyPrepaidCreditsForm.vue
index 878be7a..bc710cc 100644
--- a/dashboard/src/components/BuyPrepaidCreditsForm.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsForm.vue
@@ -20,7 +20,7 @@
 
 	<div class="mt-4">
 		<div class="text-xs text-gray-600">{{ $t('Payment Method') }}</div>
-		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
+		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-3">
 			<label
 				class="payment-option"
 				:class="{'payment-option-active': paymentGateway === 'Alipay'}"
@@ -50,11 +50,26 @@
 					</svg>
 				</span>
 			</label>
+			
+			<label
+				class="payment-option"
+				:class="{'payment-option-active': paymentGateway === 'Stripe'}"
+			>
+				<div class="payment-icon">
+					<StripeLogo />
+				</div>
+				<input type="radio" v-model="paymentGateway" value="Stripe" class="hidden-radio">
+				<span class="checkmark-circle" v-if="paymentGateway === 'Stripe'">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
+						<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
+					</svg>
+				</span>
+			</label>
 		</div>
 	</div>
 
 	<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
-		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
+		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : paymentGateway === 'WeChatPay' ? $t('WeChat Pay') : $t('Stripe') }) }}
 	</div>
 
 	<BuyPrepaidCreditsAlipay
@@ -74,20 +89,31 @@
 		@success="onSuccess"
 		@cancel="onCancel"
 	/>
+
+	<BuyPrepaidCreditsStripe
+		v-if="paymentGateway === 'Stripe'"
+		:amount="creditsToBuy"
+		:minimumAmount="minimumAmount"
+		@success="onSuccess"
+	/>
 </template>
 <script>
 import BuyPrepaidCreditsAlipay from './BuyPrepaidCreditsAlipay.vue';
 import BuyPrepaidCreditsWeChatPay from './BuyPrepaidCreditsWeChatPay.vue';
+import BuyPrepaidCreditsStripe from './BuyPrepaidCreditsStripe.vue';
 import AlipayLogo from '../logo/AlipayLogo.vue';
 import WeChatPayLogo from '../logo/WeChatPayLogo.vue';
+import StripeLogo from './StripeLogo.vue';
 
 export default {
 	name: 'BuyPrepaidCreditsForm',
 	components: {
 		BuyPrepaidCreditsAlipay,
 		BuyPrepaidCreditsWeChatPay,
+		BuyPrepaidCreditsStripe,
 		AlipayLogo,
-		WeChatPayLogo
+		WeChatPayLogo,
+		StripeLogo
 	},
 	data() {
 		return {
@@ -151,6 +177,11 @@ export default {
     box-shadow: 0 0 0 1px rgba(34, 172, 56, 0.1);
 }
 
+.payment-option-active:has(input[value="Stripe"]:checked) {
+    border-color: #6772e5;
+    box-shadow: 0 0 0 1px rgba(103, 114, 229, 0.1);
+}
+
 .payment-icon {
     display: flex;
     align-items: center;
@@ -162,7 +193,7 @@ export default {
     flex-shrink: 0;
 }
 
-.alipay-svg, .wechat-svg {
+.alipay-svg, .wechat-svg, .stripe-svg, .payment-icon svg {
     width: 100%;
     height: auto;
     max-height: 30px;
diff --git a/dashboard/src/components/StripeLogo.vue b/dashboard/src/components/StripeLogo.vue
index 377ddfc..33726a4 100644
--- a/dashboard/src/components/StripeLogo.vue
+++ b/dashboard/src/components/StripeLogo.vue
@@ -2,8 +2,8 @@
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:xlink="http://www.w3.org/1999/xlink"
-		width="119px"
-		height="26px"
+		viewBox="0 0 119 26"
+		class="stripe-svg"
 	>
 		<path
 			fill-rule="evenodd"
diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
index 9b8e6f9..ebc2dad 100644
--- a/dashboard/vite.config.ts
+++ b/dashboard/vite.config.ts
@@ -11,7 +11,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import vitePluginTranslate from './vite-plugin-translate.mjs';
 
 // 语言配置：设置目标语言，默认为 'en'（英文），可设置为 'zh'（中文）等
-const locale = process.env.DASHBOARD_LOCALE || 'zh';
+const locale = process.env.DASHBOARD_LOCALE || 'en';
 
 export default defineConfig({
 	plugins: [