feat: paypal配置

src/components/payment/paypal-button.vue

@@ -1,6 +1,31 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { constructPaypalBtn } from '@/utils/paypal';
+import { getPaymentConfig, getPayPalConfig } from '@/service/api/payment';
+import CryptoJS from 'crypto-js';
+
+/**
+ * AES解密处理（CBC模式）
+ */
+function decryptCBC(word: string) {
+  word = (word + '').replace(/\n*$/g, '').replace(/\n/g, ''); // 这一行，将换行符替换为空
+
+  // 密钥
+  const keyStr = "EolSdjfd89v2PubN";
+
+  // 向量
+  const ivStr = "EjlnujOBvlv2PubN";
+  const key = CryptoJS.enc.Utf8.parse(keyStr);
+  let iv = CryptoJS.enc.Utf8.parse(ivStr);
+  const decrypt = CryptoJS.AES.decrypt(word, key, 
+	  {
+	    iv: iv,
+	    mode: CryptoJS.mode.CBC,
+	    padding: CryptoJS.pad.Pkcs7
+	  }
+  )
+  return decrypt.toString(CryptoJS.enc.Utf8)
+}
 
 interface Props {
   orderInfo: {
@@ -13,7 +38,14 @@ interface Props {
 const props = defineProps<Props>();
 
 onMounted(async()=>{
-  await constructPaypalBtn(props.orderInfo.orderId, "USD");
+  const response = await getPaymentConfig();
+  let currency = 'USD';
+  if (response && response.data) {
+    currency = response.data.currency || 'USD';
+  }
+  const configRes = await getPayPalConfig();
+  const clientId = decryptCBC(configRes.data);
+  await constructPaypalBtn(clientId, props.orderInfo.orderId, currency);
 })
 </script>
 

src/locales/langs/en-us.ts

@@ -728,6 +728,7 @@ const local: any = {
       selectPayment:'Payment',
       alipay:'Alipay',
       wxpay:'WeChat Pay',
+      wxpayScan:'Scan QR code on WeChat',
       stripe:'Stripe',
       balancePay:'Balance Pay',
       availableBalance:'Balance',

src/locales/langs/zh-cn.ts

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

src/service/api/payment.ts

@@ -55,6 +55,14 @@ export function payPalCapture(paypalOrderId: string, orderId: number) {
   });
 }
 
+/** Get paypal configuration */
+export function getPayPalConfig() {
+  return request({
+    url: '/payment/paypal/result/one',
+    method: 'get'
+  });
+}
+
 /** Stripe pay with orderId */
 export function stripePay(orderId: number) {
   return request({

src/typings/auto-imports.d.ts

@@ -128,6 +128,7 @@ declare global {
   const getFixedTabIds: typeof import('../store/modules/tab/shared')['getFixedTabIds']
   const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
   const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
+  const getPayPalConfig: typeof import('../service/api/payment')['getPayPalConfig']
   const getPaymentConfig: typeof import('../service/api/payment')['getPaymentConfig']
   const getQueryParams: typeof import('../utils/common')['getQueryParams']
   const getRouteIcons: typeof import('../store/modules/tab/shared')['getRouteIcons']

src/utils/paypal.ts

@@ -5,8 +5,8 @@ import { useAppStore } from '@/store/modules/app';
 const appStore = useAppStore();
 const locale = appStore.locale.includes("zh") ? "zh_CN" : "en_US"
 
-export const constructPaypalBtn = async(orderId: number, currency: string) =>{
- loadScript({ clientId: import.meta.env.VITE_PAYPAL_CLIENT_ID, currency, locale: locale })
+export const constructPaypalBtn = async(clientId: string, orderId: number, currency: string) =>{
+ loadScript({ clientId, currency, locale: locale })
     .then((paypal: any) => {
         paypal
             .Buttons({

src/views/billing/wxpay/index.vue

@@ -3,9 +3,11 @@
     import { useRoute } from 'vue-router';
     import { useRouterPush } from '@/hooks/common/router';
     import { doGetOrderInfo } from '@/service/api/order';
+    import { useI18n } from 'vue-i18n';
 
     const route = useRoute();
     const { routerPushByKey } = useRouterPush();
+    const { t } = useI18n();
 
     const qrCodeImg = ref<string>(window.location.origin + route.query.url);
 
@@ -34,15 +36,15 @@
   <div class="weChat__card--div">
     <a-card class="weChat__card" :bordered="false">
       <template #title>
-        <span class="title__span">微信支付</span>
+        <span class="title__span">{{ t('page.order.wxpay') }}</span>
       </template>
       <div class="weChat__card__content">
+      <div class="bottomContent">
+        <span class="weChat__card_span">    {{ t('page.order.wxpayScan') }}</span>
+      </div>
         <p>
           <img :src="qrCodeImg" class="weChat__card_qrCodeImg" />
         </p>
-      <div class="bottomContent">
-        <span class="weChat__card_span">使用微信扫码支付</span>
-      </div>
      </div>
     </a-card>
   </div>