From 1206dd6877230ad20ca0fc6e7711114ad215a963 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 10 Jan 2026 00:56:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0paypal=E6=94=AF=E4=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BuyPrepaidCreditsPayPal.vue    | 109 ++++++++++++++++++
 .../components/billing/PrepaidCreditsForm.vue |  89 +++++++++++++-
 2 files changed, 195 insertions(+), 3 deletions(-)
 create mode 100644 dashboard/src/components/BuyPrepaidCreditsPayPal.vue

diff --git a/dashboard/src/components/BuyPrepaidCreditsPayPal.vue b/dashboard/src/components/BuyPrepaidCreditsPayPal.vue
new file mode 100644
index 0000000..e5e1f36
--- /dev/null
+++ b/dashboard/src/components/BuyPrepaidCreditsPayPal.vue
@@ -0,0 +1,109 @@
+<template>
+	<div>
+		<ErrorMessage
+			class="mt-3"
+			:message="$resources.createPayPalOrder.error || error"
+		/>
+		<div class="mt-4 flex w-full justify-end">
+			<Button
+				variant="solid"
+				class="paypal-btn"
+				:loading="$resources.createPayPalOrder.loading || loading"
+				@click="processPayPalPayment"
+			>
+				{{ $t('Pay with PayPal') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { toast } from 'vue-sonner';
+import { DashboardError } from '../utils/error';
+
+export default {
+	name: 'BuyPrepaidCreditsPayPal',
+	props: {
+		amount: {
+			default: 0
+		},
+		minimumAmount: {
+			default: 0
+		},
+		isOnboarding: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			loading: false,
+			error: null
+		};
+	},
+	resources: {
+		createPayPalOrder() {
+			return {
+				url: 'jcloud.api.billing.create_paypal_order_for_recharge',
+				params: {
+					amount: this.amount
+				},
+				validate() {
+					if (this.amount <= 0) {
+						throw new DashboardError(this.$t('Payment amount must be greater than 0'));
+					}
+					if (this.amount < this.minimumAmount) {
+						throw new DashboardError(this.$t('Amount is below the minimum required amount'));
+					}
+				},
+				onSuccess(response) {
+					window.open(response.payment_url, '_blank');
+					
+					toast.success(this.$t('Payment page opened in new window'));
+					
+					// Optional: check payment status
+					// this.checkPaymentStatus(response.order_id);
+				}
+			};
+		}
+	},
+	methods: {
+		processPayPalPayment() {
+			this.$resources.createPayPalOrder.submit();
+		},
+		
+		// Optional: method to check payment status
+		checkPaymentStatus(orderId) {
+			const checkInterval = setInterval(() => {
+				this.$call('jcloud.api.billing.check_payment_status', {
+					order_id: orderId,
+					payment_type: 'paypal'
+				}).then(result => {
+					if (result && result.status === 'Success') {
+						clearInterval(checkInterval);
+						toast.success(this.$t('Payment successful! Account has been recharged'));
+						this.$emit('success');
+					}
+				}).catch(err => {
+					console.error('Error checking payment status:', err);
+				});
+			}, 3000);
+			
+			// Stop checking after 5 minutes
+			setTimeout(() => {
+				clearInterval(checkInterval);
+			}, 300000);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.paypal-btn {
+	background-color: #00457C;
+	color: white;
+}
+
+.paypal-btn:hover {
+	background-color: #003057;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/billing/PrepaidCreditsForm.vue b/dashboard/src/components/billing/PrepaidCreditsForm.vue
index f287134..9d195f6 100644
--- a/dashboard/src/components/billing/PrepaidCreditsForm.vue
+++ b/dashboard/src/components/billing/PrepaidCreditsForm.vue
@@ -19,7 +19,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'}"
@@ -49,11 +49,83 @@
 					</svg>
 				</span>
 			</label>
+			<label
+				class="payment-option"
+				:class="{'payment-option-active': paymentGateway === 'PayPal'}"
+			>
+				<div class="payment-icon">
+					<!-- PayPal SVG Logo -->
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119 28" class="paypal-svg">
+						<path d="M10.49,27.45c0-0.08,0.02-0.16,0.03-0.24c0.22-0.9,1.1-1.59,2.02-1.59h3.13c0.81,0,1.56,0.45,1.93,1.17
+							c0.04,0.06,0.09,0.12,0.14,0.17c0.36,0.43,0.55,0.96,0.55,1.52c0,0.08-0.01,0.16-0.03,0.24C19.03,27.79,18.89,28,18.73,28
+							c-0.36,0-0.72-0.15-0.99-0.43c-0.07-0.08-0.14-0.16-0.22-0.24c-0.06-0.07-0.11-0.13-0.17-0.19c-0.2-0.18-0.47-0.28-0.75-0.28h-0.87
+							c-0.92,0-1.66-0.69-1.76-1.59C12.96,27.3,11.89,27.45,10.49,27.45z" fill="#003087"></path>
+						<path d="M9.94,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.98c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.98
+							C10.68,24.14,9.92,23.44,9.94,22.55z" fill="#003087"></path>
+						<path d="M21.63,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.22c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.22
+							C22.37,24.14,21.61,23.44,21.63,22.55z" fill="#003087"></path>
+						<path d="M28.63,22.55c0.02-0.89,0.8-1.59,1.68-1.59h3.69c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-3.69
+							C29.37,24.14,28.61,23.44,28.63,22.55z" fill="#003087"></path>
+						<path d="M36.16,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.42c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.42
+							C36.9,24.14,36.14,23.44,36.16,22.55z" fill="#003087"></path>
+						<path d="M42.71,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.11c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.11
+							C43.45,24.14,42.69,23.44,42.71,22.55z" fill="#003087"></path>
+						<path d="M50.07,22.55c0.02-0.89,0.8-1.59,1.68-1.59h4.34c0.92,0,1.66,0.7,1.68,1.59c0,0.89-0.74,1.59-1.68,1.59h-4.34
+							C50.81,24.14,50.05,23.44,50.07,22.55z" fill="#003087"></path>
+						<path d="M113.45,9.46h-3.11c-0.7,0-1.28,0.59-1.28,1.3c0,0.66,0.51,1.19,1.14,1.29l3.24,0.53c0.76,0.12,1.32,0.81,1.32,1.59
+							c0,0.83-0.68,1.5-1.53,1.5c-0.49,0-0.94-0.22-1.23-0.58c-0.04-0.05-0.08-0.11-0.12-0.16c-0.16-0.2-0.27-0.43-0.34-0.68h-2.69
+							c0,0.59,0.11,1.16,0.34,1.68c0.33,0.74,0.96,1.26,1.75,1.26c0.25,0,0.5-0.05,0.72-0.14c0.14-0.06,0.27-0.12,0.4-0.2
+							c0.06-0.04,0.12-0.08,0.17-0.12c0.42-0.29,0.64-0.78,0.64-1.32c0-0.21-0.04-0.42-0.12-0.62c-0.05-0.12-0.11-0.24-0.18-0.35
+							c-0.04-0.06-0.08-0.12-0.13-0.18l-0.19-0.22c-0.06-0.07-0.12-0.13-0.19-0.2c-0.03-0.03-0.05-0.05-0.08-0.08
+							c-0.18-0.17-0.41-0.28-0.67-0.28h2.04c0.43,0,0.78-0.35,0.78-0.78c0-0.43-0.35-0.78-0.78-0.78h-0.98c-0.69,0-1.25-0.56-1.25-1.25
+							c0-0.65,0.52-1.18,1.16-1.28l3.71-0.52C113.13,8.86,113.45,9.18,113.45,9.46z" fill="#009CDE"></path>
+						<path d="M92.72,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
+							c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
+							c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
+							c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
+							C92.68,10.71,92.72,10.53,92.72,10.34z M90.05,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
+							c0-0.7,0.57-1.27,1.27-1.27C89.48,9.07,90.05,9.64,90.05,10.34z" fill="#003087"></path>
+						<path d="M73.94,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
+							c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
+							c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
+							c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
+							C73.9,10.71,73.94,10.53,73.94,10.34z M71.27,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
+							c0-0.7,0.57-1.27,1.27-1.27C70.7,9.07,71.27,9.64,71.27,10.34z" fill="#003087"></path>
+						<path d="M63.29,10.34c0-0.18-0.04-0.36-0.12-0.52c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15
+							c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01
+							c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15
+							c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02
+							C63.25,10.71,63.29,10.53,63.29,10.34z M60.62,10.34c0,0.7-0.57,1.27-1.27,1.27c-0.7,0-1.27-0.57-1.27-1.27
+							c0-0.7,0.57-1.27,1.27-1.27C60.05,9.07,60.62,9.64,60.62,10.34z" fill="#003087"></path>
+						<path d="M42.32,9.46H36.97c0,0.59,0.11,1.16,0.34,1.68c0.33,0.74,0.96,1.26,1.75,1.26c0.81,0,1.49-0.54,1.74-1.27l-0.01,0.02
+							c-0.01,0.08-0.02,0.16-0.03,0.24c-0.22,0.9-1.1,1.59-2.02,1.59h-3.13c-0.92,0-1.66-0.69-1.76-1.59c-0.02,0.08-0.03,0.16-0.03,0.24
+							c0,0.69,0.56,1.25,1.25,1.25c0.25,0,0.5-0.05,0.72-0.14c0.14-0.06,0.27-0.12,0.4-0.2c0.06-0.04,0.12-0.08,0.17-0.12
+							c0.42-0.29,0.64-0.78,0.64-1.32c0-0.21-0.04-0.42-0.12-0.62c-0.05-0.12-0.11-0.24-0.18-0.35c-0.04-0.06-0.08-0.12-0.13-0.18
+							l-0.19-0.22c-0.06-0.07-0.12-0.13-0.19-0.2c-0.03-0.03-0.05-0.05-0.08-0.08c-0.18-0.17-0.41-0.28-0.67-0.28h2.04
+							c0.43,0,0.78-0.35,0.78-0.78c0-0.43-0.35-0.78-0.78-0.78H37c-0.69,0-1.25-0.56-1.25-1.25c0-0.65,0.52-1.18,1.16-1.28l3.71-0.52
+							c0.51-0.07,0.93-0.46,0.99-0.97c0.01-0.16,0.02-0.32,0.02-0.48c0-0.75-0.62-1.36-1.39-1.36h-3.51c-0.7,0-1.28,0.59-1.28,1.3
+							c0,0.66,0.51,1.19,1.14,1.29l3.24,0.53c0.76,0.12,1.32,0.81,1.32,1.59c0,0.83-0.68,1.5-1.53,1.5c-0.49,0-0.94-0.22-1.23-0.58
+							c-0.04-0.05-0.08-0.11-0.12-0.16c-0.16-0.2-0.27-0.43-0.34-0.68h-2.69c0,0.37,0.06,0.73,0.17,1.06c0.19,0.61,0.61,1.06,1.18,1.06
+							c0.45,0,0.85-0.26,1.07-0.68C41.92,10.39,42.32,10.01,42.32,9.46z M27.71,10.34c0-0.18-0.04-0.36-0.12-0.52
+							c-0.36-0.63-0.99-1.01-1.74-1.01c-0.27,0-0.53,0.05-0.78,0.15c-0.25,0.1-0.47,0.23-0.68,0.4c-0.1-0.14-0.22-0.28-0.35-0.4
+							c-0.25-0.1-0.51-0.15-0.78-0.15c-0.75,0-1.38,0.38-1.74,1.01c-0.08,0.16-0.12,0.34-0.12,0.52c0,0.19,0.04,0.37,0.12,0.53
+							c0.36,0.63,0.99,1.02,1.74,1.02c0.28,0,0.54-0.05,0.78-0.15c0.25-0.1,0.47-0.23,0.68-0.4c0.1,0.14,0.22,0.28,0.35,0.4
+							c0.24,0.1,0.51,0.15,0.78,0.15c0.75,0,1.38-0.39,1.74-1.02C27.67,10.71,27.71,10.53,27.71,10.34z M25.04,10.34c0,0.7-0.57,1.27-1.27,1.27
+							c-0.7,0-1.27-0.57-1.27-1.27c0-0.7,0.57-1.27,1.27-1.27C24.47,9.07,25.04,9.64,25.04,10.34z" fill="#003087"></path>
+					</svg>
+				</div>
+				<input type="radio" v-model="paymentGateway" value="PayPal" class="hidden-radio">
+				<span class="checkmark-circle" v-if="paymentGateway === 'PayPal'">
+					<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('PayPal') }) }}
 	</div>
 
 	<BuyPrepaidCreditsAlipay
@@ -73,16 +145,27 @@
 		@success="onSuccess"
 		@cancel="onCancel"
 	/>
+
+	<BuyPrepaidCreditsPayPal
+		v-if="paymentGateway === 'PayPal'"
+		:amount="creditsToBuy"
+		:minimumAmount="minimumAmount"
+		:isOnboarding="isOnboarding"
+		@success="onSuccess"
+		@cancel="onCancel"
+	/>
 </template>
 <script>
 import BuyPrepaidCreditsAlipay from '../BuyPrepaidCreditsAlipay.vue';
 import BuyPrepaidCreditsWeChatPay from '../BuyPrepaidCreditsWeChatPay.vue';
+import BuyPrepaidCreditsPayPal from '../BuyPrepaidCreditsPayPal.vue';
 
 export default {
 	name: 'BuyPrepaidCreditsForm',
 	components: {
 		BuyPrepaidCreditsAlipay,
-		BuyPrepaidCreditsWeChatPay
+		BuyPrepaidCreditsWeChatPay,
+		BuyPrepaidCreditsPayPal
 	},
 	data() {
 		return {