提交
This commit is contained in:
164
package-lock.json
generated
164
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
BIN
src/assets/img/Stripe.png
Normal file
BIN
src/assets/img/Stripe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@@ -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,10 +233,36 @@ export default {
|
||||
needInvoice: false, // 是否需要发票
|
||||
invoiceTitle: '', // 发票抬头
|
||||
invoiceContent: '',
|
||||
stripeKey:'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
|
||||
stripeKey: 'pk_test_51QgdjVPKgQFCEmmSTE5TcqvxbWwduryZ4rODZmKyU4u73oqRSMBYJL9HW0XSFNeda0kkDU2IseyMKcVK4R69At4100IDXgaRbV' // 发票内容
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
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() {
|
||||
@@ -357,14 +458,7 @@ export default {
|
||||
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user