提交

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-manage-system",
       "version": "4.2.0",
       "dependencies": {
+        "@stripe/stripe-js": "^5.5.0",
         "@tinymce/tinymce-vue": "^3.0.1",
         "axios": "^0.18.0",
         "babel-polyfill": "^6.26.0",
@@ -34,10 +35,12 @@
         "vue": "^2.6.10",
         "vue-cropperjs": "^3.0.0",
         "vue-i18n": "^8.10.0",
+        "vue-paypal-checkout": "latest",
         "vue-pdf": "^4.3.0",
         "vue-quill-editor": "^3.0.6",
         "vue-router": "^3.0.3",
         "vue-schart": "^2.0.0",
+        "vue-stripe": "^0.1.52",
         "vue-ueditor-wrap": "^2.5.6",
         "vuedraggable": "^2.17.0",
         "vxe-table": "^3.8.19"
@@ -1530,6 +1533,14 @@
       "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw=="
     },
+    "node_modules/@paypal/sdk-constants": {
+      "version": "1.0.151",
+      "resolved": "https://registry.npmmirror.com/@paypal/sdk-constants/-/sdk-constants-1.0.151.tgz",
+      "integrity": "sha512-mmGLiMt7BYAKtoK1gxhUakvP1ua7lnbCR7LAaHsPc1KETWw9yMMARlpVEdfz9XGHrbzzNQep6U02zUtzXuncIA==",
+      "dependencies": {
+        "hi-base32": "^0.5.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1624,6 +1635,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/@stripe/stripe-js": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/@stripe/stripe-js/-/stripe-js-5.5.0.tgz",
+      "integrity": "sha512-lkfjyAd34aeMpTKKcEVfy8IUyEsjuAT3t9EXr5yZDtdIUncnZpedl/xLV16Dkd4z+fQwixScsCCDxSMNtBOgpQ==",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
     "node_modules/@tinymce/tinymce-vue": {
       "version": "3.2.8",
       "resolved": "https://registry.npmmirror.com/@tinymce/tinymce-vue/-/tinymce-vue-3.2.8.tgz",
@@ -2932,6 +2951,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/Base64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/Base64/-/Base64-1.3.0.tgz",
+      "integrity": "sha512-7BjEEmnnW5pm6mBXKQ8CfQFeVjSoFnB507R86mKaJqa2i8CvosDy/dj+9RpbD0A22XQ+hGb0FHO+226C0QXRGw=="
+    },
     "node_modules/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
@@ -2974,6 +2998,24 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "node_modules/beaver-logger": {
+      "version": "3.0.19",
+      "resolved": "https://registry.npmmirror.com/beaver-logger/-/beaver-logger-3.0.19.tgz",
+      "integrity": "sha512-hfBwPUD8PeE6mFSTtWAYd/wI8AzaoeRGNIpWGZWJGZBLyl7Fb7n6PL33JujUzWKWDsIi9V3HoppqIyM/CeeSnw==",
+      "dependencies": {
+        "zalgo-promise": "^1.0.26"
+      }
+    },
+    "node_modules/belter": {
+      "version": "1.0.173",
+      "resolved": "https://registry.npmmirror.com/belter/-/belter-1.0.173.tgz",
+      "integrity": "sha512-wmUVEQR0igzKKO1yHT6ouGLCwzoeXFf1OsHeAk8DcCOgYtdBU8NiUlV94qx8NLFnahuwbpDqLBETfHUGXQOL8Q==",
+      "dependencies": {
+        "cross-domain-safe-weakmap": "^1",
+        "cross-domain-utils": "^2",
+        "zalgo-promise": "^1"
+      }
+    },
     "node_modules/bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
@@ -3113,6 +3155,11 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmmirror.com/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -12603,6 +12650,22 @@
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
       "integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
     },
+    "node_modules/cross-domain-safe-weakmap": {
+      "version": "1.0.29",
+      "resolved": "https://registry.npmmirror.com/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz",
+      "integrity": "sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==",
+      "dependencies": {
+        "cross-domain-utils": "^2.0.0"
+      }
+    },
+    "node_modules/cross-domain-utils": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmmirror.com/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz",
+      "integrity": "sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==",
+      "dependencies": {
+        "zalgo-promise": "^1.0.11"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -14042,6 +14105,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -14847,6 +14915,11 @@
         "node": ">= 0.12"
       }
     },
