From b79eda48bc353580a46b22656b5d00f4bccb6c3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Wed, 15 Jan 2025 20:01:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 164 ++++++++++++++++++
 package.json                                  |   2 +
 src/assets/img/Stripe.png                     | Bin 0 -> 2103 bytes
 .../pendingPayment/OrderConfirmation.vue      | 159 ++++++++++++++---
 4 files changed, 303 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/img/Stripe.png

diff --git a/package-lock.json b/package-lock.json
index cf77aa8..cc77eb7 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 05a41fd..4783b06 100644
--- a/package.json
+++ b/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"
diff --git a/src/assets/img/Stripe.png b/src/assets/img/Stripe.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5ea8fa62b4496b6404101198fc9050540c3a9c9
GIT binary patch
literal 2103
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

literal 0
HcmV?d00001

diff --git a/src/components/page/components/pendingPayment/OrderConfirmation.vue b/src/components/page/components/pendingPayment/OrderConfirmation.vue
index 614615b..5900151 100644
--- a/src/components/page/components/pendingPayment/OrderConfirmation.vue
+++ b/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(){
-        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');
-    },
+    async mounted() {},
     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>