diff --git a/src/components/order-confirm/orderConfirmModal.vue b/src/components/order-confirm/orderConfirmModal.vue index 8312f99..20916e5 100644 --- a/src/components/order-confirm/orderConfirmModal.vue +++ b/src/components/order-confirm/orderConfirmModal.vue @@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'; import { AlipayOutlined, WechatOutlined, WalletOutlined } from '@ant-design/icons-vue'; import { Modal } from 'ant-design-vue'; import PaypalButton from '@/components/payment/paypal-button.vue'; +import { stripePay } from '@/service/api/payment'; const { t } = useI18n(); @@ -38,7 +39,7 @@ const isBalancePayDisabled = computed(() => { return props.loading || false; }); -const handleConfirm = (paymentMethod: 'alipay' | 'wxpay' | 'balance') => { +const handleConfirm = async (paymentMethod: 'alipay' | 'wxpay' | 'balance') => { if (paymentMethod === 'balance') { Modal.confirm({ title: t('page.order.confirmPayment'), @@ -49,6 +50,9 @@ const handleConfirm = (paymentMethod: 'alipay' | 'wxpay' | 'balance') => { emit('confirm', paymentMethod); } }); + } else if(paymentMethod === 'stripe') { + const response = await stripePay(props.orderInfo.orderId); + window.location.href = response.data } else { emit('confirm', paymentMethod); } @@ -129,6 +133,14 @@ const handleCancel = () => { {{ t('page.order.wxpay') }} +
+ + {{ t('page.order.stripe') }} +
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index e9ce352..868d0b4 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -728,6 +728,7 @@ const local: any = { selectPayment:'Payment', alipay:'Alipay', wxpay:'WeChat Pay', + stripe:'Stripe', balancePay:'Balance Pay', availableBalance:'Balance', paymentSuccess:'Payment successful', diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index 15869cc..37f2b66 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -728,6 +728,7 @@ const local:any = { selectPayment:'支付方式', alipay:'支付宝支付', wxpay:'微信支付', + stripe:'Stripe', balancePay:'余额支付', availableBalance:'可用余额', paymentSuccess:'支付成功', diff --git a/src/service/api/payment.ts b/src/service/api/payment.ts index 21cfba5..f3f497f 100644 --- a/src/service/api/payment.ts +++ b/src/service/api/payment.ts @@ -54,3 +54,11 @@ export function payPalCapture(paypalOrderId: string, orderId: number) { method: 'post' }); } + +/** Stripe pay with orderId */ +export function stripePay(orderId: number) { + return request({ + url: `/payment/stripe/pay/${orderId}`, + method: 'post' + }); +} diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts index 7ac17fd..f999bd6 100644 --- a/src/typings/auto-imports.d.ts +++ b/src/typings/auto-imports.d.ts @@ -214,6 +214,7 @@ declare global { const shallowRef: typeof import('vue')['shallowRef'] const sortRoutesByOrder: typeof import('../store/modules/route/shared')['sortRoutesByOrder'] const storeToRefs: typeof import('pinia')['storeToRefs'] + const stripePay: typeof import('../service/api/payment')['stripePay'] const submitKYCVerification: typeof import('../service/api/auth')['submitKYCVerification'] const submitOrder: typeof import('../service/api/auth')['submitOrder'] const submitPackageOrder: typeof import('../service/api/auth')['submitPackageOrder']