+    "node_modules/form-serialize": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmmirror.com/form-serialize/-/form-serialize-0.7.2.tgz",
+      "integrity": "sha512-ohEA4Crzd/+hSREjGf4kSsy73WhAtQ7H+blGEz2DVd+JCi0TV5nZBSn9PaPlvrl9m29fa6xclAfpRkqZ57b1bw=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -15391,6 +15464,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "node_modules/hi-base32": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmmirror.com/hi-base32/-/hi-base32-0.5.1.tgz",
+      "integrity": "sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -17364,6 +17442,11 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "node_modules/merge": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/merge/-/merge-1.2.1.tgz",
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -18591,6 +18674,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/paypal-checkout": {
+      "version": "4.0.344",
+      "resolved": "https://registry.npmmirror.com/paypal-checkout/-/paypal-checkout-4.0.344.tgz",
+      "integrity": "sha512-CDdkbfsk2Fcc8VQX+4UIlJcA+ylnumSnIFupScYvvGuJHrC1Yr6CwnSBPqo4e2fxCfeeoMxOrWzSFetw6RF+vQ==",
+      "dependencies": {
+        "@paypal/sdk-constants": "^1.0.64",
+        "Base64": "^1.0.0",
+        "beaver-logger": "^3.0.6",
+        "belter": "1.0.173",
+        "bowser": "^1.7.1",
+        "cross-domain-utils": "^2.0.1",
+        "form-serialize": "^0.7.2",
+        "hi-base32": "^0.5.0",
+        "post-robot": "^8.0.0",
+        "zalgo-promise": "^1.0.10",
+        "zoid": "6.0.84"
+      }
+    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -18777,6 +18878,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/post-robot": {
+      "version": "8.0.32",
+      "resolved": "https://registry.npmmirror.com/post-robot/-/post-robot-8.0.32.tgz",
+      "integrity": "sha512-PMOdDAt3pyuKUxZcTzdcXXFxLqkdeLpRlcCQl7QAJpI+e7J1YHH+PfC7KAbcL8hRVQ1LknQYGoirbA1/eO/a1g==",
+      "dependencies": {
+        "cross-domain-safe-weakmap": "^1.0.1",
+        "cross-domain-utils": "^2.0.0",
+        "zalgo-promise": "^1.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "7.0.39",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
@@ -22705,6 +22816,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue-paypal-checkout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/vue-paypal-checkout/-/vue-paypal-checkout-3.2.0.tgz",
+      "integrity": "sha512-y7Fz60ePTr6rMHGVu5S+6kDZTl5x3+Wh2DV0E4V1ibc3z4YJ8gw18PxMOt34FexYs5621F5C/9MF30TiSoDXBg==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "paypal-checkout": "^4.0.228",
+        "vue": "^2.5.17"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-pdf": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-4.3.0.tgz",
@@ -22833,6 +22958,16 @@
         "schart.js": "^3.0.0"
       }
     },
+    "node_modules/vue-stripe": {
+      "version": "0.1.52",
+      "resolved": "https://registry.npmmirror.com/vue-stripe/-/vue-stripe-0.1.52.tgz",
+      "integrity": "sha512-gNM49Tp+17L1HXgaSz/mZskYGO5Exqj6NQ0YyB74ji3QDsO7T21mWvY5FO5sA26OIKvH6JQDmpSbY0/VQzjyVA==",
+      "dependencies": {
+        "es6-promise": "^4.0.5",
+        "merge": "^1.2.0",
+        "vue": "^2"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -24020,6 +24155,35 @@
         "node": ">=10"
       }
     },
+    "node_modules/zalgo-promise": {
+      "version": "1.0.48",
+      "resolved": "https://registry.npmmirror.com/zalgo-promise/-/zalgo-promise-1.0.48.tgz",
+      "integrity": "sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ=="
+    },
+    "node_modules/zoid": {
+      "version": "6.0.84",
+      "resolved": "https://registry.npmmirror.com/zoid/-/zoid-6.0.84.tgz",
+      "integrity": "sha512-hFz75WxribvnWDIq8QA9iw1Csxa2BdjOsSmItnVSe+SKS75FZDp6hnxgoKkI0SM+7OTWNJ9Gwx/lywAImjk6Cg==",
+      "dependencies": {
+        "beaver-logger": "^3.0.17",
+        "belter": "1.0.123",
+        "cross-domain-safe-weakmap": "^1.0.22",
+        "cross-domain-utils": "^2.0.16",
+        "hi-base32": "^0.5.0",
+        "post-robot": "^8.0.29",
+        "zalgo-promise": "^1.0.34"
+      }
+    },
+    "node_modules/zoid/node_modules/belter": {
+      "version": "1.0.123",
+      "resolved": "https://registry.npmmirror.com/belter/-/belter-1.0.123.tgz",
+      "integrity": "sha512-SV1wtG+HHygUmFOBcPbKBix5aWfxdeUZ/+h2d7yGuIuQTu6x65zzUYGQg9CrUsd63DtzqCj09S1CBSHxDjhYmQ==",
+      "dependencies": {
+        "cross-domain-safe-weakmap": "^1.0.20",
+        "cross-domain-utils": "^2.0.10",
+        "zalgo-promise": "^1.0.28"
+      }
+    },
     "node_modules/zrender": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@stripe/stripe-js": "^5.5.0",
     "@tinymce/tinymce-vue": "^3.0.1",
