feat: stripe支付

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 = () => {
             <WechatOutlined class="payment-icon wxpay-icon" />
             <span>{{ t('page.order.wxpay') }}</span>
           </div>
+          <div
+            class="method-item"
+            :class="{ disabled: loading }"
+            @click="!loading && handleConfirm('stripe')"
+          >
+            <WechatOutlined class="payment-icon wxpay-icon" />
+            <span>{{ t('page.order.stripe') }}</span>
+          </div>
           <PaypalButton
           :order-info="props.orderInfo"
           />

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',

src/locales/langs/zh-cn.ts

@@ -728,6 +728,7 @@ const local:any = {
       selectPayment:'支付方式',
       alipay:'支付宝支付',
       wxpay:'微信支付',
+      stripe:'Stripe',
       balancePay:'余额支付',
       availableBalance:'可用余额',
       paymentSuccess:'支付成功',

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'
+  });
+}

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']