|
@@ -0,0 +1,175 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <h2>申泽智能</h2>
|
|
|
+ <button @click="redirectHpp()">Redirect to HPP</button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+
|
|
|
+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
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/* const intent_id = this.$route.query.intent_id;
|
|
|
+const client_secret = 'replace-with-your-client-secret';
|
|
|
+const currency = 'replace-with-your-currency';
|
|
|
+const mode = 'payment';
|
|
|
+// console.log(this.intent_id);
|
|
|
+const redirectHppForCheckout = () => {
|
|
|
+ redirectToCheckout({
|
|
|
+ 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', // 支付失败跳转页面
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: 'Hpp',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ redirectHpp,
|
|
|
+ msg: this.$route.query.intent_id,
|
|
|
+ intent_id: this.$route.query.intent_id,
|
|
|
+ client_secret: this.$route.query.client_secret,
|
|
|
+ currency: this.$route.query.currency
|
|
|
+ };
|
|
|
+ },
|
|
|
+}; */
|
|
|
+</script>
|