shenze-sysMan/src/views/Hpp.vue

<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>