|
@@ -1,94 +1,162 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
- <s-header :name="$t('airwallex.sunzee')" :noback="false"></s-header>
|
|
|
|
- <h2>申泽智能</h2>
|
|
|
|
- <button @click="redirectHpp()">去付款Redirect to HPP</button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <s-header :name="$t('airwallex.checkout')" :noback="true"></s-header>
|
|
|
|
+ <div>
|
|
|
|
+ <!-- <h2 style="text-align: center;">{{ $t('airwallex.sunzee') }}</h2> -->
|
|
|
|
+
|
|
|
|
+ <!-- 这里展示商品名称 * 商品数量 价格 -->
|
|
|
|
+ <div class="checkout">
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
|
|
+ <span style="text-align: center; display: block; font-size: medium; font-weight: bold;"> Sunzee 棉花糖购物凭证
|
|
|
|
+ </span>
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
|
|
+ <!-- 商品图片 -->
|
|
|
|
+ <!-- <span style="text-align: center; display: block;">
|
|
|
|
+ <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
|
|
|
+ </span> -->
|
|
|
|
+ <!-- 订单号 订单状态 订单金额 商品名称 数量 -->
|
|
|
|
+ <van-cell-group inset>
|
|
|
|
+ <van-cell :title="$t('airwallex.productName')" :value="productsName" />
|
|
|
|
+ <van-cell :title="$t('airwallex.productsNum')" :value="productsNum" />
|
|
|
|
+ <van-cell :title="$t('airwallex.totalPrice')" :value="totalPrice" />
|
|
|
|
+ </van-cell-group>
|
|
|
|
+
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
|
|
+ <div class="button-container">
|
|
|
|
+ <!-- 取消按钮 -->
|
|
|
|
+ <van-button color="#ee0a24" plain @click="cancelOrder()">{{ $t('airwallex.cancelOrder') }}</van-button>
|
|
|
|
+ <!-- 支付按钮 -->
|
|
|
|
+ <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="redirectHpp()">{{
|
|
|
|
+ $t('airwallex.payForIt') }}</van-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- <div>
|
|
|
|
+ <van-cell-group inset>
|
|
|
|
+ <van-cell title="单元格" value="内容" />
|
|
|
|
+ <van-cell title="单元格" value="内容" label="描述信息" />
|
|
|
|
+ </van-cell-group>
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <!-- <div>
|
|
|
|
+ <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <!-- <div>
|
|
|
|
+ <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <!-- <van-card num="2" price="2.00" desc="描述信息" title="商品标题" /> -->
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
|
|
import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
|
|
import { useRoute } from "vue-router";
|
|
import { useRoute } from "vue-router";
|
|
|
|
+import { ref } from 'vue';
|
|
|
|
+import sHeader from "@/components/SimpleHeader";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: 'Hpp',
|
|
|
|
-
|
|
|
|
- setup() {
|
|
|
|
- const mode = 'payment';
|
|
|
|
- const route = useRoute();
|
|
|
|
- // const router = useRouter();
|
|
|
|
- console.log(route.query.intent_id)
|
|
|
|
- const redirectHppForCheckout = () => {
|
|
|
|
- redirectToCheckout({
|
|
|
|
- env: 'demo',
|
|
|
|
- mode,
|
|
|
|
- currency: route.query.currency,
|
|
|
|
- intent_id: route.query.intent_id,
|
|
|
|
- client_secret: route.query.client_secret,
|
|
|
|
- //主题
|
|
|
|
- theme: {
|
|
|
|
- fonts: [
|
|
|
|
- {
|
|
|
|
- src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
- family: 'AxLLCircular',
|
|
|
|
- weight: 400,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- // successUrl: 'https://www.baidu.com', // 支付成功跳转页面
|
|
|
|
- // failUrl: 'https://www.baidu.com', // 支付失败跳转页面
|
|
|
|
- logoUrl: '', //支付页面展示商户LOGO
|
|
|
|
- });
|
|
|
|
- };
|
|
|
|
- const redirectHppForRecurring = () => {
|
|
|
|
- redirectToCheckout({
|
|
|
|
- env: 'demo',
|
|
|
|
- // mode,
|
|
|
|
- // currency,
|
|
|
|
- // client_secret,
|
|
|
|
- recurringOptions: {
|
|
|
|
- card: {
|
|
|
|
- next_triggered_by: 'customer',
|
|
|
|
- merchant_trigger_reason: 'scheduled',
|
|
|
|
- // currency,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- theme: {
|
|
|
|
- fonts: [
|
|
|
|
- {
|
|
|
|
- src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
- family: 'AxLLCircular',
|
|
|
|
- weight: 400,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- // successUrl: 'https://www.google.com',
|
|
|
|
- // failUrl: 'https://www.google.com',
|
|
|
|
- });
|
|
|
|
- };
|
|
|
|
- loadAirwallex({
|
|
|
|
- env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
|
|
|
|
- });
|
|
|
|
- const redirectHpp = async () => {
|
|
|
|
- try {
|
|
|
|
- await loadAirwallex({
|
|
|
|
- env: 'demo',
|
|
|
|
- });
|
|
|
|
- if (mode === 'payment') {
|
|
|
|
- redirectHppForCheckout();
|
|
|
|
- } else if (mode === 'recurring') {
|
|
|
|
- redirectHppForRecurring();
|
|
|
|
- }
|
|
|
|
- } catch (error) {
|
|
|
|
- window.alert('There was an error with HPP redirection', error);
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
- return {
|
|
|
|
- redirectHpp,
|
|
|
|
- redirectHppForCheckout,
|
|
|
|
- redirectHppForRecurring
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
|
|
+ name: 'Hpp',
|
|
|
|
+ components: { sHeader },
|
|
|
|
+
|
|
|
|
+ setup() {
|
|
|
|
+
|
|
|
|
+ const productsName = ref('棉花糖');
|
|
|
|
+ const productsNum = ref('3');
|
|
|
|
+ const totalPrice = ref('2.00');
|
|
|
|
+
|
|
|
|
+ const mode = 'payment';
|
|
|
|
+ const route = useRoute();
|
|
|
|
+ // const router = useRouter();
|
|
|
|
+ console.log(route.query.intent_id)
|
|
|
|
+ const redirectHppForCheckout = () => {
|
|
|
|
+ redirectToCheckout({
|
|
|
|
+ env: 'demo',
|
|
|
|
+ mode,
|
|
|
|
+ currency: route.query.currency,
|
|
|
|
+ intent_id: route.query.intent_id,
|
|
|
|
+ client_secret: route.query.client_secret,
|
|
|
|
+ //主题
|
|
|
|
+ theme: {
|
|
|
|
+ fonts: [
|
|
|
|
+ {
|
|
|
|
+ src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
+ family: 'AxLLCircular',
|
|
|
|
+ weight: 400,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ // successUrl: 'https://www.baidu.com', // 支付成功跳转页面
|
|
|
|
+ // failUrl: 'https://www.baidu.com', // 支付失败跳转页面
|
|
|
|
+ logoUrl: '', //支付页面展示商户LOGO
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ const redirectHppForRecurring = () => {
|
|
|
|
+ redirectToCheckout({
|
|
|
|
+ env: 'demo',
|
|
|
|
+ // mode,
|
|
|
|
+ // currency,
|
|
|
|
+ // client_secret,
|
|
|
|
+ recurringOptions: {
|
|
|
|
+ card: {
|
|
|
|
+ next_triggered_by: 'customer',
|
|
|
|
+ merchant_trigger_reason: 'scheduled',
|
|
|
|
+ // currency,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ theme: {
|
|
|
|
+ fonts: [
|
|
|
|
+ {
|
|
|
|
+ src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
+ family: 'AxLLCircular',
|
|
|
|
+ weight: 400,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ // successUrl: 'https://www.google.com',
|
|
|
|
+ // failUrl: 'https://www.google.com',
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ loadAirwallex({
|
|
|
|
+ env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
|
|
|
|
+ });
|
|
|
|
+ const redirectHpp = async () => {
|
|
|
|
+ try {
|
|
|
|
+ await loadAirwallex({
|
|
|
|
+ env: 'demo',
|
|
|
|
+ });
|
|
|
|
+ if (mode === 'payment') {
|
|
|
|
+ redirectHppForCheckout();
|
|
|
|
+ } else if (mode === 'recurring') {
|
|
|
|
+ redirectHppForRecurring();
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ window.alert('There was an error with HPP redirection', error);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const cancelOrder = async () => {
|
|
|
|
+ // 返回浏览器历史记录上一页
|
|
|
|
+ window.history.back();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ redirectHpp,
|
|
|
|
+ redirectHppForCheckout,
|
|
|
|
+ redirectHppForRecurring,
|
|
|
|
+ productsName,
|
|
|
|
+ productsNum,
|
|
|
|
+ totalPrice,
|
|
|
|
+ cancelOrder,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
/* const intent_id = this.$route.query.intent_id;
|
|
/* const intent_id = this.$route.query.intent_id;
|
|
@@ -98,50 +166,50 @@ const mode = 'payment';
|
|
// console.log(this.intent_id);
|
|
// console.log(this.intent_id);
|
|
const redirectHppForCheckout = () => {
|
|
const redirectHppForCheckout = () => {
|
|
redirectToCheckout({
|
|
redirectToCheckout({
|
|
- env: 'demo',
|
|
|
|
- mode,
|
|
|
|
- currency,
|
|
|
|
- intent_id,
|
|
|
|
- client_secret,
|
|
|
|
|
|
+ env: 'demo',
|
|
|
|
+ mode,
|
|
|
|
+ currency,
|
|
|
|
+ intent_id,
|
|
|
|
+ client_secret,
|
|
//主题
|
|
//主题
|
|
- theme: {
|
|
|
|
- fonts: [
|
|
|
|
- {
|
|
|
|
- src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
- family: 'AxLLCircular',
|
|
|
|
- weight: 400,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- successUrl: 'https://www.baidu.com', // 支付成功跳转页面
|
|
|
|
- failUrl: 'https://www.baidu.com', // 支付失败跳转页面
|
|
|
|
|
|
+ theme: {
|
|
|
|
+ fonts: [
|
|
|
|
+ {
|
|
|
|
+ src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
+ family: 'AxLLCircular',
|
|
|
|
+ weight: 400,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ successUrl: 'https://www.baidu.com', // 支付成功跳转页面
|
|
|
|
+ failUrl: 'https://www.baidu.com', // 支付失败跳转页面
|
|
logoUrl: '', //支付页面展示商户LOGO
|
|
logoUrl: '', //支付页面展示商户LOGO
|
|
});
|
|
});
|
|
};
|
|
};
|
|
const redirectHppForRecurring = () => {
|
|
const redirectHppForRecurring = () => {
|
|
redirectToCheckout({
|
|
redirectToCheckout({
|
|
- env: 'demo',
|
|
|
|
- mode,
|
|
|
|
- currency,
|
|
|
|
- client_secret,
|
|
|
|
- recurringOptions: {
|
|
|
|
- card: {
|
|
|
|
- next_triggered_by: 'customer',
|
|
|
|
- merchant_trigger_reason: 'scheduled',
|
|
|
|
- currency,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- theme: {
|
|
|
|
- fonts: [
|
|
|
|
- {
|
|
|
|
- src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
- family: 'AxLLCircular',
|
|
|
|
- weight: 400,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- successUrl: 'https://www.google.com',
|
|
|
|
- failUrl: 'https://www.google.com',
|
|
|
|
|
|
+ env: 'demo',
|
|
|
|
+ mode,
|
|
|
|
+ currency,
|
|
|
|
+ client_secret,
|
|
|
|
+ recurringOptions: {
|
|
|
|
+ card: {
|
|
|
|
+ next_triggered_by: 'customer',
|
|
|
|
+ merchant_trigger_reason: 'scheduled',
|
|
|
|
+ currency,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ theme: {
|
|
|
|
+ fonts: [
|
|
|
|
+ {
|
|
|
|
+ src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
|
|
|
|
+ family: 'AxLLCircular',
|
|
|
|
+ weight: 400,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ successUrl: 'https://www.google.com',
|
|
|
|
+ failUrl: 'https://www.google.com',
|
|
});
|
|
});
|
|
};
|
|
};
|
|
loadAirwallex({
|
|
loadAirwallex({
|
|
@@ -149,28 +217,43 @@ loadAirwallex({
|
|
});
|
|
});
|
|
const redirectHpp = async () => {
|
|
const redirectHpp = async () => {
|
|
try {
|
|
try {
|
|
- await loadAirwallex({
|
|
|
|
- env: 'demo',
|
|
|
|
- });
|
|
|
|
- if (mode === 'payment') {
|
|
|
|
- redirectHppForCheckout();
|
|
|
|
- } else if (mode === 'recurring') {
|
|
|
|
- redirectHppForRecurring();
|
|
|
|
- }
|
|
|
|
|
|
+ await loadAirwallex({
|
|
|
|
+ env: 'demo',
|
|
|
|
+ });
|
|
|
|
+ if (mode === 'payment') {
|
|
|
|
+ redirectHppForCheckout();
|
|
|
|
+ } else if (mode === 'recurring') {
|
|
|
|
+ redirectHppForRecurring();
|
|
|
|
+ }
|
|
} catch (error) {
|
|
} catch (error) {
|
|
- window.alert('There was an error with HPP redirection', error);
|
|
|
|
|
|
+ window.alert('There was an error with HPP redirection', error);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
export default {
|
|
export default {
|
|
name: 'Hpp',
|
|
name: 'Hpp',
|
|
data() {
|
|
data() {
|
|
- return {
|
|
|
|
- redirectHpp,
|
|
|
|
|
|
+ return {
|
|
|
|
+ redirectHpp,
|
|
msg: this.$route.query.intent_id,
|
|
msg: this.$route.query.intent_id,
|
|
intent_id: this.$route.query.intent_id,
|
|
intent_id: this.$route.query.intent_id,
|
|
client_secret: this.$route.query.client_secret,
|
|
client_secret: this.$route.query.client_secret,
|
|
currency: this.$route.query.currency
|
|
currency: this.$route.query.currency
|
|
- };
|
|
|
|
|
|
+ };
|
|
},
|
|
},
|
|
}; */
|
|
}; */
|
|
-</script>
|
|
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
|
|
+.button-container {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.button-container button {
|
|
|
|
+ margin: 0 30px;
|
|
|
|
+ /* 根据需要调整按钮与容器边缘的距离 */
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+body {
|
|
|
|
+ background-color: #f7ece2; /* 设置背景颜色 */
|
|
|
|
+}
|
|
|
|
+</style>
|