+    "@vue/reactivity": "^3.5.13",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "clipboard": "^2.0.11",
@@ -40,6 +41,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
     "vue-schart": "^2.0.0",
+    "vue-stripe": "^0.1.52",
     "vue-ueditor-wrap": "^2.5.6",
     "vuedraggable": "^2.17.0",
     "vxe-table": "^3.8.19"

src/components/page/components/pendingPayment/OrderConfirmation.vue

@@ -1,11 +1,27 @@
 <template>
     <div class="order-confirmation-box">
+        <!-- <div id="card-element" style="width:100%;height: 600px;"></div>
+        <div id="card-errors" role="alert"></div>
+        <button @click="getStripe">Submit Payment</button>
         <div id="paypal-container" style="display: none">
             <div id="paypal-payment-button" style="width: 100%; height: 50px"></div>
-        </div>
+        </div> -->
+        <!-- <stripe-element-card
+        :hidePostalCode="true"
+      ref="elementRef"
+      ref="elements"
+      :options="stripeOptions"
+      :pk="stripeKey"
+      @token="tokenCreated"
+    />  <button @click="submit1">Generate token</button> -->
+
+        <!-- 错误显示区域 -->
+    
+
+        <!-- 支付按钮 -->
 
         <div class="order-confirmation">
-            <el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" column="2">
+            <el-descriptions :title="$t('pendingPayment.Confirmorderinformation')" :column="2">
                 <el-descriptions-item label="ID">{{ articleInfo.accept_sn }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('pendingPayment.journal')">{{ journalInfo.title }} </el-descriptions-item>
                 <el-descriptions-item :span="2" style="width: 100%" :label="$t('pendingPayment.title')"
@@ -84,7 +100,7 @@
                                                 style="width: 74%; align-items: flex-start; justify-content: flex-start"
                                             >
                                                 <div class="trade-layout-leaf" style="width: 100%">
-                                                    <div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
+                                                    <div  class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color:#222d65">
                                                         PayPal
                                                     </div>
                                                 </div>
@@ -103,7 +119,7 @@
                                         >
                                             <div class="trade-layout-leaf">
                                                 <div class="iconWrapper">
-                                                    <img src="@/assets/img/zhifubao.png" class="icon" />
+                                                    <img src="@/assets/img/Stripe.png" class="icon" />
                                                 </div>
                                             </div>
                                             <div
@@ -111,7 +127,7 @@
                                                 style="width: 74%; align-items: flex-start; justify-content: flex-start"
                                             >
                                                 <div class="trade-layout-leaf" style="width: 100%">
-                                                    <div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset">
+                                                    <div class="clamp-wrap clamp-ellipsis mainTitle" style="-webkit-line-clamp: unset;color: #635bff;">
                                                         Stripe
                                                     </div>
                                                 </div>
@@ -148,6 +164,13 @@
                                     </div>  -->
                                 </div>
                             </div>
+                            <div v-show="selectedPaymentMethod == 'Stripe'" style="padding: 0 16px">
+                               
+                                <form >
+                                    <div id="payment-element" />
+                                    <!-- <el-button native-type="submit" type="primary" round>Complete</el-button> -->
+                                </form>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -172,13 +195,24 @@
 </template>
 
 <script>
+
 import { loadStripe } from '@stripe/stripe-js';
 
 export default {
     props: ['type'],
     data() {
         return {
-
+            clientSecret:'pi_3QhTa4PKgQFCEmmS1YU2egVT_secret_d3VZ5GwCUuvN1OjTAW7FdkxrN',
+            // baseUrl: this.Common.baseUrl,
+            baseUrl: 'https://submission.tmrjournals.com/',
+            baseUrl: 'http://localhost:8080/',
+            stripeOptions: {
+                locale: 'en', // 可选，设置 Stripe Elements 的语言
+                pk: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV'
+            },
+            loading: false,
+            paymentError: null,
+            paymentIntentId: '', // 用于存储 PaymentIntent ID
             stripe: null,
             elements: null,
             card: null,
@@ -199,11 +233,37 @@ export default {
             needInvoice: false, // 是否需要发票
             invoiceTitle: '', // 发票抬头
             invoiceContent: '',
-            stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
+            stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
         };
     },
+
     methods: {
-        submit() {
+       
+        onPaymentSuccess(paymentIntent) {
+            // 在支付成功后调用的逻辑，例如通知后端更新订单状态
+            console.log('Payment successful with ID:', paymentIntent.id);
+
+            fetch('/update-order-status', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    paymentIntentId: paymentIntent.id // 传递支付 ID 给后端
+                })
+            })
+                .then(() => console.log('Order updated successfully'))
+                .catch((error) => console.error('Failed to update order:', error));
+        },
+
+        submit1() {
+            // this will trigger the process
+            this.$refs.elementRef.submit();
+        },
+        tokenCreated(token) {
+            console.log(token);
+            // handle the token
+            // send it to your server
+        },
+        submit() { 
             // 假设 PayPal 按钮的容器有 id="paypal-button-container"
             const paypalButtonContainer = document.getElementById('paypal-container');
 
@@ -223,16 +283,33 @@ export default {
             if (this.selectedPaymentMethod == 'PayPal') {
                 this.getPayPal();
             } else if (this.selectedPaymentMethod == 'Stripe') {
-                this.getStripe();
+                const loading = this.$loading({
+                                lock: true,
+                                text: 'Loading',
+                                spinner: 'el-icon-loading',
+                                background: 'rgba(0, 0, 0, 0.7)'
+                            });
+                this.getStripe(loading);
             } else if (this.selectedPaymentMethod == 'Alipay') {
                 // this.getAlipay();
             }
         },
-        getStripe() {
+        async getStripe(loading) {
-
             
+            let elements = this.elements;
+            let stripe = this.stripe;
+            const { error } = await stripe.confirmPayment({
+                elements,
+                confirmParams: {
+                    // Make sure to change this to your payment completion page
+                    return_url: `${this.baseUrl}success?id=${this.articleId}`
+                }
+                //redirect: 'if_required'如果设置redirect: 'if_required'则不跳转returnUrl
+            });
+            loading.close()
+            console.log(error);
         },
-        getPayPal(id) {
+        getPayPal(loading) {
             var that = this;
             window.paypal
                 .Buttons({
@@ -338,9 +415,33 @@ export default {
         formatAmount(amount) {
             return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         },
-        selectPaymentMethod(method) {
+        async initStripe() {
+            const loading = this.$loading({
+                                lock: true,
+                                text: 'Loading',
+                                spinner: 'el-icon-loading',
+                                background: 'rgba(0, 0, 0, 0.7)'
+                            });
+            this.stripe = await loadStripe(this.stripeKey);
+            this.elements = this.stripe.elements({
+                theme: 'stripe',
+                clientSecret: this.clientSecret,
+                locale: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh',
+            });
+            const paymentElement = this.elements.create('payment');
+            paymentElement.mount('#payment-element');
+            loading.close()
+        },
+
+       
+
+        async selectPaymentMethod(method) {
             console.log('method at line 191:', method);
             this.selectedPaymentMethod = method;
+            if (method == 'Stripe') {
+                this.initStripe();
+               
+            }
             this.$forceUpdate();
         },
         payWithAlipay() {
@@ -354,17 +455,10 @@ export default {
     },
     async created() {
         // Initialize Stripe.js with your publishable key
-      
+
         this.getDetail();
     },
-    async mounted(){
+    async mounted() {},
-        this.stripe = await loadStripe(this.stripeKey);
-        this.elements = this.stripe.elements();
-
-        // Create a Card Element and mount it into the DOM
-        this.card = this.elements.create('card');
-        this.card.mount('#card-element');
-    },
     activated() {
         this.getDetail();
     }
@@ -847,4 +941,25 @@ h3 {
 .tableInfo {
     font-size: 14px;
 }
+#card-element {
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+#card-errors {
+    color: red;
+    margin-bottom: 10px;
+}
+button {
+    background-color: #5469d4;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+}
+button:disabled {
+    background-color: #ccc;
+}
 </style>